FeaturePolicy.getAllowlistForFeature() - Web APIs
the getallowlistforfeature() method of the featurepolicy allows query of the allow list for a specific feature for the current feature policy. syntax const allowlist = featurepolicy.getallowlistforfeature(<feature>) parameter feature name a specific feature name must be specified. return value an allow list for the specified feature. errors the function will raise a warning if the specified feature policy directive name is not known. however, it will also return empty array, inditating that no origin is allowed to use the feature. example the followin example prints all the origins that are allowed to use camera api by the feature policy. please note that camera api might be restricted by the permissions api, if the user did not grant the corrsponding permission yet. // ...
... editor's draft initial definition. ...
... example the followin example prints all the origins that are allowed to use camera api by the feature policy. please note that camera api might be restricted by the permissions api, if the user did not grant the corrsponding permission yet. // first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowlist = featurepolicy.getallowlistforfeature("camera") for (const origin of allowlist){ console.log(origin) } specification specification status comment feature policythe definition of 'getallowlistforfeature' in that specification. editor's draft initial definition. ...

Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’ - HTTP
reason reason: did not find method in cors header ‘access-control-allow-methods’ what went wrong? ...
... reason reason: did not find method in cors header ‘access-control-allow-methods’ what went wrong? ...
...hod being used by the cors request is not included in the list of methods specified by the response's access-control-allow-methods header. this header specifies a comma-delineated list of the http methods which may be used when using cors to access the url specified in the request; if the request is using any other method, this error occurs. for example, if the response includes: access-control-allow-methods: get,head,post trying to use a put request will fail with this error. make sure your code only uses the permitted http methods when accessing the service. note: if the server includes any unrecognized or undefined method names in its access-control-allow-methods header, a different error occurs: reason: invalid token ‘xyz' in cors header ‘access-control-allow-methods’. ...

Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ - HTTP
reason reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ what went wrong? ...
... reason reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ what went wrong? ...
... ...

Allow - HTTP
the allow header lists the set of methods supported by a resource. this header must be sent if the server responds with a 405 method not allowed status code to indicate which request methods can be used. an empty allow header indicates that the resource allows no request methods, which might occur temporarily for a given resource, for example. header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods. ...
...ndicate which request methods can be used. an empty allow header indicates that the resource allows no request methods, which might occur temporarily for a given resource, for example. header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods. ...
...uest methods, which might occur temporarily for a given resource, for example. header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods. ...

405 Method Not Allowed - HTTP
the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the target resource. the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods. ...
... the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the target resource. the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods. ...
...owed response status code indicates that the request method is known by the server but is not supported by the target resource. the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods. ...

allowEvents - Archive of obsolete content
...
... ...

JSSecurityCallbacks.contentSecurityPolicyAllows
the jssecuritycallbacks.contentsecuritypolicyallows callback is called when a script attempts to access an object property. the callback can deny the script access to the property. jscheckaccessop is the type of the callback. (it is also the type of the callback set by js_setcheckobjectaccesscallback.) syntax typedef jsbool (*jscspevalchecker)(jscontext *cx); name type description cx jscontext * the js context in which the property access attempt is occurring. description check whether runtime code generation is allowed for the current global. ...
... ...

Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
to correct this problem on the client side, simply ensure that the credentials flag's value is false when issuing your cors request. if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true. if using server-sent events, make sure eventsource.withcredentials is false (it's the default value). ...
...cors request. if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true. if using server-sent events, make sure eventsource.withcredentials is false (it's the default value). if using the fetch api, make sure request.credentials is "omit". if, instead, you need to adjust the server's behavior, you'll need to change the value of access-control-allow-origin to grant access to the origin from which the client is loaded. ...

Access-Control-Allow-Methods - HTTP
the access-control-allow-methods response header specifies the method or methods allowed when accessing the resource in response to a preflight request. header type response header forbidden header name no syntax access-control-allow-methods: <method>, <method>, ... access-control-allow-methods: * directives <method> comma-delimited list of the allowed http request methods. * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information). in requests with credentials, it is treated as the literal method name "*" without special semantics. ...
...allow-methods: * directives <method> comma-delimited list of the allowed http request methods. * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information). in requests with credentials, it is treated as the literal method name "*" without special semantics. examples access-control-allow-methods: post, get, options access-control-allow-methods: * specifications specification status comment fetchthe definition of 'access-control-allow-methods' in that specification. living standard initial definition ...

Timing-Allow-Origin - HTTP
the timing-allow-origin response header specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. header type response header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources. <origin> specifies a uri that may see the timing resources. you can specify multiple origins, separated by commas. ...
... header type response header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources. <origin> specifies a uri that may see the timing resources. you can specify multiple origins, separated by commas. examples to allow any resource to see timing resources: timing-allow-origin: * to allow https://developer.mozilla.org to see timing resources, you can specify: timing-allow-origin: https://developer.mozilla.org specifications specification status comment resource timing level 3the definition of 'timing-allow-origin' in that specification. editor's draft initial definition. ...

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

Reason: CORS request external redirect not allowed - HTTP
for example, if the page https://service.tld/fetchdata were requested, and the http response is "301 moved permanently", "307 temporary redirect", or "308 permanent redirect" with a location of https://anotherservice.net/getdata, the cors request will fail in this manner. ...

Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ - HTTP
reason reason: invalid token ‘xyz’ in cors header ‘access-control-allow-headers’ what went wrong? the response to the cors request that was sent by the server includes an access-control-allow-headers header which includes at least one invalid header name. the access-control-allow-headers header is sent by the server in response to a preflight request; it lets the client know which http headers are permitted in cors requests. if the client user agent finds among the comma-delineated values provided by the header any header name it does not recognize, this error occurs. this is a problem that most likely can only be fixed on the server side, by modifying the server's configuration to no longer send the invalid or unknown header name with the access-control-allow-headers header. it m...

Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel - HTTP
reason reason: missing token ‘xyz’ in cors header ‘access-control-allow-headers’ from cors preflight channel what went wrong? the access-control-allow-headers header is sent by the server to let the client know which headers it supports for cors requests. the value of access-control-allow-headers should be a comma-delineated list of header names, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed). this error occurs when attempting to preflight a header that is not expressly allowed (that is, it's not included in the list specified by the access-control-allow-headers header sent by the server). to fix this, the server needs to be updated so that it allows the indicated header, or you need to avoid using that header. ...

Index - Web APIs
api, dom, landing, reference, web when writing code for the web, there are a large number of web apis available. below is a list of all the apis and interfaces (object types) that you may be able to use while developing your web app or site. 2 angle_instanced_arrays api, reference, webgl, webgl extension the angle_instanced_arrays extension is part of the webgl api and allows to draw the same object, or groups of similar objects multiple times, if they share the same vertex data, primitive count and type. 3 angle_instanced_arrays.drawarraysinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.drawarraysinstancedangle() method of the webgl api renders primitives from array data like the ...
...ys.vertexattribdivisorangle() method of the webgl api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle(). 6 abortcontroller api, abortcontroller, experimental, interface, reference the abortcontroller interface represents a controller object that allows you to abort one or more dom requests as and when desired. 7 abortcontroller.abortcontroller() api, abortcontroller, constructor, experimental, fetch, reference the abortcontroller() constructor creates a new abortcontroller object instance. 8 abortcontroller.abort() api, abortcontroller, experimental, fetch, method, reference, abort() the abort() method...
...i, abortcontroller, experimental, fetch, property, reference, signal the signal read-only property of the abortcontroller interface returns an abortsignal object instance, which can be used to communicate with/abort a dom request as desired. 10 abortsignal api, abortsignal, dom, experimental, interface, reference the abortsignal interface represents a signal object that allows you to communicate with a dom request (such as a fetch) and abort it if required via an abortcontroller object. 11 abortsignal.aborted api, abortsignal, experimental, property, reference, aborted the aborted read-only property returns a boolean that indicates whether the dom request(s) the signal is communicating with is/are aborted (true) or not (false). 12 abort...
...And 172 more matches

HTTP Index - HTTP
nctionality and new semantics by creating new http methods or headers. 5 choosing between www and non-www urls guide, http, url a recurring question among website owners is whether to choose non-www or www urls. this page provides some advice on what's best. 6 data urls base64, guide, http, intermediate, url data urls, urls prefixed with the data: scheme, allow content creators to embed small files inline in documents. 7 evolution of http guide, http, needsupdate, needsupdate(http/3) http (hypertext transfer protocol) is the underlying protocol of the world wide web. http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in h...
...hich image format, or which content encoding). 18 list of default accept values accept, content negotiation, http, reference this article documents the default values for the http accept header for specific inputs and browser versions. 19 cross-origin resource policy (corp) http, reference, security cross-origin resource policy is an opt-in mechanism that allows web applications to protect against certain cross-origin requests, such as those issued by the browser when resources are embedded using elements such as <script> and <img>. this serves as an additional layer of protection above and beyond the same-origin policy which can mitigate speculative side channel attacks as well as cross-site script inclusion attacks. cross-origin resource policy comple...
...n:priority cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. 21 cors errors cors, errors, http, https, messages, same-origin, security, console, troubleshooting cross-origin resource sharing (cors) is a standard that allows a server to relax the same-origin policy. this is used to explicitly allow some cross-origin requests while rejecting others. 22 reason: cors disabled authentication, authentication article, cors, cross-origin, disabled, errors, http, https, messages, resource, same origin, same-origin, security, sharing, validation, secure, troubleshooting a request that needs to use cors w...
...And 63 more matches

Index - Archive of obsolete content
provides an api for creating namespaces for objects, which effectively may be used for creating fields that are not part of objects public api. 80 core/promise implementation of promises to make asynchronous programming easier. 81 dev/panel enables you to extend the firefox developer tools. 82 event/core the event/core module allows the creation of apis to broadcast and subscribe to events. 83 event/target create objects that broadcast events. 84 frame/hidden-frame creates firefox frames (i.e. xul <iframe> elements) that are not displayed to the user. 85 frame/utils provides helper functions for working with platform internals like frames and browsers. ...
...uild documentation, developing mozilla, extensions, guide, needscontent, xpcom no summary! 226 custom about: urls about: this page describes how to register a new about: url for your extension. 227 default preferences a key part of any extension is the default settings that come with it. mozilla provides a simple way of shipping default settings by allowing default preferences. 228 deploying a plugin as an extension add-ons, plugins one of the new features available in firefox 1.5 is the ability to place browser plugins in a firefox extension. this feature is particularly useful for vendors who wish to deploy the plugin even if firefox is not currently installed, or who want to use the automatic extension update mechanism to ...
...mmon practice found in many extensions is using xmlhttprequest (or some other mechanism) to download javascript or json (they are different) from a remote website. once the content has been downloaded, the extension authors proceed to use eval() to decode the string content into javascript objects. this practice is dangerous and will not, in fact, pass an amo review. so the extension will not be allowed to move out of the amo sandbox. 233 enhanced extension installation add-ons, extensions no summary! 234 extension etiquette add-ons, extensions, guide no summary! 235 extension library no summary! 236 extension packaging add-ons, extensions, guide, toolkit api no summary! 237 extension samples ...
...And 62 more matches

Index
found 1275 pages: # page tags and summary 1 xpcom add-ons, extensions, landing, mozilla, xpcom xpcom is a cross platform component object model, similar to microsoft com. it has multiple language bindings, allowing xpcom components to be used and implemented in javascript, java, and python in addition to c++. 2 accessing the windows registry using xpcom add-ons, code snippets, extensions, needsclassification, windows registry when implementing windows-specific functionality, it is often useful to access the windows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in s...
... components.utils.unwaivexrays undo a previous call to components.utils.waivexrays(), restoring xray vision for the caller. 49 components.utils.waivexrays waives xray vision for an object, giving the caller a transparent wrapper to the underlying object. 50 javaxpcom embedding, java, javaxpcom, mozilla, xpcom, xpcom:language bindings javaxpcom 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. 51 development javaxpcom, xpcom:language bindings no summary! 52 examples javaxpcom, xpcom:language bindings no summary! 53 other resource...
...xpcom:language bindings no summary! 54 plxpcom guide, mozilla, plxpcom, xpcom, xpcom:language bindings plxpcom (perl xpcom) provides language bindings letting you use xpcom from perl code. the resources here provide information about this language binding and how to use it. 55 pyxpcom landing, mozilla, pyxpcom, xpcom, xpcom:language bindings pyxpcom allows for communication between python and xpcom, such that a python application can access xpcom objects, and xpcom can access any python class that implements an xpcom interface. pyxpcom is actively used in activestate komodo products, for example. 56 community pyxpcom, xpcom:language bindings no summary! 57 rbxpcom guide, mozilla, rbxpcom, xpcom, xpcom:language b...
...And 33 more matches

sslfnc.html
cified directory. nss_init isnot idempotent, so call it only once. nss_init opens the database files read-only. if you are performing operations that require write permission, for example s/mime operations such as adding a certificate, use nss_initreadwrite instead. before calling nss_init, your program must call pr_init. the policy flags for all cipher suites are turned off by default, disallowing all cipher suites. therefore, an application cannot use nss to perform any cryptographic operations until after it enables appropriate cipher suites by calling one of the ssl export policy functions: nss_setdomesticpolicy, nss_setexportpolicy, and nss_setfrancepolicy configure the cipher suites for domestic, international, and french versions of software products with encryption features. ...
...policy functions: nss_setdomesticpolicy, nss_setexportpolicy, and nss_setfrancepolicy configure the cipher suites for domestic, international, and french versions of software products with encryption features. ssl_cipherpolicyset sets policy flags for individual cipher suites, one at a time. this may be helpful if you have an export license that permits more or fewer capabilities than those allowed by the other export policy functions. nss_initreadwrite sets up configuration files and performs other tasks required to run network security services. unlike nss_init, nss_initreadwrite provides both read and write access to database files. syntax #include "nss.h" secstatus nss_initreadwrite(char *configdir); parameter this function has the following parameter: ...
...th both read and write permission in the specified directory. nss_initreadwrite isnot idempotent, so call it only once. use nss_initreadwrite rather than nss_init if you are performing operations that require write permission, such as some s/mime operations. before calling nss_initreadwrite, your program must call pr_init. the policy flags for all cipher suites are turned off by default, disallowing all cipher suites. therefore, an application cannot use nss to perform any cryptographic operations until after it enables appropriate cipher suites by calling one of the ssl export policy functions. nss_nodb_init performs tasks required to run network security services without setting up configuration files. important: this nss function is not intended for use with ssl, which requires t...
...And 31 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
aring from a server perspective (including php code snippets) can be found in the server-side access control (cors) article. simple requests some requests don’t trigger a cors preflight. those are called “simple requests” in this article, though the fetch spec (which defines cors) doesn’t use that term. ...
...ugh the fetch spec (which defines cors) doesn’t use that term. ...
...e other headers defined in the fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request-header”, which are: accept accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in the request; these are accessed using the xmlhttprequest.upload property. no readablestream object is used in the request. note: these are the same kinds of cross-site requests that web content can a...
...And 30 more matches

Index - HTTP
an http header consists of its case-insensitive name followed by a colon ':', then by its value (without line breaks). leading white space before the value is ignored. 2 accept http, http header, reference, request header the accept request http header advertises which content types, expressed as mime types, the client is able to understand. ...
...der the accept-charset request http header advertises which character set the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice within the content-type response header. browsers usually don't set this header as the default value for each content type is usually correct and transmitting it would allow easier fingerprinting. 4 accept-encoding content negotiation, http, http header, reference, request header the accept-encoding request http header advertises which content encoding, usually a compression algorithm, the client is able to understand. using content negotiation, the server selects one of the proposals, uses it and informs the client of its choice with the content...
... it, this happens rarely (and is frowned upon as it leads to fingerprinting). 6 accept-ranges http, http header, range requests, reference, response header the accept-ranges response http header is a marker used by the server to advertise its support of partial requests. the value of this field indicates the unit that can be used to define a range. ...
...And 29 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
atag, accessibility, authoring tool accessibility guidelines, glossary atag (authoring tool accessibility guidelines) is a w3c recommendation for building accessible-authoring tools that produce accessible contents. 10 abstraction abstraction, coding, codingscripting, glossary, programming language abstraction in computer programming is a way to reduce complexity and allow efficient design and implementation in complex software systems. it hides the technical complexity of systems behind simpler apis. 11 accessibility accessibility, glossary web accessibility (a11y) refers to best practices for keeping a website usable despite physical and technical restrictions. web accessibility is formally defined and discussed at the w3c through the web acc...
...cdns make for fast service less affected by high traffic. 46 cia glossary, security cia (confidentiality, integrity, availability) (also called the cia triad or aic triad) is a model that guides an organization's policies for information security. 47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code. 48 cors glossary, infrastructure, security cors (cross-origin resource sharing) is a system, consisting of transmitting http headers, that determines whether browsers block frontend javascript code from accessing responses for cr...
...ch separate values need to be specified (or parsed) or are to be serialized as part of a css property value. it is defined by the formal syntax of the property and normally refers to the order in which longhand values should be specified as part of a single shorthand value. 65 canvas codingscripting, glossary, graphics, html, javascript the canvas element is part of html5 and allows for dynamic, scriptable rendering of 2d and 3d shapes and bitmap images. 66 card sorting card sorting, design, glossary card sorting is a simple technique used in information architecture whereby people involved in the design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then orga...
...And 26 more matches

Using Feature Policy - HTTP
the feature-policy header is still in an experimental state, and is subject to change at any time. ...
... the feature-policy header is still in an experimental state, and is subject to change at any time. ...
... the feature-policy header is still in an experimental state, and is subject to change at any time. ...
...And 25 more matches

Migrating from Firebug - Firefox Developer Tools
c / cmd+opt+c. the devtools share the same shortcuts, but also provide shortcuts for the different panels. e.g. the network monitor can be opened via ctrl+shift+q / cmd+opt+q, the web console via ctrl+shift+k / cmd+opt+k and the debugger via ctrl+shift+s / cmd+opt+s. web console the web console is the equivalent of firebug's console panel. it shows log information associated with a web page and allows you to execute javascript expressions via its command line. the display between both is somewhat different. this may be changed in bug 1269730. filter log messages firebug offers two ways to filter log messages, via the options menu and via the filter buttons within the toolbar. the developer tools console offers similar functionality via the filter buttons inside its toolbar — centralized a...
...page. the developer tools share the same api, so your console.* statements will continue to work. persist logs in firebug you can click the persist button within the toolbar to keep the logged messages between page navigations and reloads. in the devtools this option is called enable persistent logs and is available within the toolbox options panel. server logs firebug extensions like firephp allow to log server-side messages to the firebug console. this functionality is already integrated into the devtools using the chromelogger protocol and doesn't require any extensions to be installed. command history the command history available through a button in firebug's command line, is available by pressing ↑/↓ within the devtools command line. inspect object properties by clicking on an...
...thin the devtools command line. inspect object properties by clicking on an object logged within the console you can inspect the object's properties and methods within the dom panel. in the firefox devtools you can also inspect the objects. the difference is that they show the properties and methods within a side panel inside the web console. show network requests the console panel in firebug allows to log ajax requests (aka xmlhttprequests). this option is also available within the devtools web console via the net > xhr. furthermore, the web console even allows to display all other network requests via net > log. view json and xml structures to view json and xml responses of ajax requests, firebug has special tabs when expanding the request within the console panel. the devtools web cons...
...And 24 more matches

SVG documentation index - SVG: Scalable Vector Graphics
ulative. 21 additive needscompattable, needsexample, svg, svg attribute no summary! 22 alignment-baseline svg, svg attribute the alignment-baseline attribute specifies how an object is aligned with respect to its parent. this property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. for example, this allows alphabetic baselines in roman text to stay aligned across font size changes. it defaults to the baseline with the same name as the computed value of the alignment-baseline property. 23 alphabetic deprecated, svg, svg attribute the alphabetic attribute defines the lower baseline of a font. it has the same syntax and semantics as the baseline descriptor within an @font-face. ...
... 31 baseprofile deprecated, svg, svg attribute the baseprofile attribute describes the minimum svg language profile that the author believes is necessary to correctly render the content. the attribute does not specify any processing restrictions; it can be considered metadata. 32 baseline-shift needsexample, svg, svg attribute the baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. the shifted object might be a sub- or superscript. 33 bbox deprecated, svg, svg attribute the bbox attribute defines the maximal bounding box of a font. 34 begin needscompattable, svg, svg attribute the begin attribute defines when an animation sh...
...ttribute defines when an animation should begin or when an element should be discarded. 35 bias filters, needsexample, svg, svg attribute the bias attribute shifts the range of the filter. after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component. this allows representation of values that would otherwise be clamped to 0 or 1. 36 by svg, svg attribute the by attribute specifies a relative offset value for an attribute that will be modified during an animation. 37 calcmode needscompattable, needsexample, svg, svg attribute the calcmode attribute specifies the interpolation mode for the animation. 38 ...
...And 23 more matches

Index
portability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards. ...
... order to allow interoperability between software and devices that perform cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. ...
... different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base l...
...And 22 more matches

WebIDL bindings
tparentobject chain will eventually get you to a window, so that every webidl object is associated with a particular window. for example, nsinode::getparentobject returns the node's owner document. the return type of getparentobject doesn't matter other than it must either singly-inherit from nsisupports or have a corresponding tosupports method that can produce an nsisupports from it. ...
...again, if you do not need wrapper caching you don't need to do this. ...
... webidl. if your object is not refcounted then the return value of functions that return it should return an nsautoptr. c++ reflections of webidl constructs c++ reflections of webidl operations (methods) a webidl operation is turned into a method call on the underlying c++ object. the return type and argument types are determined as described below. in addition to those, all methods that are allowed to throw will get an errorresult& argument appended to their argument list. non-static methods that use certain webidl types like any or object will get a jscontext* argument prepended to the argument list. static methods will be passed a const globalobject& for the relevant global and can get a jscontext* by calling context() on it. the name of the c++ method is simply the name of the webidl ...
...And 21 more matches

Autoplay guide for media and Web Audio APIs - Web media technologies
ing policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. ...
...ing: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. because of that, browsers generally only allow autoplay to occur successfully under specific circumstances. ...
...es for google chrome and webkit. note: put another way, playback of any media that includes audio is generally blocked if the playback is programmatically initiated in a tab which has not yet had any user interaction. browsers may additionally choose to block under other circumstances. autoplay of media elements now that we've covered what autoplay is and what can prevent autoplay from being allowed, we'll look at how your web site or app can automatically play media upon page load, how to detect when autoplay fails to occur, and tips for coping when autoplay is denied by the browser. the autoplay attribute the simplest way to automatically play content is to add the autoplay attribute to your <audio> or <video> element. this sets the autoplay property on the element to true, and when au...
...And 21 more matches

Feature-Policy - HTTP
the http feature-policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in content within any <iframe> elements in the document. this header is still in an experimental state, and is subject to change at any time. be wary of this when implementing it on your website. the header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change. for more information, see the main feature policy article. header type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to. ...
... this article will eventually be updated to reflect that change. for more information, see the main feature policy article. header type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to. see directives below for a list of the permitted directive names. ...
...ill eventually be updated to reflect that change. for more information, see the main feature policy article. header type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to. see directives below for a list of the permitted directive names. ...
...And 20 more matches

HTML documentation index - HTML: Hypertext Markup Language
and summary 1 html: hypertext markup language html, html5, landing, web, l10n:priority html (hypertext markup language) is the most basic building block of the web. it defines the meaning and structure of web content. other technologies besides html are generally used to describe a web page's appearance/presentation (css) or functionality/behavior (javascript). 2 allowing cross-origin use of images and canvas advanced, cors, canvas, html, image, reference, security, storage, data html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin. 3 app...
... autocapitalize, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. 10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element. classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.getelementsbyclassname. 11 contenteditable editing, global attributes, html, reference, text editing, contenteditable, text entry, text input the contenteditable global attribute is an enumerated attribute indicating if the element should be editable by ...
...ements via the class selectors or functions like the dom method document.getelementsbyclassname. 11 contenteditable editing, global attributes, html, reference, text editing, contenteditable, text entry, text input the contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. ...
...And 15 more matches

Web Replay
replaying processes preserve all the same js behavior, dom structures, graphical updates, and most other behaviors that occurred while recording. devtools' debugger and console can be used to inspect and control the replay. getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay". web replay's features can only be used in a tab that is recording or replaying. ...
...then the rewind button. while replaying old behavior, the tab can't be interacted with. to resume recording and interacting with the tab, press the pause button and then the play button to run forward to the end of the recording. save recording and replay on the same machine clicking the 'tools -> web developer -> web replay -> save recording' menu item when a recording tab is open will allow the entire recording to be saved to a file. clicking the 'tools -> web developer -> web replay -> load recording in new tab' menu item will start a new tab which replays the recording to the end. the developer tools can be used to interact with this tab in the same way as a recording tab, though playing forward to the end will pause the tab instead of allowing further recording. save recording...
...ill probably crash. this feature has had little testing or polishing and there is not yet a good definition of 'reasonably similar'. time travel features this section describes extensions to the developer tools that use time travel to help debug a recording/replaying tab. step back when paused, the reverse step button in the debugger developer tool will step to the previous line executed and allow inspecting program state there. it is the opposite of the normal forward step button. rewind to breakpoint when paused, if there are any breakpoints set then the rewind button will run back and stop at the last time a breakpoint was set. it is the opposite of the normal button for playing forward. seek to console messages errors and logged messages in the console developer tool can be cli...
...And 14 more matches

Introduction to automated testing - Learn web development
, adding in css prefixes or transpiling nascent javascript features for maximum cross-browser reach, and so on. use a browser automation system like selenium to run specific tests on installed browsers and return results, alerting you to failures in browsers as they crop up. commercial cross-browser testing apps like lambdatest, sauce labs, browserstack, and testingbot are based on selenium, but allow you to access their set up remotely using a simple interface, saving you the hassle of setting up your own testing system. we will look at how to set up your own selenium-based testing system in the next article. in this article, we'll look at how to set up a task runner, and use the basic functionality of commercial systems like the ones mentioned above. note: the above two categories are no...
...ning with node and gulp, a beginner-friendly option. setting up node and npm most tools these days are based on node.js, so you'll need to install it from nodejs.org: download the installer for your system from the above site. (if you already have node and npm installed, jump to point 4) install it like you would any other program. note that node comes with node package manager (npm), which allows you to easily install packages, share your own packages with others, and run useful scripts on your projects. once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of node and npm: node -v npm -v if you've got node/npm already installed, you should update them to their latest versions. to update node, the mos...
...link above). to update npm, use the following command in your terminal: npm install npm@latest -g note: if the above command fails with permissions errors, fixing npm permissions should sort you out. to start using node/npm-based packages on your projects, you need to set up your project directories as npm projects. this is easy to do. for example, let's first create a test directory to allow us to play without fear of breaking anything. create a new directory somewhere sensible using your file manager ui, or, on a command line, by navigating to the location you want and running the following command: mkdir node-test to make this directory an npm project, you just need to go inside your test directory and initialize it, with the following: cd node-test npm init this secon...
...And 13 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
nce pages. if this attribute is not specified, the default type adopted is text. the available types are as follows: type description basic examples spec button a push button with no default behavior displaying the value of the value attribute, empty by default. <input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers. <input type="color" name="color"/> html5 date a control for entering a date (year, month, and day, with no time). opens a date picker or numeric wheels for ye...
...g a number. displays a spinner and adds default validation when supported. displays a numeric keypad in some devices with dynamic keypads. <input type="number" name="number"/> html5 password a single-line text field whose value is obscured. will alert user if site is not secure. <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type="range" name="range" min="...
... the <datalist> of autocomplete options max numeric types maximum value maxlength password, search, tel, text, url maximum length (number of characters) of value min numeric types minimum value minlength password, search, tel, text, url minimum length (number of characters) of value multiple email, file boolean. whether to allow multiple values name all name of the form control. submitted with the form as part of a name/value pair. pattern password, text, tel pattern the value must match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost all boolean. the value is not editable ...
...And 13 more matches

CSS3 - Archive of obsolete content
and :first-line becomes ::first-line. the new general sibling combinator ( h1~pre ). the next iteration of the selectors specification is already in progress, though it still hasn't reached the first public working draft stage. ...
...detection of ecmascript support, using the script media features is also proposed. ...
... via the css font-synthesis property. css basic user interface module level 3 recommendation since june 21st, 2018 adds: the ability to tweak the box model using the css box-sizing property. at risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module. allow the styling of forms according their content using the css :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements. at risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, ...
...And 11 more matches

HTML5 - Developer guides
html5 is the latest evolution of the standard that defines html. the term represents two different concepts. it is a new version of the language html, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful web sites and applications. this set is sometimes called html5 & friends and often shortened to just html5. ...
...ehaviors, and a larger set of technologies that allows the building of more diverse and powerful web sites and applications. this set is sometimes called html5 & friends and often shortened to just html5. designed to be usable by all open web developers, this reference page links to numerous resources about html5 technologies, classified into several groups based on their function. semantics: allowing you to describe more precisely what your content is. connectivity: allowing you to communicate with the server in new and innovative ways. offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently. multimedia: making video and audio first-class citizens in the open web. ...
... styling: letting authors write more sophisticated themes. ...
...And 11 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
que space-separated keywords, which are listed in the following table. every keyword within a space seperated value should be unique within that value. values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations of the current document. ...
... space seperated value should be unique within that value. values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations of the current document. link link not allowed author author of the current document or article. link link not allowed bookmark permalink for the nearest ancestor section. ...
... attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations of the current document. link link not allowed author author of the current document or article. link link not allowed bookmark permalink for the nearest ancestor section. not allowed link not allowed canonical preferred url for the current document. ...
...And 11 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
ne. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts embedded content. implicit aria role no corresponding role permitted aria roles application, document, img, none, presentation dom interface htmliframeelement attributes this element includes the global attributes. ...
... permitted aria roles application, document, img, none, presentation dom interface htmliframeelement attributes this element includes the global attributes. allow specifies a feature policy for the <iframe>. see the article privacy, permissions, and information security for details on security issues and how <iframe> works with feature policy to keep systems safe. allowfullscreen set to true if the <iframe> can activate fullscreen mode by calling the requestfullscreen() method. this attribute is considered a legacy attribute and redefined as allow="fullscreen". ...
...eature policy for the <iframe>. see the article privacy, permissions, and information security for details on security issues and how <iframe> works with feature policy to keep systems safe. allowfullscreen set to true if the <iframe> can activate fullscreen mode by calling the requestfullscreen() method. this attribute is considered a legacy attribute and redefined as allow="fullscreen". allowpaymentrequest set to true if a cross-origin <iframe> should be allowed to invoke the payment request api. this attribute is considered a legacy attribute and redefined as allow="payment". csp a content security policy enforced for the embedded resource. see htmliframeelement.csp for details. height the height of the frame in css pixels. default is 150. importance the download prio...
...And 11 more matches

HTTP headers - HTTP
rver with the set-cookie header. set-cookie send cookies from the server to the user-agent. cookie2 contains an http cookie previously sent by the server with the set-cookie2 header, but has been obsoleted. use cookie instead. set-cookie2 sends cookies from the server to the user-agent, but has been obsoleted. use set-cookie instead. cors learn more about cors here. ...
...o the user-agent. cookie2 contains an http cookie previously sent by the server with the set-cookie2 header, but has been obsoleted. use cookie instead. set-cookie2 sends cookies from the server to the user-agent, but has been obsoleted. use set-cookie instead. cors learn more about cors here. access-control-allow-origin indicates whether the response can be shared. access-control-allow-credentials indicates whether the response to the request can be exposed when the credentials flag is true. access-control-allow-headers used in response to a preflight request to indicate which http headers can be used when making the actual request. access-control-allow-methods specifies the methods allowed when accessing the resource in response to a preflight request. access-control-exp...
...ht request can be cached. access-control-request-headers used when issuing a preflight request to let the server know which http headers will be used when the actual request is made. access-control-request-method used when issuing a preflight request to let the server know which http method will be used when the actual request is made. origin indicates where a fetch originates from. timing-allow-origin specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. do not track dnt expresses the user's tracking preference. tk indicates the tracking status of the corresponding response. downloads content-disposition indicates if the resource transmit...
...And 11 more matches

Index - Archive of obsolete content
attributes, xul reference no summary! 10 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 11 activetitlebarcolor xul attributes, xul reference no summary! 12 afterselected xul attributes, xul reference no summary! 13 align reference, référence(2), xul no summary! 14 allowevents xul attributes, xul reference no summary! 15 allownegativeassertions xul attributes, xul reference no summary! 16 alternatingbackground xul attributes, xul reference no summary! 17 alwaysopenpopup xul attributes, xul reference no summary! 18 attribute xul attributes, xul reference no summary! ...
...t any type of content. it is used when supporting temporary popup displays for selecting or entering data. 608 popupevents xul, xul popup guide there are several events related to popups and menus. 609 popupkeys xul, xul popup guide 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: 610 positioning xul, xul popup guide there are several ways in which the location of a popup on screen may be controlled. 611 special per-platform menu considerations beginner, guide, xul, xul po...
...5 accesskey xul properties, xul reference no summary! 616 accessible xul properties, xul reference no summary! 617 accessibletype xul properties, xul reference no summary! 618 align xul properties, xul reference no summary! 619 allnotifications xul properties, xul reference no summary! 620 allowevents xul properties, xul reference no summary! 621 alwaysopenpopup xul properties, xul reference no summary! 622 amindicator xul properties, xul reference no summary! 623 anchornode xul, xul properties, xul reference no summary! 624 applocale xul properties, xul reference no summary! 625 auto...
...And 10 more matches

From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio. at this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the <iframe>, <embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in th...
...in this module. objective: to learn how to embed items into web pages using <object>, <embed>, and <iframe>, like flash movies and other webpages. a short history of embedding a long time ago on the web, it was popular to use frames to create websites — small parts of a website stored in individual html pages. these were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. these were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. they did however have m...
...er chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. they did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used anymore. a little while later (late 90s, early 2000s), plugin technologies became very popular, such as java applets and flash — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through html alone. embedding these technologies was achieved through elements like <object>, and the lesser-used <embed>, and they were very useful at the time. they have since fallen out of fashion due to many problems, including accessibility, security, file size, and more; these da...
...And 10 more matches

Index - Learn web development
chnical side. of course you must be familiar with the technique of your craft, but what really matters is what you want to accomplish. yes, it seems obvious, but too many projects fail not from a lack of technical know-how, but from lack of goals and vision. 17 how do i use github pages? beginner, github, guide, web, gh-pages, git, publish github is a "social coding" site. it allows you to upload code repositories for storage in the git version control system. you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it. you can do that with other people's code too! this article provides a basic guide to publishing content using github's gh-pages feat...
...things you can do, depending on how much time you have and whether you are a beginner, a web developer, or a teacher. 47 index index, learn, mdn meta found 348 pages: 48 javascript — dynamic client-side scripting beginner, codingscripting, javascript, javascripting beginner, landing, module, topic, l10n:priority javascript is a programming language that allows you to implement complex things on web pages. every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved. 49 asynchronous javascript beginner, codingscripting, guide, javascr...
...ing, and how this looks in web browsers and javascript. you should understand these concepts before working through the other articles in the module. 53 graceful asynchronous programming with promises beginner, codingscripting, guide, javascript, learn, promises, async, asynchronous, catch, finally, then promises are a comparatively new feature of the javascript language that allow you to defer further actions until after a previous action has completed, or respond to its failure. 54 introducing asynchronous javascript beginner, codingscripting, guide, introducing, javascript, learn, promises, async, asynchronous, await, callbacks in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the d...
...And 10 more matches

Drag Operations - Web APIs
t the data to be dragged. in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default. to make other html elements draggable, three things must be done: set the draggable="true" on the element that you wish to make draggable. add a listener for the dragstart event. set the drag data in the above listener. here is an example which allows a section of content to be dragged. <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged. </p> the draggable attribute is set to "true", so this element becomes draggable. if this attribute were omitted or set to "false", the element would not be dragged, and instead the text would be selected. the...
...pieces of information, the type (or format) of the data, and the data's value. the format is a type string (such as text/plain for text data), and the value is a string of text. when the drag begins, you add data by providing a type and the data. during the drag, in an event listener for the dragenter and dragover events, you use the data types of the data being dragged to check whether a drop is allowed. for instance, a drop target that accepts links would check for the type text/uri-list. during a drop event, a listener would retrieve the data being dragged and insert it at the drop location. the drag data's types property returns a list of mime-type like domstrings, such as text/plain or image/jpeg. you can also create your own types. the most commonly used types are listed in the article r...
...st. during a drop event, a listener would retrieve the data being dragged and insert it at the drop location. the drag data's types property returns a list of mime-type like domstrings, such as text/plain or image/jpeg. you can also create your own types. the most commonly used types are listed in the article recommended drag types. a drag may include data items of several different types. this allows data to be provided in more specific types, often custom types, yet still provide fallback data for drop targets that do not support more specific types. it is usually the case that the least specific type will be normal text data using the type text/plain. this data will be a simple textual representation. to set a drag data item within the datatransfer, use the setdata() method. it takes two ...
...And 10 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes. it is much better and more reliable to sniff by browser capability or object feature support. you can usually do this by testing the required functionality in javascript. for example, rather than: if (ismozilla || isie5) you would use: if (document.getelementbyid) this would allow other browsers that support that w3c standard method, such as opera or safari, to work without any changes. useragent sniffing makes sense in very limited cases where you really do want to know the exact browser in use, such as when you need to work around a bug in a specific version of a specific browser. for all other purposes you should check for the feature you need rather than the browser...
...uch as opera or safari, to work without any changes. useragent sniffing makes sense in very limited cases where you really do want to know the exact browser in use, such as when you need to work around a bug in a specific version of a specific browser. for all other purposes you should check for the feature you need rather than the browsers you think will support that feature. ...
...ute and not the alt attribute. entities html markup can contain several entities, which the w3c web standards body has defined. you can reference entities through their numerical or character reference. for example, you can reference the non-breaking space character with &#160; or with its equivalent character reference &nbsp;. some older browsers, such as internet explorer, had such quirks as allowing you to use entities by replacing the ; (semi-colon) character at the end with regular text content: &nbsp foo &nbsp&nbsp foo internet explorer will render the above &nbsp as white spaces, even though that is against the w3c specification. the browser will not parse a &nbsp if it is directly followed by more characters, for example: &nbsp12345 this code does not work in mozilla, since it ...
...And 9 more matches

Introduction to client-side frameworks - Learn web development
r solutions with others. this shared ecosystem of libraries helped shape the growth of the web. now, javascript is an essential part of the web, used on 95% of all websites, and the web is an essential part of modern life. users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. the web allows us to do things that used to be possible only in native applications installed on our computers. these modern, complex, interactive websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions all...
...nstalled on our computers. these modern, complex, interactive websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. javascript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its ...
...meworks exist? we've discussed the environment that inspired the creation of frameworks, but not really why developers felt the need to make them. exploring the why requires first examining the challenges of software development. consider a common kind of application: a to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. this application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. in software development, this underlying data is known as state. each of our goals is theoretically simple in isolation. we can iterate over the data to render it; we can add to an object to make a new task; we can use an...
...And 9 more matches

Starting WebLock
e registration with xpcom for startup notification. you will see the code which does this in the next section. getting access to the category manager two fields in the nsmodulecomponentinfo structure introduced in the last section are addresses for registration and unregistration callbacks. the first callback is called when the component's nsimodule::registerself method is called. this callback allows the component to execute any one-time registration code it may need. the inverse of this function is the unregistration callback, where it's a good idea to undo whatever the registration function did. the two functions look like this: static ns_method weblockregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, ...
...whitelist, and add or remove sites from that list. weblock needs to provide an api, and it needs to hook into gecko in order to implement the actual locking functionality. the weblock user interface the weblock component in this tutorial uses xul to define the additional browser ui in a cross-platform way, and xul uses javascript to access and control xpcom components, but gecko's pluggable ui allows any user interface to call into gecko and the components you create as easily as you can from xul. see xul for a discussion of how xul interacts with javascript and xpcom. creating the weblock programming interface design is one of the hardest parts of any programming problem. the question the interface for the weblock component must answer is: how should weblock look to the outside world? wh...
...tion about xpidl) to define the interface to the component: how the functionality should be organized, expressed, and exposed to its clients. in general, the weblock service interface needs to include the following functionality: lock - enable web locking so that any browser in the gecko application is restricted to the white list of website domains. unlock - disable web locking. this should allow any browser in the gecko application to browse any website regardless of the white list. addsite - add the current url to the white list. removesite - remove the current url from the white list. enumeratesites - allows the enumeration of all sites in the white list. enumeratesites might be used in the user interface to provide something like an editable listbox of all sites in the white list. ...
...And 9 more matches

Variable fonts guide - CSS: Cascading Style Sheets
an be contained in a single file. that file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. the advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately. this allows for common typographic techniques such as setting different size headings in different weights for better readability at each size, or using a slightly narrower width for data-dense displays. for comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication — giving a much wider range of styles than cu...
...ations. this is sometimes done to reduce the overall file size in cases where the italics aren't needed or used. in all cases, it is still possible to link them with a common font-family name so you can call them using the same font-family and appropriate font-style. introducing the 'variation axis' the heart of the new variable fonts format is the concept of an axis of variation describing the allowable range of that particular aspect of the typeface design. so the 'weight axis' describes how light or how bold the letterforms can be; the 'width axis' describes how narrow or how wide they can be; the 'italic axis' describes if italic letterforms are present and can be turned on or off accordingly, etc. note that an axis can be a range or a binary choice. weight might range from 1–999, where...
...t should be noted that at this point there is no way in the @font-face declaration to 'map' a specific point on the variation axis of a variable font to the keyword bold (or any other keyword). this can generally be resolved fairly easily, but does require an extra step in writing your css: font-weight: 375; font-variation-settings: 'wght' 375; the following live example's css can be edited to allow you to play with font weight values. width width (represented by the wdth tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. this is typically set in css using the font-stretch property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is fa...
...And 9 more matches

<input type="email"> - HTML: Hypertext Markup Language
the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid multiple whether or not to allow multiple, comma-separated, e-mail addresses to be entered pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how ...
...he input will fail constraint validation if the length of the text entered into the field is fewer than minlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. multiple a boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. see allowing multiple e-mail addresses for an example, or html attribute: multiple for more details. note: normally, if you specify the required attribute, the user must enter a valid e-mail address for the field to be considered valid. however, if you add the multiple attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. in other words, the ...
...set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. using email inputs e-mail addresses are among the most frequently-inputted textual data forms on the web; they're used when logging into web sites, when requesting information, to allow order confirmation, for webmail, and so forth. as such, the email input type can make your job as a web developer much easier since it can help simplify your work when building the user interface and logic for e-mail addresses. when you create an email input with the proper type value, email, you get automatic validation that the entered text is at least in the correct form to potentially be a le...
...And 9 more matches

Web video codec guide - Web media technologies
size feature effect on quality effect on size color depth (bit depth) the higher the color bit depth, the higher the quality of color fidelity is achieved in the video. additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors. depending on the codec, higher color depths may result in larger compressed file sizes. the determining factor is what internal storage format is used for the compressed data. frame rate primarily affects the perceived smoothness of the motion in the image. to a point, the higher the frame rate, ...
... loss of quality lossless compression cannot reduce the overall video size nearly as much as lossy compression; the resulting files are likely to still be too large for general usage. ...
...g closely, we can see that the majority of these differences come from a horizontal camera move, making this a good candidate for motion compensation. to minimize the number of pixels that are different, here we take into account the panning of the camera by first shifting the first frame to the right by two pixels, then by taking the difference. this compensates for the panning of the camera, allowing for more overlap between the two frames. images from wikipedia there are two general types of motion compensation: global motion compensation and block motion compensation. global motion compensation generally adjusts for camera movements such as tracking, dolly movements, panning, tilting, rolling, and up and down movements. block motion compensation handles localized changes,...
...And 9 more matches

Understanding WebAssembly text format - WebAssembly
eir declaration. so given the following function: (func (param i32) (param f32) (local f64) local.get 0 local.get 1 local.get 2) the instruction local.get 0 would get the i32 parameter, local.get 1 would get the f32 parameter, and local.get 2 would get the f64 local. there is another issue here — using numeric indices to refer to items can be confusing and annoying, so the text format allows you to name parameters, locals, and most other items simply by including a name prefixed by a dollar symbol ($) just before the type declaration. thus you could rewrite our previous signature like so: (func (param $p1 i32) (param $p2 f32) (local $loc f64) …) and then could write local.get $p1 instead of local.get 0, etc. (note that when this text gets converted to binary, though, the binar...
...logger.wasm'), importobject) .then(obj => { obj.instance.exports.logit(); }); note: you can find this example on github as logger.html (see it live also). declaring globals in webassembly webassembly has the ability to create global variable instances, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this is very useful, as it allows dynamic linking of multiple modules. in webassembly text format, it looks something like this (see global.wat in our github repo; also see global.html for a live javascript example): (module (global $g (import "js" "global") (mut i32)) (func (export "getglobal") (result i32) (global.get $g)) (func (export "incglobal") (global.set $g (i32.add (global.get $g)...
...ge of memory (webassembly defines a page to be 64kb.) so let's see a complete module that prints the string “hi”. in a normal compiled c program, you’d call a function to allocate some memory for the string, but since we’re just writing our own assembly here and we own the entire linear memory, we can just write the string contents into global memory using a data section. data sections allow a string of bytes to be written at a given offset at instantiation time and are similar to the .data sections in native executable formats. our final wasm module looks like this: (module (import "console" "log" (func $log (param i32 i32))) (import "js" "mem" (memory 1)) (data (i32.const 0) "hi") (func (export "writehi") i32.const 0 ;; pass offset 0 to log i32.const 2 ;; pass l...
...And 9 more matches

Introduction to web APIs - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, javascript basics (see first steps, building blocks, javascript objects). objective: to gain familiarity with apis, what they can do, and how you can use them in your code. what are apis? application programming interfaces (apis) are constructs made available in programming languages to allow developers to create complex functionality more easily. they abstract more complex code away from you, providing some easier syntax to use in its place. as a real-world example, think about the electricity supply in your house, apartment, or other dwellings. if you want to use an appliance in your house, you simply plug it into a plug socket and it works. you don't try to wire it directly into t...
... effects to it, etc. in the background, the browser is actually using some complex lower-level code (e.g. c++ or rust) to do the actual audio processing. but again, this complexity is abstracted away from you by the api. third-party apis are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the web. for example, the twitter api allows you to do things like displaying your latest tweets on your website. it provides a special set of constructs you can use to query the twitter service and return specific information. relationship between javascript, apis, and other javascript tools so above, we talked about what client-side javascript apis are, and how they relate to the javascript language. let's recap this to make it clea...
...e twitter service and return specific information. relationship between javascript, apis, and other javascript tools so above, we talked about what client-side javascript apis are, and how they relate to the javascript language. ...
...And 8 more matches

Experimental features in Firefox
see bug 1223880 for more details. release channel version added enabled by default? nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients coni...
..., and sunken initial letters are displayed. see bug 1223880 for more details. release channel version added enabled by default? nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients conic gradients expand css gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. see bug 1175958 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.web...
...round a center point rather than radiating from it. see bug 1175958 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. see bug 1617600 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no ...
...And 8 more matches

Mozilla Web Services Security Model
g used as a tool for web sites to obtain priveleges that belong to the browser's user (such as being behind a firewall or getting the benefits of the user's cookies), web browsers restrict what web pages can do when accessing things in other domains. these restrictions apply to web services. however, web services can be designed to be accessed from other domains, or even from any domain. mozilla allows sites hosting such web services to tell mozilla that other sites can access the service. they do this by creating a file called web-scripts-access.xml in the root of the server that grants permission for other domains to access web services. for example, to determine what web sites can access a web service at http://www.example.com/dir1/dir2/service, mozilla would load the file http://www.exampl...
... format the web-scripts-access.xml file is an xml document. any errors in xml syntax, as well as many failures to follow the format, will cause the document to be ignored. the webscriptaccess element its root element must be a webscriptaccess element in the http://www.mozilla.org/2002/soap/security namespace. this element must have either one delegate element child or any number (0 or more) of allow element children. all of these children elements must be in the same namespace as the parent, and must be empty. the delegate element a delegate element means that the browser should delegate the access control to a web-scripts-access.xml file in the directory that the service is in. for example, when accessing a web service at http://www.example.com/dir1/dir2/service, if the access file at htt...
...the directory that the service is in. for example, when accessing a web service at http://www.example.com/dir1/dir2/service, if the access file at http://www.example.com/web-scripts-access.xml contains a delegate element, mozilla will instead use http://www.example.com/dir1/dir2/web...ipt-access.xml to determine whether access is permitted. if no such file exists, then access will be denied. ...
...And 8 more matches

Index
jsval jsapi reference, obsolete, spidermonkey boolean_to_jsval converts a bool argument, b, to a boolean jsval. 19 double_to_jsval jsapi reference, obsolete, spidermonkey double_to_jsval is the inverse of js::tonumber. 20 int_fits_in_jsval jsapi reference, obsolete, spidermonkey determines if a specified c integer value, i, lies within the range allowed for integer jsvals. if so, int_fits_in_jsval returns true, and i can be cast to jsval by calling int_to_jsval(i). otherwise, int_fits_in_jsval returns false. in this case, the application can still convert i to a jsval using js_newnumbervalue. 21 int_to_jsval jsapi reference, obsolete, spidermonkey int_to_jsval converts a c integer, i, to a jsval. 22 js::add*root...
...rom a text string chars, bytes, or srcbuf. 33 js::compileoffthread jsapi reference, reference, référence(2), spidermonkey js::compileoffthread compiles a script, chars for execution. 34 js::compileoptions jsapi reference, reference, référence(2), spidermonkey some methods of js::owningcompileoptions and js::compileoptions return the instance itself to allow method chain. 35 js::construct jsapi reference, reference, référence(2), spidermonkey js::construct calls a specified function as a constructor, fun. 36 js::createerror jsapi reference, reference, référence(2), spidermonkey js::createerror creates an error object with specified properties. 37 js::currentglobalornull jsapi reference, ref...
... jsapi reference, reference, référence(2), spidermonkey here, ptr represents the private member of js::rooted<t>, typed with t. 67 js::setlargeallocationfailurecallback jsapi reference, reference, référence(2), spidermonkey if a large allocation fails when calling pod_{calloc,realloc}cangc, the js engine may call the large-allocation- failure callback, if set, to allow the embedding to flush caches, possibly perform shrinking gcs, etc. to make some room. the allocation will then be retried (and may still fail.) 68 js::setoutofmemorycallback jsapi reference, reference, référence(2), spidermonkey unlike the error reporter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called im...
...And 8 more matches

nsIDocShell
rty); native code only! void preparefornewcontentmodel(); void resumerefreshuris(); void setchildoffset(in unsigned long offset); native code only! ...
...ffset); native code only! ...
...void suspendrefreshuris(); void tabtotreeowner(in boolean forward, out boolean tookfocus); attributes attribute type description allowauth boolean certain dochshells (like the message pane) should not throw up auth dialogs because it can act as a password trojan. allowdnsprefetch boolean attribute that determines whether dns prefetch is allowed for this subtree of the docshell tree. defaults to true. setting this will make it take effect starting with the next document loaded in the docshell. ...
...And 8 more matches

Web Console remoting - Firefox Developer Tools
introduction this document describes the way web console remoting works. the web console is split between a client with its user interface, and the server which has listeners for all the things that happen in the tab. for communication between the server and the client we use the remote debugging protocol. this architecture allows you to connect a web console client instance to a server running on b2g, fennec or some other firefox instance. to better understand the architecture of the web console we recommend learning about the debugger architecture. the remote web console is a feature introduced in firefox 18. this document describes the latest protocol, with changes that have been made since then. the webconsoleactor and the webconsoleclient the webconsoleactor lives in dbg-web...
...lkit/devtools/webconsole folder. the webconsoleclient lives in webconsoleclient.jsm (in toolkit/devtools/webconsole) and it is used by the web console when working with the web console actor. to see how the debugger is used in the web console code, look in browser/devtools/webconsole/webconsole.js, and search for webconsoleconnectionproxy. the new web console actors are: the webconsoleactor allows js evaluation, autocomplete, start/stop listeners, etc. the networkeventactor is used for each new network request. the client can request further network event details - like response body or request headers. to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor, listeners, onattachco...
...ers argument is an array which specifies listeners you want to start in the web console. these can be: page errors, window.console api messages, network activity, and file activity. for example: ["pageerror", "consoleapi", "networkactivity", "fileactivity"] the web console actor does not start any listeners by default. the client has the option to start each listener when needed. this approach allows for lower resource usage on the server - this is a potential issue if the server runs on devices with fewer resources. the onattachconsole callback receives a new instance of the webconsoleclient object. this object provides methods that abstract away protocol packets, things like startlisteners(), stoplisteners(), etc. protocol packets look as follows: { "to": "root", "type": "listtabs"...
...And 8 more matches

CSP: script-src - HTTP
ly urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the script-src policy: content-security-policy: script-src <source>; content-security-policy: script-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 8 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
puters are dual-boot (windows 7 and linux fedora 19 by 2013). all users have a personal account on a windows server (ad) and an ldap account for linux authentication. objective the objective is to provide users with a mailer agent, a web browser, and a news reader which are automatically configured (preferences) at startup to the current user connected on the computer. choosing mozilla products allow us to use the same apps while running either windows or linux systems (i suspect mac osx would be fine too). instead of configuring end user individual preferences files (~/.mozilla/default/randomdir/prefs.js) we now use a centralized default set of preferences. this centralized preference file can lock preferences (lockpref) or initialize them (defaultpref) based on environment variables (user,...
... appropriate .js file dedicated to autoconfig (here autoconf.js). the name of the file can be anything you want because it is named by a general.config preference that should be added at the end of file mozilla_home/default/pref/autoconf.js or mozilla_home/greprefs/autoconf.js: pref("general.config.filename", "mozilla.cfg");. file api that centralized preference file uses a javascript api that allows us to do what we need. that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7499 sat nov 05 09:21:34 cet 2011 defaults/autoconfig/prefcalls.js traditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js. the presence of pref("gen...
..."uid,cn,mail,labeleduri"); // close the try, and call the catch() } catch(e) { displayerror("lockedpref", e); } thunderbird.cfg (version 2 with ad) using thunderbird 9.0.1 and try to use a active directory (windows server 2008) as ldap-source did not work with version 1. here's my own version. //note: for accessing the active directory of windows server later than 2000 //it is necessary to allow anonymous read access. please see //(german) http://interop.blog.de/2010/02/13/kapitel-1-ldap-anfragen-linux-ad-8001564/ //or search the net how to do it. if it is not possible to give access to anonymous, //you have to enable this function first, please see //http://technet.microsoft.com/de-de/library/cc816788(ws.10).aspx // // //put everything in a try/catch try { var userinfo = new object(); ...
...And 7 more matches

New Security Model for Web Services - Archive of obsolete content
ich they were loaded, any script loaded from one domain into another is prevented from accessing resources in the domain into which it has been loaded. this policy has generally been successful in sandboxing javascript and java applets across the web. if the sandbox is unable to distinguish the common uri substring of the domain to be trusted from similar uris of untrusted domains, then it could allow a script loaded from an indistinguishable domain to exploit firewall-protected resources. also, this technique prevents the script from accessing many legitimate external resources not provided in the same domain as the script. this prevents a script from accessing web services and data published from any domain besides its own. white-listing by creating a white list of trusted uris from which...
...rently permitted for locally-saved scripts and signed scripts. this could be combined with the other options above such as whitelisting, signed scripts, etc. but the big problem with this is that the typical browser user really does not either understand or pay the consequences if he inadvertently opens a hole in his company's firewall. quite complex settings may be required to permit the user to allow access to desired external services without risking other resources. controlling resource access on the server access by untrusted scripts really needs to be under the control of the stake holder, which is the resource and server owner -- not the user -- to determine whether a resource should be insulated from web applications loaded from outside of the firewall. using a soap header for verifi...
...her resources. controlling resource access on the server access by untrusted scripts really needs to be under the control of the stake holder, which is the resource and server owner -- not the user -- to determine whether a resource should be insulated from web applications loaded from outside of the firewall. using a soap header for verification soap messages have a distinct processing model allowing a header to be added that the recipient is required to understand and accept, which identifies the untrusted source of a script making a request. soap services which have not been cleared for access by untrusted scripts will reject the requests. this is offered in the mozilla implementation of soap today. unfortunately, this does not prevent soap messages from being sent to non-soap addresses...
...And 7 more matches

Getting started with Vue - Learn web development
nderstand the basics of how it works. a clearer vue vue is a modern javascript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use vue to enhance existing html. this lets you use vue as a drop-in replacement for a library like jquery. that being said, you can also use vue to write entire single page applications (spas). this allows you to create markup managed entirely by vue, which can improve developer experience and performance when dealing with complex applications. it also allows you to take advantage of libraries for client-side routing and state management when you need to. additionally, vue takes a "middle ground" approach to tooling like client-side routing and state management. while the vue core team maintains s...
...like most frameworks, vue lets you create reusable blocks of markup via components. ...
...side routing and state management when you need to. additionally, vue takes a "middle ground" approach to tooling like client-side routing and state management. while the vue core team maintains suggested libraries for these functions, they are not directly bundled into vue. this allows you to select a different routing/state management library if they better fit your application. ...
...And 7 more matches

History Service Design
firefox bookmarks and history systems using storage. this system provides additional performance, flexibility, and querying capabilities over the old one, for both end users and extensions developers. view the service interface definition: nsinavhistoryservice.idl. objectives the primary objectives of the new history service implementation in places are: improve access to browsing history allow association of useful metadata with urls flexible query system for both end-users and add-ons developers clean architecture for ease of code reuse and maintainability the most known and visible feature of history are views. the user can query his visits based on a date range, meta contents or revisit behavior. this involves storing informations on all of the user's visits, including visit tim...
...toring informations on all of the user's visits, including visit time, type of visit and meta data. old history system was instead only storing first and last visit date, and a generic visits counter, creating some problem due to the impossibility to represent real history flow in a timeframe. history views must be organized and as concise as possible. ...
...ld history system was instead only storing first and last visit date, and a generic visits counter, creating some problem due to the impossibility to represent real history flow in a timeframe. history views must be organized and as concise as possible. each visit is associated with a favicon, to allow for better recognizability and groupable by common timeframes or domains. history views should allow to quickly find a page in a certain timeframe remembering only small details about it. ...
...And 7 more matches

nsIAccessibleRole
supported automatically by ms windows. role_menubar 2 represents the menu bar (positioned beneath the title bar of a window) from which menus are selected by the user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it. role_sound 5 represents a system sound, which is associated with various system events. role_cursor 6 represents the system mouse pointer. role_caret 7 represents the system caret. the role is supported for caret. role_alert ...
...like a button. it is used for xul:label@class="text-link", html:a, html:area, xforms:trigger@appearance="minimal". role_helpballoon 31 displays a help topic in the form of a tooltip or help balloon. role_character 32 represents a cartoon-like graphic object, such as microsoft office assistant, which is displayed to provide help to users of an application. role_list 33 represents a list box, allowing the user to select one or more items. it is used for xul:listbox, html:select@size, role="list". see also role_list_item. role_listitem 34 represents an item in a list. see also role_list. role_outline 35 represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches. is is used for role="tree". ...
...ints to the current item. role_graphic 40 represents a picture. is is used for xul:image, html:img. role_statictext 41 represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. is is used for xul:label, xul:description, html:label, role="label", or xforms:output. role_text_leaf 42 represents selectable text that allows edits or is designated read-only. role_pushbutton 43 represents a push button control. it is used for xul:button, html:button, role="button", xforms:trigger, xforms:submit. role_checkbutton 44 represents a check box control. it is used for xul:checkbox, html:input@type="checkbox", role="checkbox", boolean xforms:input. role_radiobutton 45 represents an option button, also called a radio bu...
...And 7 more matches

Using the Web Audio API - Web APIs
the web audio api does not replace the <audio> media element, but rather complements it, just like <canvas> coexists alongside the <img> element. your use case will determine what tools you use to implement audio. if you simply want to control playback of an audio track, the <audio> media element provides a better, quicker solution than the web audio api. ...
...control. a powerful feature of the web audio api is that it does not have a strict "sound call limitation". for example, there is no ceiling of 32 or 64 sound calls at one time. some processors may be capable of playing more than 1,000 simultaneous sounds without stuttering. example code our boombox looks like this: note the retro cassette deck with a play button, and vol and pan sliders to allow you to alter the volume and stereo panning. we could make this a lot more complex, but this is ideal for simple learning at this stage. check out the final demo here on codepen, or see the source code on github. browser support modern browsers have good support for most features of the web audio api. there are a lot of features of the api, so for more exact information, you'll have to check th...
...he web audio api. there are a lot of features of the api, so for more exact information, you'll have to check the browser compatibility tables at the bottom of each reference page. audio graphs everything within the web audio api is based around the concept of an audio graph, which is made up of nodes. the web audio api handles audio operations inside an audio context, and has been designed to allow modular routing. basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. you have input nodes, which are the source of the sounds you are manipulating, modification nodes that change those sounds as desired, and output nodes (destinations), which allow you to save or hear those sounds. several audio sources with different channel layouts a...
...And 7 more matches

Evolution of HTTP - HTTP
html file was send back with the description of the problem contained in it, for human consumption. http/1.0 – building extensibility http/0.9 was very limited and both browsers and servers quickly extended it to be more versatile: versioning information is now sent within each request (http/1.0 is appended to the get line) a status code line is also sent at the beginning of the response, allowing the browser itself to understand the success or failure of the request and to adapt its behavior in consequence (like in updating or using its local cache in a specific way) the notion of http headers has been introduced, both for the requests and the responses, allowing metadata to be transmitted and making the protocol extremely flexible and extensible. with the help of the new http header...
...er standardization was in progress. the first standardized version of http, http/1.1 was published in early 1997, only a few months after http/1.0. http/1.1 clarified ambiguities and introduced numerous improvements: a connection can be reused, saving the time to reopen it numerous times to display the resources embedded into the single original document retrieved. pipelining has been added, allowing to send a second request before the answer for the first one is fully transmitted, lowering the latency of the communication. chunked responses are now also supported. additional cache control mechanisms have been introduced. content negotiation, including language, encoding, or type, has been introduced, and allows a client and a server to agree on the most adequate content to exchange. t...
...ring the latency of the communication. chunked responses are now also supported. additional cache control mechanisms have been introduced. content negotiation, including language, encoding, or type, has been introduced, and allows a client and a server to agree on the most adequate content to exchange. thanks to the host header, the ability to host different domains at the same ip address now allows server colocation. a typical flow of requests, all through one single connection is now looking like this: get /docs/glossary/simple_header http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzi...
...And 7 more matches

CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the style-src policy: content-security-policy: style-src <source>; content-security-policy: style-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 7 more matches

An overview of HTTP - HTTP
it is the foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser. a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more. clients and servers communicate by exchanging individual messages (as opposed to a stream of data). the messages sent by the client, usually a web browser, are called requests and the messages sent by the server as an answer are called responses. designed in the early 1990s, http is an extensible protocol which has evolved over time. ...
...deos). the web browser then mixes these resources to present to the user a complete document, the web page. scripts executed by the browser can fetch more resources in later phases and the browser updates the web page accordingly. a web page is a hypertext document. this means some parts of displayed text are links which can be activated (usually by a click of the mouse) to fetch a new web page, allowing the user to direct their user-agent and navigate through the web. the browser translates these directions in http requests, and further interprets the http responses to present the user with a clear response. the web server on the opposite side of the communication channel, is the server, which serves the document as requested by the client. a server appears as only a single machine virtuall...
...se can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. proxies may perform numerous functions: caching (the cache can be public or private, like the browser cache) filtering (like an antivirus scan or parental controls) load balancing (to allow multiple servers to serve the different requests) authentication (to control access to different resources) logging (allowing the storage of historical information) basic aspects of http http is simple http is generally designed to be simple and human readable, even with the added complexity introduced in http/2 by encapsulating http messages into frames. http messages can be read and under...
...And 7 more matches

Styling lists - Learn web development
h for reference.</p> <ul> <li>hummus</li> <li>pita</li> <li>green salad</li> <li>halloumi</li> </ul> <h2>recipe (ordered) list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ol> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> <h2>ingredient description list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <dl> <dt>hummus</dt> <dd>a thick dip/sauce ge...
...d know about to start with, which can be set on <ul> or <ol> elements: list-style-type: sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list. list-style-position: sets whether the bullets appear inside the list items, or outside them before the start of each item. list-style-image: allows you to use a custom image for the bullet, rather than a simple square or circle. bullet styles as mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. in our example, we've set the ordered list to use uppercase roman numerals, with: ol { list-style-type: upper-roman; } this gives us the following look: you can find a lot more...
...ther the bullets appear inside the list items, or outside them before the start of each item. the default value is outside, which causes the bullets to sit outside the list items, as seen above. if you set the value to inside, the bullets will sit inside the lines: ol { list-style-type: upper-roman; list-style-position: inside; } using a custom bullet image the list-style-image property allows you to use a custom image for your bullet. the syntax is pretty simple: ul { list-style-image: url(star.svg); } however, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. you are better off using the background family of properties, which you've learned in the backgrounds and borders article. for now, here's a taster! in our finished example, we...
...And 6 more matches

Client-side storage - Learn web development
ajor modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting html to the client to be displayed by the user's browser. client-side storage works on similar principles, but has different uses. it consists of javascript apis that allow you to store data on the client (i.e. on the user's machine) and then retrieve it when needed. this has many distinct uses, such as: personalizing site preferences (e.g. showing a user's choice of custom widgets, color scheme, or font size). persisting previous site activity (e.g. storing the contents of a shopping cart from a previous session, remembering if a user was previously logged in).
...contained within two object-like structures inside the browser: sessionstorage and localstorage. the first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. we'll use the second one in this article as it is generally more useful. the storage.setitem() method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. try typing this into your javascript console (change the value to your own name, if you wish!): localstorage.setitem('name','chris'); the storage.getitem() method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. now type these lines i...
...(say google.com and amazon.com) and try storing an item on one website, it won't be available to the other website. this makes sense — you can imagine the security issues that would arise if websites could see each other's data! a more involved example let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. our example will allow you enter a name, after which the page will update to give you a personalized greeting. this state will also persist across page/browser reloads, because the name is stored in web storage. you can find the example html at personal-greeting.html — this contains a simple website with a header, content, and footer, and a form for entering your name. let's build up the example, so you can under...
...And 6 more matches

Introduction to the server side - Learn web development
ver-side programming is, what it can do, and how it differs from client-side programming. most large-scale websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g. html and javascript). ...
...all of these capabilities enable much deeper engagement with users. in the modern world of web development, learning about server-side development is highly recommended. ...
...trast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an http server is really hard to do from scratch in say python, but python web frameworks like django provide one out of the box, along with other very useful tools. what can you do on the server-side? server-side programming is very useful because it allows us to efficiently deliver information tailored for individual users and thereby create a much better user experience. companies like amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc. banks use server-side programming to store account information and all...
...And 6 more matches

Server-side web frameworks - Learn web development
iscusses some of the functionality that is often provided by web frameworks (not every framework will necessarily provide all of these features!). work directly with http requests and responses as we saw in the last article, web servers and browsers communicate via the http protocol — servers wait for http requests from the browser and then return information in http responses. web frameworks allow you to write simplified syntax that will generate server-side code to work with these requests and responses. this means that you will have an easier job, interacting with easier, higher-level code rather than lower level networking primitives. the example below shows how this works in the django (python) web framework. every "view" function (a request handler) receives an httprequest object con...
...s to store information both to be shared with users, and about users. web frameworks often provide a database layer that abstracts database read, write, query, and delete operations. this abstraction layer is referred to as an object-relational mapper (orm). using an orm has two benefits: you can replace the underlying database without necessarily needing to change the code that uses it. this allows developers to optimize for the characteristics of different databases based on their usage. basic validation of data can be implemented within the framework. this makes it easier and safer to check that data is stored in the correct type of database field, has the correct format (e.g. an email address), and isn't malicious in any way (crackers can use certain patterns of code to do bad things s...
...n any way (crackers can use certain patterns of code to do bad things such as deleting database records). for example, the django web framework provides an orm, and refers to the object used to define the structure of a record as the model. the model specifies the field types to be stored, which may provide field-level validation on what information can be stored (e.g. an email field would only allow valid email addresses). the field definitions may also specify their maximum size, default values, selection list options, help text for documentation, label text for forms etc. the model doesn't state any information about the underlying database as that is a configuration setting that may be changed separately of our code. the first code snippet below shows a very simple django model for a tea...
...And 6 more matches

TypeScript support in Svelte - Learn web development
objective: learn how to configure and use typescript when developing svelte applications. note that our application is fully functional and porting it to typescript is completely optional. there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using typescript. even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own decision. if you are not interested at all in typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte...
...ey it is the third most loved language, right behind rust and python. so typescript is going through a great phase of adoption. typescript's main advantages are: early spotted bugs: the compiler checks types at compile time and provides error reporting. readability: static typing gives the code more structure, making it self-documenting and more readable. rich ide support: type information allows code editors and ides to offer features like code navigation, autocompletion, and smarter hints. safer refactoring: types allows ides to know more about your code, and assist you while refactoring large portions of your code base. type inference: enables you to take advantage of many typescript features even without declaring variable types. availability of new and future javascript features:...
... typescript also has some disadvantages: not true static typing: types are only checked at compile time, and they are removed from the generated code. ...
...And 6 more matches

Componentizing our Svelte app - Learn web development
previous overview: client-side javascript frameworks next in the last article we started developing our todo list app. the central objective of this article is to look at how to break our app into manageable components and share information between them. we'll componentize our app, then add more functionality to allow users to update existing components. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: to learn how to break our app into components and share information among them. code along with us git clone the github repo...
...y do one thing. if it ends up growing, it should be split into smaller subcomponents. both approaches should complement each other, and help you decide how to better organize your components. eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred. newtodo.svelte: the text input and button that allow you to enter a new todo item. filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo items. todosstatus.svelte: the "x out of y items completed" heading. todo.svelte: an individual todo item. each visible todo item will be displayed in a separate copy of this component. moreactions.svelte: the check all and remove completed buttons at...
... in this article we will concentrate on creating the filterbutton and todo components; we'll get to the others in future articles. let's get started. ...
...And 6 more matches

Working with Svelte stores - Learn web development
using stores we will create an alert component that shows notifications on screen, which can receive messages from any component. in this case, the alert component is independent from the rest — it is not a parent or child of any other — so the messages don't fit into the component hierarchy. we will also see how to develop our own custom store to persist the todo information to web storage, allowing our todos to persist over page reloads. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm r...
...ent hierarchy gets complex, it might become too difficult for components to relay data between each other. in that case, moving to a global data store might be a good option. if you’ve already worked with redux or vuex, then you'll be familiar with how this kind of store works. svelte stores offer similar features for state management. a store is simply an object with a subscribe() method that allows interested parties to be notified whenever the store value changes, and an optional set() method that allows you to set new values for the store. this minimal api is known as the store contract. svelte provides functions for creating readable, writable, and derived stores in the svelte/store module. svelte also provides a very intuitive way to integrate stores into its reactivity system using ...
...method also returns a clean-up function, which takes care of releasing the subscription. so we subscribe when the component is being initialized, and use ondestroy to unsubscribe when the component is unmounted. finally we use the alertcontent variable in our markup, and if the user clicks on the alert we clean it. at the end we include a few css lines to style our alert component. this setup allows us to work with stores in a reactive way. when the value of the store changes, the callback is executed. there we assign a new value to a local variable, and thanks to svelte reactivity all our markup and reactive dependencies are updated accordingly. using the component let's now use our component. in app.svelte we'll import the component; add the following import statement below the ex...
...And 6 more matches

Mozilla’s UAAG evaluation report
: not rated na: not applicable document under construction guideline 1. support input and output device-independence. checkpoint title status notes/plans 1.1 full keyboard access. (p1) vg we have some remaining bugs, and some keyboard usability issues, but in general mozilla now has keyboard equivalents for almost everything. most browsers do not allow the user to select text with the keyboard alone. we intend to do this with a caret browsing feature. 1.2 activate event handlers. (p1) p onmouseover, onmousedown, onmouseup, onmousemove, onclick, ondbclick: no keyboard support onfocus and onblur: cannot be activated with pointer 1.3 provide text messages. (p1) c status line and alert boxes used to convey messages...
...ent: supported abbr element: supported abbr attribute for td/th: not supported summary for table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.4 allow time-independent interaction. (p1) nr need to look into this 2.5 make captions, transcripts available. (p1) na this relates to multimedia players 2.6 respect synchronization cues. (p1) na this relates to multimedia players 2.7 repair missing content. (p2) p no alt repair strategies in place. reasons: the title attribute is almost never presen...
... title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.10 toggle placeholders. (p3) ni 2.11 alert unsupported language. (p3) nr ? guideline 3. allow configuration not to render some content that may reduce accessibility. checkpoint title status notes/plans 3.1 toggle background images. (p1) c preferences, appearance, colors - "use my chosen colors, ignoring the colors and background image specified" 3.2 toggle audio, video, animated images. (p1) p animated images can be made still with the escap...
...And 6 more matches

NSS environment variables
type description introduced in version nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. 3.12.3 nsrandfile string (file name) uses this file to seed the pseudo random number generator. before 3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 inside signatures. this was allowed by default before nss 3.12.3. 3.12.3 nss_debug_pkcs11_module string (module name) name the pkcs#11 module to be traced. pkcs #11 module logger 3.6 nss_default_db_type string ("dbm", "sql", or "extern") determines the d...
...ctivities of the nss cryptographic module in fips mode. audit data 3.11.2 nss_enable_pkix_verify boolean (any non-empty value to enable) use libpkix, rather than the old cert library, to verify certificates. 3.12 nss_fips string ("fips","true","on","1") will start nss in fips mode. 3.12.5 nss_hash_alg_support string specifies agorithms allowed to be used in certain applications, such as in signatures on certificates and crls. see documentation at this link. 3.12.3 nss_output_file string (filename) output file path name for the pkcs #11 module logger. default is stdout. 3.7 nss_sdb_use_cache string ("no","yes","auto") controls whether nss uses a local cache of sql database contents. default ...
... beast attack on ssl 3.0 and tls 1.0. "0" disables it, "1" enables it. it is also known as 1/n-1 record splitting. default is "1". ...
...And 6 more matches

Gecko Roles
y microsoft windows. role_menubar represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on mac os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it role_sound represents a system sound, which is associated with various system events. role_cursor represents the system mouse pointer. role_caret represents the system caret. role_alert represents an al...
...sents a link to something else. this object might look like text or a graphic, but it acts like a button. role_helpballoon displays a help topic in the form of a tooltip or help balloon. role_character represents a cartoon-like graphic object, such as microsoft office assistant, which is displayed to provide help to users of an application. role_list represents a list box, allowing the user to select one or more items. role_listitem represents an item in a list. role_outline represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches. role_outlineitem represents an item in an outline or tree structure. role_pagetab represents a page tab, it is a...
... represents a property sheet. role_indicator represents an indicator, such as a pointer graphic, that points to the current item. role_graphic represents a picture. role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. role_text_leaf represents selectable text that allows edits or is designated read-only. role_pushbutton represents a push button control. role_checkbutton represents a check box control. role_radiobutton represents an option button, also called a radio button. it is one of a group of mutually exclusive options. all objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive gr...
...And 6 more matches

An Overview of XPCOM
n to the basic concepts and technologies in xpcom and component development. the brief sections in this chapter introduce the concepts at a very high level, so that we can discuss and use them with more familiarity in the tutorial itself, which describes the creation of a mozilla component called weblock. ...
... more familiarity in the tutorial itself, which describes the creation of a mozilla component called weblock. the xpcom solution the cross platform component object module (xpcom) is a framework which allows developers to break up monolithic software projects into smaller modularized pieces. these pieces, known as components, are then assembled back together at runtime. the goal of xpcom is to allow different pieces of software to be developed and built independently of one another. in order to allow interoperability between components within an application, xpcom separates the implementation of a component from the interface, which we discuss in interfaces. but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help th...
...ating web browsers and other applications. xpcom is the means of accessing gecko library functionality and embedding or extending gecko. this book focuses on the latter - extending gecko - but the fundamental ideas in the book will be important to developers embedding gecko as well. gecko is used in many internet applications, mostly browsers and most notably mozilla firefox. components xpcom allows you to break up large software projects into smaller pieces known as components. they are usually contained in reusable binary libraries (a dll on windows, for example, or a dso on unix), which can include one or more components. when two or more related components are grouped together in a binary library, the library is referred to as a module. modular, component-based programming makes softwa...
...And 6 more matches

nsIHttpChannel
netwerk/protocol/http/nsihttpchannel.idlscriptable this interface allows for the modification of http request parameters and the inspection of the resulting http response status and headers when they become available. inherits from: nsichannel last changed in gecko 1.3 to create an http channel, use nsiioservice with a http uri, for example: var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var ch = ios.newchannel("https://www.example.com/", null, null); method overview void getoriginalresponseheader(in acstring aheader, in nsihttpheadervisitor avisitor); acstring getrequestheader(in acstring aheader); acstring getresponseheader(in acstring header); bool...
...this should be set to false, for example, if the application knows that the corresponding document is likely to be very large. this attribute is true by default, though other factors may prevent pipelining. ...
...he default; only send the origin of the referring uri for cross-origin requests referrer_policy_unsafe_url always send the referrer, even when downgrading from https to http attributes attribute type description allowpipelining boolean this attribute is a hint to the channel to indicate whether or not the underlying http transaction should be allowed to be pipelined with other transactions. this should be set to false, for example, if the application knows that the corresponding document is likely to be very large. this attribute is true by default, though other factors may prevent pipelining. this attribute may only be set before the channel is opened. exceptions thrown ns_error_failure if set after the channe...
...And 6 more matches

nsIParserUtils
note: if -moz-binding is absent, properties that might be xss risks in other web engines are preserved! sanitizercidembedsonly (1 << 2) flag fo...
... 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. ...
...rapcol); 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. sanitizerallowstyle (1 << 1) flag for sanitizer: allow <style> elements and style attributes (with contents sanitized in case of -moz-binding). note: if -moz-binding is absent, properties that might be xss risks in other web engines are preserved! sanitizercidembedsonly (1 << 2) flag for sanitizer: only allow cid: urls for embedded content. at present, sanitizing css ba...
...And 6 more matches

Using Service Workers - Web APIs
will provide a terrible user experience if you can’t download it. there have been various attempts to create technologies to solve this problem, and some of the issues have been solved. but the overriding problem is that there still isn’t a good overall control mechanism for asset caching and custom network requests. the previous attempt — appcache — seemed to be a good idea because it allowed you to specify assets to cache really easily. however, it made many assumptions about what you were trying to do and then broke horribly when your app didn’t follow those assumptions exactly. read jake archibald's (unfortunately-titled but well-written) application cache is a douchebag for more details. note: as of firefox 44, when appcache is used to provide offline support for a page a wa...
...s used to provide offline support for a page a warning message is now displayed in the console advising developers to use service workers instead (bug 1204581.) service workers should finally fix these issues. service worker syntax is more complex than that of appcache, but the trade off is that you can use javascript to control your appcache-implied behaviors with a fine degree of granularity, allowing you to handle this problem and many more. using a service worker you can easily set an app up to use cached assets first, thus providing a default experience even when offline, before then getting more data from the network (commonly known as offline first). this is already available with native apps, which is one of the main reasons native apps are often chosen over web apps. setting up to p...
... control their loading. a single service worker can control many pages. each time a page within your scope is loaded, the service worker is installed against that page and operates on it. bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker. note: your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more. note: one great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. furthermore, if you use appcache and sw on a page, browsers that don’t support sw but...
...And 6 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
o api was built to be built upon. if you are about to embark on building something more complex, tone.js would be a good place to start. however, we want to demonstrate how to build such a demo from first principles, as a learning exercise. note: you can find the source code on github as step-sequencer; see the step-sequencer running live also. the interface consists of master controls, which allow us to play/stop the sequencer, and adjust the bpm (beats per minute) to speed up or slow down the "music". there are four different sounds, or voices, which can be played. each voice has four buttons, which represent four beats in one bar of music. when they are enabled the note will sound. when the instrument plays, it will move across this set of beats and loop the bar. each voice also has lo...
... sequencer, and adjust the bpm (beats per minute) to speed up or slow down the "music". there are four different sounds, or voices, which can be played. each voice has four buttons, which represent four beats in one bar of music. when they are enabled the note will sound. when the instrument plays, it will move across this set of beats and loop the bar. each voice also has local controls, which allow you to manipulate the effects or parameters particular to each technique we are using to create those voices. the techniques we are using are: name of voice technique associated web audio api feature "sweep" oscillator, periodic wave oscillatornode, periodicwave "pulse" multiple oscillators oscillatornode "noise" random noise buffer, b...
....frequency.value = 440; osc.connect(audioctx.destination); osc.start(); osc.stop(audioctx.currenttime + 1); } controlling amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...And 6 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
ers so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts. responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial). supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats. a complete guide to image formats supported by web browsers is available.
...d "tainted". if the crossorigin attribute is not specified, then a non-cors request is sent (without the origin request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> elements. ...
...t the origin request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> elements. ...
...And 6 more matches

Content Security Policy (CSP) - HTTP
the source of the content, even when it's not coming from where it seems to be coming from. csp makes it possible for server administrators to reduce or eliminate the vectors by which xss can occur by specifying the domains that the browser should consider to be valid sources of executable scripts. ...
...tors by which xss can occur by specifying the domains that the browser should consider to be valid sources of executable scripts. a csp compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling html attributes). as an ultimate form of protection, sites that want to never allow scripts to be executed can opt to globally disallow script execution. mitigating packet sniffing attacks in addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used; for example (and ideally, from a security standpoint), a server can specify that all content must be loaded using https. a complete data transmission securi...
...bute and providing automatic redirects from http pages to their https counterparts. sites may also use the strict-transport-security http header to ensure that browsers connect to them only over an encrypted channel. using csp configuring content security policy involves adding the content-security-policy http header to a web page and giving it values to control what resources the user agent is allowed to load for that page. for example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint. a properly designed content security policy helps protect a page against a cross site scripting attack. this article explains how to construct such headers properly, and provides examples. specifying your policy you can use the conten...
...And 6 more matches

Feature Policy - HTTP
feature policy allows web developers to selectively enable, disable, and modify the behavior of certain features and apis in the browser. it is similar to content security policy but controls features instead of security behavior. the feature-policy header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change. in a nutshell feature policy provides a mechanism to explicitly declare what functionality is used (or not used), throughout your website. this allows you to lock in best practices, even as the codebase evolves over time — as well as to more safely compose third-party content — by limiting which features are available. with feature policy, you opt-in to a set of "policies" for the browser to enforce on specifi...
...policies" for the browser to enforce on specific features used throughout a website. these policies restrict what apis the site can access or modify the browser's default behavior for certain features. examples of what you can do with feature policy: change the default behavior of autoplay on mobile and third party videos. restrict a site from using sensitive apis like camera or microphone. ...
...an do with feature policy: change the default behavior of autoplay on mobile and third party videos. restrict a site from using sensitive apis like camera or microphone. allow iframes to use the fullscreen api. block the use of outdated apis like synchronous xhr and document.write(). ensure images are sized properly and are not too big for the viewport. concepts and usage feature policy allows you to control which origins can use which features, both in the top-level page and in embedded frames. essentially, you write a policy, which is an allowed list of origins for each feature. for every feature controlled by feature policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins. for each policy-controlled feature, the browse...
...And 6 more matches

Feature-Policy: geolocation - HTTP
the http feature-policy header geolocation directive controls whether the current document is allowed to use the geolocation interface. when this policy is enabled, calls to getcurrentposition() and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied. by default, the geolocation api can be used within top-level documents and their same-origin child frames. this directive allows or prevents cross-origin frames from accessing geolocation. this includes same-origin frames. ...
...currentposition() and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied. by default, the geolocation api can be used within top-level documents and their same-origin child frames. this directive allows or prevents cross-origin frames from accessing geolocation. this includes same-origin frames. ...
...) and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied. by default, the geolocation api can be used within top-level documents and their same-origin child frames. this directive allows or prevents cross-origin frames from accessing geolocation. this includes same-origin frames. ...
...And 6 more matches

OPTIONS - HTTP
the http options method requests permitted communication options for a given url or server. a client can specify a url with this method, or an asterisk (*) to refer to the entire server. ...
...ns for a given url or server. a client can specify a url with this method, or an asterisk (*) to refer to the entire server. ...
...in this example, we will request permission fo...
...And 6 more matches

A re-introduction to JavaScript (JS tutorial) - JavaScript
e character is represented by either 1 or 2 code units. if you want to represent a single character, you just use a string consisting of that single character. ...
...and "false values," meaning values that become true and false, respectively, when converted to booleans. alternatively, such values can be called "truthy" and "falsy", respectively. boolean operations such as && (logical and), || (logical or), and ! (logical not) are supported; see below. variables new variables in javascript are declared using one of three keywords: let, const, or var. let allows you to declare block-level variables. the declared variable is available from the block it is enclosed in. let a; let name = 'simon'; the following is an example of scope with a variable declared with let: // myletvariable is *not* visible out here for (let myletvariable = 0; myletvariable < 5; myletvariable++) { // myletvariable is only visible in here } // myletvariable is *not* visibl...
...ck-level variables. the declared variable is available from the block it is enclosed in. let a; let name = 'simon'; the following is an example of scope with a variable declared with let: // myletvariable is *not* visible out here for (let myletvariable = 0; myletvariable < 5; myletvariable++) { // myletvariable is only visible in here } // myletvariable is *not* visible out here const allows you to declare variables whose values are never intended to change. the variable is available from the block it is declared in. const pi = 3.14; // variable pi is set pi = 1; // will throw an error because you cannot change a constant variable. var is the most common declarative keyword. it does not have the restrictions that the other two keywords have. this is because it was traditionally ...
...And 6 more matches

Modules - Archive of obsolete content
function loadscript(url) { loader.loadsubscript(url); } when a script is loaded, it is evaluated in the scope of the global object of the script that loaded it. any property defined on the global object will be accessible from both scripts: // index.js: loadscript("www.foo.com/a.js"); foo; // => 3 // a.js: foo = 3; exporting names the script loader we obtained from the components object allows us load scripts from other locations, but its api is rather limited. for instance, it does not know how to handle relative urls, which is cumbersome if you want to organize your project hierarchically. a more serious problem with the loadscript function, however, is that it evaluates all scripts in the scope of the same global object. this becomes a problem when two scripts try to define the sam...
....js", since it is overwritten by "b.js". to prevent scripts from interfering with each other, loadscript should evaluate each script to be loaded in the scope of their own global object, and then return the global object as its result. in effect, any properties defined by the script being loaded on its global object are exported to the loading script. the script loader we obtained from components allows us to do just that: function loadscript(url) { let global = {}; loader.loadsubscript(url, global); return global; } if present, the loadsubscript function evaluates the script to be loaded in the scope of the second argument. using this new version of loadscript, we can now rewrite our earlier example as follows: // index.js: let a = loadscript("www.foo.com/a.js"); let b = loadscr...
...the...
...And 5 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks. ...
...eavesdropping, tampering, and impersonation attacks. encryption and decryption allow two communicating parties to disguise information they send to each other. the sender encrypts, or scrambles, information before sending it. the receiver decrypts, or unscrambles, the information after receiving it. while in transit, the encrypted information is unintelligible to an intruder. tamper detection allows the recipient of information to verify that it has not been modified in transit. any attempt to modify data or substitute a false message for a legitimate one will be detected. authentication allows the recipient of information to determine its origin-that is, to confirm the sender's identity. nonrepudiation prevents the sender of information from claiming at a later date that the information ...
...responding private key possessed by the entity identified by the certificate. in addition to a public key, a certificate always includes the name of the entity it identifies, an expiration date, the name of the ca that issued the certificate, a serial number, and other information. most importantly, a certificate always includes the digital signature of the issuing ca. the ca's digital signature allows the certificate to function as a "letter of introduction" for users who know and trust the ca but don't know the entity identified by the certificate. for more information about the role of cas, see "how ca certificates are used to establish trust". authentication confirms an identity authentication is the process of confirming an identity. in the context of network interactions, authenticati...
...And 5 more matches

CSS and JavaScript accessibility best practices - Learn web development
or they can significantly harm accessibility if misused. this article outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and understanding of what accessibility is. objective: to gain familiarity with using css and javascript appropriately in your web documents to maximise accessibility and not detract from it. ...
...on</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 the style can cause confusion. for more on emphasis, see emphasis and importance. abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this. for more on a...
...fox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls. form elements elements to allow users to input data into websites: <div> <label for="name">enter your name</label> <input type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also). most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy. you shouldn't however deviate too m...
...And 5 more matches

Making decisions in your code — conditionals - Learn web development
ive: to understand how to use conditional structures in javascript. ...
... and work out what is going on if you use the curly braces to delimit the blocks of code, and use multiple lines and indentation. a real example to understand this syntax better, let's consider a real example. imagine a child being asked for help with a chore by their mother or father. the parent might say "hey sweetheart! if you help me by going and doing the shopping, i'll give you some extra allowance so you can afford that toy you wanted." in javascript, we could represent this like so: let shoppingdone = false; if (shoppingdone === true) { let childsallowance = 10; } else { let childsallowance = 5; } this code as shown always results in the shoppingdone variable returning false, meaning disappointment for our poor child. it'd be up to us to provide a mechanism for the parent to se...
... in the javascript, we are storing a reference to both the <select> and <p> elements, and adding an event listener to the <select> element so that when its value is changed, the setweather() function is run. when this function is run, we first set a variable called choice to the current value selected in the <select> element. we th...
...And 5 more matches

What is JavaScript? - Learn web development
is it?" and "what can you do with it?", and making sure you are comfortable with javascript's purpose. prerequisites: basic computer literacy, a basic understanding of html and css. objective: to gain familiarity with what javascript is, what it can do, and how it fits into a web site. a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc. — you can bet that javascript is probably involved. it is the third layer of the layer cake of standard web technologies, two of ...
...xtcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)! javascript can do a lot more than that — let's explore what in more detail. so what can it really do? the core client-side javascript language consists of some common programming features that allow you to do things like: store useful values inside variables. in the above example for instance, we ask for a new name to be entered then store that name in a variable called name. operations on pieces of text (known as "strings" in programming). in the above example we take the string "player 1: " and join it to the name variable to create the complete text label, e.g. ''player 1: chris". ru...
...mple above to detect when the button is clicked and then run the code that updates the text label. and much more! what is even more exciting however is the functionality built on top of the client-side javascript language. so-called application programming interfaces (apis) provide you with extra superpowers to use in your javascript code. apis are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find...
...And 5 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
e'll utilize some techniques for accessing dom nodes and executing methods like focus() and select(). we will also see how to declare and clean-up event listeners on dom elements. we also need to learn a bit about component lifecycle, to understand when these dom nodes get mounted and and unmounted from the dom and how we can access them. we will also learn about the action directive, which will allow us to extend the functionality of html elements in a reusable and declarative way. finally, we will learn a bit more about components. so far, we've seen how components can share data using props, and communicate with their parents using events and two-way data binding. now we will see how components can also expose methods and variables. the following new components will be developed throughou...
...is happening, we need to understand how reactivity works in svelte when updating arrays and objects. many web frameworks use the virtual dom technique to update the page. basically, the virtual dom is an in-memory copy of the contents of the web page. the framework updates this virtual representation which is then synced with the "real" dom. this is much faster than directly updating the dom and allows the framework to apply many optimization techniques. these frameworks, by default, basically re-run all our javascript on every change against this virtual dom, and apply different methods to cache expensive calculations and optimize execution. they make little to no attempt to understand what our javascript code is doing. svelte doesn't use a virtual dom representation. instead, it parses and...
...e we are using the map() method, which returns a new array with the results of executing the provided function for each item. the function returns a copy of each todo using spread syntax and overwrites the property of the completed value accordingly. this solution has the added benefit of returning a new array with new objects, completely avoiding mutating the original todos array. note: svelte allows us to specify different options that affect how the compiler works. the <svelte:options immutable={true}/> option tells the compiler that you promise not to mutate any objects. this allows it to be less conservative about checking whether values have changed and generate simpler and more performant code. for more information on <svelte:options...>, check the svelte options documentation. all o...
...And 5 more matches

Handling common JavaScript problems - Learn web development
script code using a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more relaxed in their error/warning reporting. the javascript/ecmascript linters we'd recommend are jshint and eslint; these can be used in a variety of ways, some of which we'll detail below. online the jshint homepage provides an online linter, which allows you to enter your javascript code on the left and provides an output on the right, including metrics, warnings, and errors. code editor plugins it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. what you really want is a linter that will fit into your standard workflow with the minimum of hassle. many code editors have linter...
...s/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails. the console api you may already know what is wrong with this code, but let's explore it some more to show how you could investigate this. for a start, there is a console api that allows javascript code to interact with the browser's javascript console. it has a number of features available, but the main one you'll use often is console.log(), which prints a custom message to the console. try inserting the following line just below line 31 (bolded above): console.log('response value: ' + superheroes); refresh the page in the browser, and you will get an output in the console o...
...h also has other advantages (see arrow functions). for a quick example, see arrow-function.html (see the source code also). arrow functions are supported across all modern browsers, except for ie and safari. declaring strict mode at the top of your javascript code causes it to be parsed with a stricter set of rules, meaning that more warnings and errors will be thrown, and some things will be disallowed that would otherwise be acceptable. it is arguably a good idea to use strict mode, as it makes for better, more efficient code, however it has limited/patchy support across browsers (see strict mode in browsers). typed arrays allow javascript code to access and manipulate raw binary data, which is necessary as browser apis for example start to manipulate streams of raw video and audio data. th...
...And 5 more matches

Overview of Mozilla embedding APIs
of xpcom components. at the heart of xpcom's implementation is the service manager and the component manager. together, these two services provide a centralized point for gaining access to all of the public mozilla interfaces. the service manager exposes all of the available xpcom services - each service represents a global object which provides some piece of functionality. the component manager allows new instances of registered xpcom components to be instantiated. the embedding layer consists of several components built on top of xpcom and its services. much of the gecko functionality is exposed through a component called the nswebbrowser. embedding applications can leverage this component to easily access many of gecko's features. each webbrowser instance represents the "client-area" of a ...
...mbedding layer consists of several components built on top of xpcom and its services. much of the gecko functionality is exposed through a component called the nswebbrowser. embedding applications can leverage this component to easily access many of gecko's features. each webbrowser instance represents the "client-area" of a typical browser window. the webbrowser exposes a set of interfaces which allow the embedding application to control activity and respond to changes within this client area. using these interfaces an embedding application can build up its own user interface around a webbrowser instance. public classes the following utility classes are available from the xpcom dll. they provide some basic functionality which should be leveraged when building new xpcom components. nscomptr...
...eve the requested interface. do_queryreferent this function is the equivilent of do_queryinterface except that it performs the qi through a weak reference. do_getservice this function simplifies accessing services from the service manager. do_createinstance this function simplifies creating new component instances. nscomtypeinfo<interface-type>::getiid() this template helper class allows easy access to an interface's nsiid. typically the ns_get_iid(...) macro is used instead of using the nscomtypeinfo template directly. ns_getweakreference this function creates a weak reference to a component which implements the nsiweakreference interface. global services nsservicemanager the service manager is the central repository for accessing instances of the various xpcom services. ea...
...And 5 more matches

Mozilla
ework. accessibility and mozilla accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. mozilla strives to make its software accessible; the documents below cover the ways in which we do so. add-ons add-ons allow developers to extend and modify the functionality of firefox. adding a new css property this page describes how to add a new css property to the style system. the style system is the part of the code in gecko that is responsible for producing a computed value for every property for every element. see the gecko overview for more information about the ...
... benchmarking debug builds (--enable-debug) and non-optimized builds (--disable-optimize) are much slower. any performance metrics gathered by such builds are largely unrelated to what would be found in a release browser. browser chrome tests the browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser window and report results using the same functions as the mochitest test framework. as all tests, they won't work in a build with tests disabled (--disable-tests). browser security an importa...
...to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics. firefox operational information database: sqlite a large amount of operational information about websites visited and browser configuration is stored in relational databases in sqlite used by firefox. the sqlite manager add-on allows convenient browsing of this information. (install the sqlite mangager add-on, click tools -> sqlite manager. in the manager, select the database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) ge...
...And 5 more matches

SVGTransformList - Web APIs
numberofitems unsigned long the number of items in the list. length unsigned long the number of items in the list. methods name & arguments return description clear() void clears all existing current items from the list, with the result being an empty list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgtransform newitem) svgtransform clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before...
...urrent items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgtransform returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: ...
... to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgtransform returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgtransform newitem, in unsigned long index) svgtransform inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into...
...And 5 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
dependencies while we will not rely upon any 3d graphics frameworks such as three.js or the like for this example, we do use the glmatrix library for matrix math, which we've used in other examples in the past. this example also imports the webxr polyfill maintained by the immersive web working group, which is the team responsible for the webxr api's specification. by importing this polyfill, we allow the example to work on many browsers that don't yet have webxr implementations in place, and we smooth out any transient deviations from the specification that occur during these still somewhat experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. the code looks like th...
...n that occur during these still somewhat experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. the code looks like this: const xrotationdegreespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second. yrotationdegreespersecond the number of degrees to rotate around the y axis each second. zrotationdegrees...
...se_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second. yrotationdegreespersecond the number of degrees to rotate around the y axis each second. zrotationdegreespersecond the number of degrees per second to rotate around the z axis. enablerotation a boolean indicating whether or not to enable the rotation of the cube at all. allowmouserotation if true, you can use the mouse to pitch and yaw the view angle. allowkeyboardmotion if true, the w, a, s, and d keys move the viewer forward, left, backward, and to the right, while the up and down arrow keys move up and down. if false, only xr device changes to the view are permitted. enableforcepolyfill if this boolean is true, the example will attempt to use the webxr polyfil...
...And 5 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
. third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to track what's happening inside mozilla. they need to know about focus changes and other events, and it needs to know what objects are contained in the current document or dialog box. ...
...finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. ...
...able to let the user know where there caret has moved to in most programs, because so many applications do not use the system caret (gecko does not). this is so commonly done, that no one even bothers to support the msaa caret, after all the hack is general solution works with pretty much all applications. msaa provides information in several different ways: a com interface (iaccessible) that allows applications to expose the tree of data nodes that make up each window in the user interface currently being interacted with and custom interface extensions via interfaces via queryinterface and queryservice. this can provide assistive technology with contextual information specific to your object model. for example, gecko support isimpledomnode to provide information about the dom node for an ...
...And 5 more matches

HTML attribute reference - HTML: Hypertext Markup Language
accesskey global attribute keyboard shortcut to activate or add focus to the element. action <form> the uri of a program that processes the information submitted via the form. align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element. allow <iframe> specifies a feature-policy for the iframe. alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed. async <script> executes the script asynchronously. autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <...
...the element. decoding <img> indicates the preferred method to decode the image. default <track> indicates that the track should be enabled unless the user's preferences indicate something different. defer <script> indicates that the script should be executed after the page has been parsed. dir global attribute defines the text direction. allowed values are ltr (left-to-right) or rtl (right-to-left) dirname <input>, <textarea> disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> indicates whether the user can interact with the element. download <a>, <area> indicates that the hyperlink is to be used for downloading a resource. dragga...
...command> specifies a picture which represents the command. id global attribute often used with css to style a specific element. the value of this attribute must be unique. importance <iframe>, <img>, <link>, <script> indicates the relative fetch priority for the resource. integrity <link>, <script> specifies a subresource integrity value that allows browsers to verify what they fetch. intrinsicsize <img> this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. inputmode <textarea>, contenteditable provides a hint as to the type of data that might be entered by the user while editing the element or its contents. the attribute ...
...And 5 more matches

CORS errors - HTTP
cross-origin resource sharing (cors) is a standard that allows a server to relax the same-origin policy. this is used to explicitly allow some cross-origin requests while rejecting others. for example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. setting up such a cors configuration isn't necessarily easy and may present some challenges. in these pages, we'll look into some common cors error messages and how to resolve them. if the cors configuration isn't setup correctly, the browser console will present an error like "cross-origin request blocked: the same origin policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the cors security rules. this might not necessarily be a set-up mista...
...however, if the endpoint is meant to be available, some debugging is needed to succeed. ...
... these steps may help you do so: navigate to the web site or web app in question and open the developer tools. now try to reproduce the failing transaction and check the console if you are seeing a cors violation error message. it will probably look like this: the text of the error message will be something similar to the following: cross-origin request blocked: the same origin policy disallows reading the remote resource at https://some-url-here. (reason: additional information here). note: for security reasons, specifics about what went wrong with a cors request are not available to javascript code. all the code knows is that an error occurred. the only way to determine what specifically went wrong is to look at the browser's console for details. cors error messages firefox's co...
...And 5 more matches

CSP: base-uri - HTTP
the http content-security-policy base-uri directive restricts the urls which can be used in a document's <base> element. if this value is absent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. csp version 2 directive type document directive default-src fallback no. not setting this allows any url. ...
...directive restricts the urls which can be used in a document's <base> element. if this value is absent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. csp version 2 directive type document directive default-src fallback no. not setting this allows any url. ...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...And 5 more matches

CSP: sandbox - HTTP
pts, and enforcing a same-origin policy. csp version 1.1 / 2 directive type document directive this directive is not supported in the <meta> element or by the content-security-policy-report-only header field. ...
... csp version 1.1 / 2 directive type document directive this directive is not supported in the <meta> element or by the content-security-policy-report-only header field. ...
...directive this directive is not supported in the <meta> element or by the content-security-policy-report-only header field. syntax content-security-policy: sandbox; content-security-policy: sandbox <value>; where <value> can optionally be one of the following values: allow-downloads-without-user-activation allows for downloads to occur without a gesture from the user. allow-forms allows the page to submit forms. if this keyword is not used, this operation is not allowed. ...
...And 5 more matches

Codecs used by WebRTC - Web media technologies
pport this mechanism, however, so you have to be prepared to receive media at a different resolution than you requested. beyond this simple maximum resolution request, specific codecs may offer further ways to ask for specific media configurations. supported video codecs webrtc establishes a baseline set of codecs which all compliant browsers are required to support. some browsers may choose to allow other codecs as well. below are the video codecs which are required in any fully webrtc-compliant browser, as well as the profiles which are required and the browsers which actually meet the requirement. mandatory video codecs codec name profile(s) browser compatibility vp8 — chrome, edge, firefox, safari (12.1+) avc / h.264 constrained baseline ...
...s for controlling optional values. in order to improve reliability of webrtc media sharing across multiple platforms and browsers, it's required that webrtc endpoints that support avc handle certain parameters in specific ways. sometimes this simply means a parameter must (or must not) be supported. sometimes it means requiring a specific value for a parameter, or that a specific set of values be allowed. and sometimes the requirements are more intricate. parameters which are useful but not required these parameters don't have to be supported by the webrtc endpoint, and their use is not required either. their use can improve the user experience in various ways, but don't have to be used. indeed, some of these are pretty complicated to use. max-br if specified and supported by the software...
.... you can find more general information about opus and its capabilities, and how other apis can support opus, in the corresponding section of our guide to audio codecs used on the web. both the speech and general audio modes should be supported. opus's scalability and flexibility are useful when dealing with audio that may have varying degrees of complexity. its support of in-band stereo signals allows support for stereo without complicating the demultiplexing process. the entire range of bit rates supported by opus (6 kbps to 510 kbps) is supported in webrtc, with the bit rate allowed to be dynamically changed. higher bit rates typically improve quality. bit rate recommendations given a 20 millisecond frame size, the following table shows the recommended bit rates for various forms of medi...
...And 5 more matches

Displaying web content in an extension without security issues - Archive of obsolete content
ge the value of the "type" attribute. but if you really have to do this, you will also have to remove the frame element from the document and insert it back. not giving privileges to documents that contain untrusted data the privileges that a document gets depend on where it comes from. for example, "chrome://foo/content/foo.xhtml" will have full privileges, "http://example.com/foo.xhtml" will be allowed to access example.com, "file:///c:/foo.xhtml" will be allowed to read files from disk (with some restrictions). as for the document that displays untrusted data, you don’t want it to have any privileges at all. here the "data:" protocol is useful. this protocol is special because it inherits the privileges from its parent document. however, if a "data:" document is the topmost content documen...
...hat way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame. restricting what documents that contain untrusted data can do there are several restrictions that can be applied per frame. here it is most important to disable javascript and plugins. ...
...in your extension but still strip it off all privileges when it is loaded in a frame. restricting what documents that contain untrusted data can do there are several restrictions that can be applied per frame. here it is most important to disable javascript and plugins. ...
...And 4 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
g 6. if you are creating elements that can grow using the flex attribute, you can also set minimums and maximums using minwidth, minheight, maxwidth, and maxheight. these all use pixels as the unit of size. <button label="button" width="200" height="100"/> listing 6: setting the size of a button also, as shown in listing 7, you can embed css inline into elements via the style attribute, which allows you to set sizes using units other than pixels. <button label="button" style="min-width: 10em;"/> listing 7: setting the size of a button using css markup hidden and collapsed the hidden and collapsed attributes act as switches to turn off the display of elements. setting hidden="true" disables display of that element. this has the same effect as setting display: none in css. you would use...
...can be displayed, and you can set the names of the buttons you want to display as a comma-delimited list in the value of the buttons attribute. fixme: make the table cleaner button name description accept the ok button. cancel the cancel button. help the help button. disclosure either a disclosure triangle or a button. this is used to allow the user to toggle the display of additional information. table 1: types of buttons that can be displayed in the dialog element additionally, there are two special button names, extra1 and extra2. the labels for these buttons are set using the buttonlabelextra1 and buttonlabelextra2 attributes on the root element, which take arbitrary strings as their values. the action taken when pressi...
...newtab();"/> </menupopup> buttons buttons that users can click on are defined using the button element. to show one with an icon as shown in figure 8, define an image's uri as the value for the image attribute. note: to see this sample in operation, use any image as the one to display and place it in the same folder as the xul document. using the icon attribute instead of the image attribute allows you to display buttons with icons that are standard for the platform. possible values for the icon attribute are given in table 2. figure 8: a button with an image icon attribute value icon attribute value accept close cancel print help add open remove save refresh find go-forward clear go-back ...
...And 4 more matches

The Essentials of an Extension - Archive of obsolete content
tension that works on multiple applications and versions. for example, if you create a firefox extension, it would normally take little effort to port it to seamonkey, which has very similar features and ui. the min and max version specify the version range in which the extension can be installed. here's more about the version format. if the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state. users can disable version checks through preferences or installing add-ons like the add-on compatibility reporter. beginning with firefox 11, add-ons will default to compatible and firefox will mostly ignore the version range. testing your add-ons with every firefox version is always recommended, though. this is ...
...arlier, the chrome is composed of 3 sections: content, locale and skin. the content is the most important section, holding user interface (xul) and script (js) files. the skin section has the files that define most of the look and feel of the ui (using css and images, just like web pages). finally, the locale section holds all text used in the extension, in dtd and properties files. this division allows other developers to create themes that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code. this gives firefox extensions a great deal of flexibility. chrome files are accessed through the chrome protocol. this is what a chrome uri looks like: chrome://packagename/section/path/to/file so, for insta...
...a window. content there are 2 files in the content directory. let's look at the xul file first. xul files are xml files that define the user interface elements in firefox and firefox extensions. xul was inspired by html, so you'll see many similarities between the two. however, xul is also an improvement over html, having learned from many of the mistakes made during the evolution of html. xul allows you to create richer and more interactive interfaces than the ones you can create with html, or at least xul makes it easier. xul files usually define one of two things: windows or overlays. the file you opened before, downloads.xul, has the code that defines the downloads window. the xul file included in the hello world extension is an overlay. an overlay extends an existing window, adding new...
...And 4 more matches

Mozilla Application Framework in Detail - Archive of obsolete content
es for parallel development! unlike many other application frameworks, you are not limited to the widget set we provide, nor limited to the "look and feel" of the native os. you can create applications using our framework that either have a native look and feel for each os, or one which is identical on macs, pc's or unix operating systems. you may also further enhance the user interface by allowing 3rd parties to develop "themes" for your application. themes are simply collections of images and css which can augment or replace your current ui elements. xul provides an excellent answer for organizations with heterogeneous computing environments. customized xul applications with significant business logic can be written once, and used on the range of platforms that exist within the ...
... applications with significant business logic can be written once, and used on the range of platforms that exist within the organization. in addition, if the organization maintains sophisticated, interactive websites, it will already possess a wealth of technical expertise that will be relevant for creating xul applications. in addition to the technologies already mentioned, we go even further by allowing you to even create your own custom interface widgets. don't feel limited by the widgets that the framework already contains! xbl (extensible binding language) allows you to expand your library of interface elements, and even construct your own xml language for defining your ui. for instance imagine that you wanted to create a chess style game. you could easily create xml elements such as <ches...
...ame. you could easily create xml elements such as <chessboard> or <chesspiece> and via xbl map these to images and application logic. this is very powerful since you could make improvements to the underlying application logic without having to rewrite the higher level code. our platform also can take advantage of other internet standards such as xslt and rdf. rdf, a core element to the framework, allows you to define dynamic elements in your ui (elements that may change after you have completed the application, such as a "history" menu item). xslt could be used to translate information from web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface. the gecko rendering engine gecko is the revolutionary rendering engine that ...
...And 4 more matches

Archived Mozilla and build documentation - Archive of obsolete content
suited to xbl. there is, however, no practical obstacle to the interface being implemented by any javascript object associated with a group of dom nodes, even non-anonymous xul nodes. calicalendarviewcontroller a calicalendarviewcontroller provides a way for a calicalendarview to create, modify, and delete items. implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included. califiletype the califiletype interface provides information about a specific file type. chromeless [this project may not be active — check github https://github.com/mozilla/chromeless] creating a firefox ...
...mo 1.0 launch roadmap comments, ideas, questions and other discussion should be added on the devmo talk:1.0 launch roadmap page. further details on smaller tasks being done are available at user:dria:todo page. see also current events. download manager improvements in firefox 3 firefox 3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more. in addition, you can augment or replace the download manager's user interface by implementing the new nsidownloadmanagerui interface. download manager preferences there are several preferences used by the download manager. this article provides a list of them. ...
...nagerui interface. download manager preferences there are several preferences used by the download manager. this article provides a list of them. drag and drop this section describes how to implement objects that can be dragged around and dropped onto other objects. dtrace dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active. probe data can be collected with scripts written in d (no, not that one). mozilla dtrace support has been added by the sun dtrace team and can be used on solaris 10 and mac os x 10.5. embedding faq em...
...And 4 more matches

Introduction to SSL - Archive of obsolete content
irectory access protocol (ldap), or internet messaging access protocol (imap), run "on top of" tcp/ip in the sense that they all use tcp/ip to support typical application tasks such as displaying web pages or running email servers. the ssl protocol runs above tcp/ip and below higher-level protocols such as http or imap. it uses tcp/ip on behalf of the higher-level protocols, and in the process allows an ssl-enabled server to authenticate itself to an ssl-enabled client, allows the client to authenticate itself to the server, and allows both machines to establish an encrypted connection. these capabilities address fundamental concerns about communication over the internet and other tcp/ip networks: ssl server authentication allows a user to confirm a server's identity. ssl-enabled client ...
...use standard techniques of public-key cryptography to check that a server's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the client's list of trusted cas. this confirmation might be important if the user, for example, is sending a credit card number over the network and wants to check the receiving server's identity. ssl client authentication allows a server to confirm a user's identity. using the same techniques as those used for server authentication, ssl-enabled server software can check that a client's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the server's list of trusted cas. this confirmation might be important if the server, for example, is a bank sending confidential financial...
...shake protocol. the ssl record protocol defines the format used to transmit data. the ssl handshake protocol involves using the ssl record protocol to exchange a series of messages between an ssl-enabled server and an ssl-enabled client when they first establish an ssl connection. this exchange of messages is designed to facilitate the following actions: authenticate the server to the client. allow the client and server to select the cryptographic algorithms, or ciphers, that they both support. optionally authenticate the client to the server. use public-key encryption techniques to generate shared secrets. establish an encrypted ssl connection. for more information about the handshake process, see "the ssl handshake." ciphers used with ssl the ssl protocol supports the use of a vari...
...And 4 more matches

Audio for Web games - Game development
le of differences between desktop and mobile browsers that may have caused browser vendors to make choices that can make web audio difficult for game developers to work with. let's look at these now. autoplay browser autoplay policy now affects desktop and mobile browsers. there is further information about it here from the google developers site. it is worth noting that autoplay with sound is allowed if: the user has interacted with the domain. on mobile the user has added the site to their home screen. many browsers will simply ignore any requests made by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated event, such as a click or tap. this means you will have to structure your audio playback to take account of that. this is usua...
...want to play a part of it; for this reason it is useful to include a moment of silence at the end of your audio sample. jumping to, playing, and then pausing that silence will mean we can now use javascript to play that file at arbitrary points. you can find out more about best practises with the autoplay policy here. note: playing part of your file at zero volume could also work if the browser allows you to change volume (see below). also note that playing and immediately pausing your audio does not guarantee that a small piece of audio won't be played. note: adding a web app to your mobile's homescreen may change its capabilities. in the case of autoplay on ios, this appears to be the case currently. if possible, you should try your code on several devices and platforms to see how it wor...
...gy would be to provide basic audio using the standard <audio> element and, where supported, enhance the experience using the web audio api. element and, where supported, enhance the experience using the web audio api. note: significantly, ios safari now supports the web audio api, which means it's now possible to write web-based games with native-quality audio for ios. as the web audio api allows precise timing and control of audio playback, we can use it to play samples at specific moments, which is a crucial immersive aspect of gaming. you want those explosions to be accompanied by a thundering boom, not followed by one, after all. background music with the web audio api although we can use the <audio> element to deliver linear background music that doesn't change in reaction to the ...
...And 4 more matches

WAI-ARIA basics - Learn web development
o others that describe different pages structures, such as role="banner", role="search", role="tabgroup", role="tab", etc., which are commonly found in uis. properties — these define properties of elements, which can be used to give them extra meaning or semantics. as an example, aria-required="true" specifies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">. as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing info...
...sers when an area of content is updated, e.g. via xmlhttprequest, or dom apis. enhancing keyboard accessibility: there are built-in html elements that have native keyboard accessibility; when other elements are used along with javascript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. where this is unavoidable, wai-aria provides a means to allow other elements to receive focus (using tabindex). accessibility of non-semantic controls: when a series of nested <div>s along with css/javascript is used to create a complex ui-feature, or a native control is greatly enhanced/changed via javascript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. ...
...ical wai-aria implementations in the next section we'll look at the four areas in more detail, along with practical examples. before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through. see our section on testing screenreaders for more information. signposts/landmarks wai-aria adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. the first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. let's look at an example — our website-no-roles example (see it live) has the following structure: <header> <h1>...</h1> <nav> <ul>...</ul> <form> <!-- sea...
...And 4 more matches

CSS values and units - Learn web development
in this lesson we will take a look at some of the most common values and units in use. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different types of values and units used in css properties. ...
... get confused between css data types and html elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts. in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values. this means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rgb() functions, etc. you can use any available <color> values assuming they are supported by your browser. the page on mdn for each value will give you information about browser support. for example, if you look at the page for <co...
... 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 progressively smaller as they inherit their sizing from their parent. note that, while many values accept a length or a percentage, there are some that only accept length. you can see which values are accepted on the mdn property reference pages. if the allowed value includes <length-percentage> then you can use a length or a percentage. if the allowed value only includes <length>, it is not possible to use a percentage. numbers some values accept numbers, without any unit added to them. an example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). this property ac...
...And 4 more matches

Introduction to CSS layout - Learn web development
...
...out 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 viewport. table layout — features designed for styling the parts of an html table can be used on non-table elements using display: table and associated ...
...ned for styling the parts of an html table can be used on non-table elements using display: table and associated properties. multi-column layout — the multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper. the display property the main methods of achieving page layout in css are all values of the display property. this property allows us to change the default way something displays. everything in normal flow has a value of display, used as the default way that elements they are set on behave. for example, the fact that paragraphs in english display one below the other is due to the fact that they are styled with display: block. if you create a link around some text inside a paragraph, that link remains inline with the rest of...
...And 4 more matches

The HTML5 input types - Learn web development
prerequisites: basic computer literacy, and a basic understanding of html. ...
...e value email for the type attribute: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email address into the field. any other content causes the browser to display an error when the form is submitted. you can see this in action in the below screenshot. you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the @ key. see the firefox for android keyboard screenshot below for...
...idation is too easy to turn off, so malicious users can still easily send bad data through to your server. read website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind. note that a@b is a valid email address according to the default provided constraints. this is because the email input type allows intranet email addresses by default. to implement different validation behavior, you can use the pattern attribute, and you can also custom the error messages; we'll talk how to use these features in the client-side form validation article later on. note: if the data entered is not an email address, the :invalid pseudo-class will match, and the validitystate.typemismatch property will return t...
...And 4 more matches

Choosing the right approach - Learn web development
n passed to a third-party library. browser compatibility really good general support, although the exact support for callbacks in apis depends on the particular api. refer to the reference documentation for the api you're using for more specific support info. further information introducing asynchronous javascript, in particular async callbacks settimeout() settimeout() is a method that allows you to run a function after an arbitrary amount of time has passed. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations yes yes (recursive timeouts) yes (nested timeouts) no code example here the browser will wait two seconds before executing the anonymous function, then will disp...
...port full support compatibility unknown compatibility unknownsee implementation notes.see implementation notes. further information cooperative asynchronous javascript: timeouts and intervals, in particular settimeout() settimeout() reference setinterval() setinterval() is a method that allows you to run a function repeatedly with a set interval of time between each execution. not as efficient as requestanimationframe(), but allows you to choose a running rate/frame rate. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes no (unless it is the same one) no code ex...
... full support compatibility unknown compatibility unknownsee implementation notes.see implementation notes. further information cooperative asynchronous javascript: timeouts and intervals, in particular setinterval() setinterval() reference requestanimationframe() requestanimationframe() is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. you should, if at all possible, use this instead of setinterval()/recursive settimeout(), unless you need a specific framerate. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations n...
...And 4 more matches

Third-party APIs - Learn web development
displaying your twitter stream on your blog) or services (e.g. using facebook login to log in your users). this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the latter. ...
...atter. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how third-party apis work, and how to use them to enhance your websites. what are third party apis? third party apis are apis provided by third parties — generally companies such as facebook, twitter, or google — to allow you to access their functionality via javascript and use it on your site. one of the most obvious examples is using mapping apis to display custom maps on your pages. let's look at a simple mapquest api example, and use it to illustrate how third-party apis differ from browser apis. note: you might want to just get all our code examples at once, in which case you can then just search the repo ...
...sually require api keys security for browser apis tends to be handled by permission prompts, as discussed in our first article. the purpose of these is so that the user knows what is going on in the websites they visit and is less likely to fall victim to someone using an api in a malicious way. ...
...And 4 more matches

A first splash into JavaScript - Learn web development
er is on. start it on 1. provide the player with a way to guess what the number is. once a guess has been submitted first record it somewhere so the user can see their previous guesses. next, check whether it is the correct number. if it is correct: display congratulations message. stop the player from being able to enter more guesses (this would mess the game up). display control allowing the player to restart the game. if it is wrong and the player has turns left: tell the player they are wrong. allow them to enter another guess. increment the turn number by 1. if it is wrong and the player has no turns left: tell the player it is game over. stop the player from being able to enter more guesses (this would mess the game up). display control ...
... once the game restarts, make sure the game logic and ui are completely reset, then go back to step 1. ...
... page in your browser. then go into the developer tools javascript console, and enter the following line: checkguess(); after pressing return/enter, you should see an alert come up that says "i am a placeholder"; we have defined a function in our code that creates an alert whenever we call it. note: you'll learn a lot more about functions later in the course. operators javascript operators allow us to perform tests, do math, join strings together, and other such things. if you haven't already done so, save your code, refresh the page in your browser, and open the developer tools javascript console. then we can try typing in the examples shown below — type in each one from the "example" columns exactly as shown, pressing return/enter after each one, and see what results they return. f...
...And 4 more matches

Getting started with Ember - Learn web development
application. use cases generally, emberjs works well for building apps that desire either or both of the following traits: single page applications, including native-like web apps, and progressive web apps (pwas) ember works best when it is the entire front end of your application. increasing cohesion among many team's technology stacks community-backed "best practices" allow for faster long-term development speed. ember has clear conventions that are useful for enforcing consistency and helping team members get up to speed quickly. ember with add-ons emberjs has a plugin architecture, which means that add-ons can be installed and provide additional functionality without much, if any, configuration. examples include: prember: static website rendering fo...
...ications without having to completely relearn the architecture, patterns, conventions, etc. as you work through this series of tutorials, you'll notice ember's opinions — such as strict naming conventions of component files. how does ember relate to vanilla javascript? ember is built on javascript technologies and is a thin layer on top of traditional object-oriented programming, while still allowing developers to utilize functional programming techniques. ember makes use of two main syntaxes: javascript (or optionally, typescript) ember's own templating language, which is loosely based on handlebars. the templating language is used to make build and runtime optimizations that otherwise wouldn't be possible. most importantly, it is a superset of html — meaning that anyone who know...
...g commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design. that said, because this tutorial is a focus on the javascript side of making a small web application, todomvc's value comes from providing pre-made css and recommended html structure, which eliminates small differences between implementations, allowing for easier comparison. later on in the tutorial, we'll focus on adding code to our application to fix some of todomvc's biggest faults. installing the ember tooling ember uses a command-line interface (cli) tool for building and scaffolding parts of your application. you'll need node and npm installed before you can install ember-cli. go here to find out how to install node and npm, if...
...And 4 more matches

Framework main features - Learn web development
...
...is handlebars template: <header> <h1>hello, {{subject}}!</h1> </header> and this data: { subject: "world" } handlebars will build html like this: <header> <h1>hello, world!</h1> </header> typescript typescript is a superset of javascript, meaning it extends javascript — all javascript code is valid typescript, but not the other way around. typescript is useful for the strictness it allows developers to enforce on their code. for instance, consider a function add(), which takes integers a and b and returns their sum. in javascript, that function could be written like this: function add(a, b) { return a + b; } this code might be trivial for someone accustomed to javascript, but it could still be clearer. javascript lets us use the + operator to concatenate strings together, so...
...at function could be written like this: function add(a, b) { return a + b; } this code might be trivial for someone accustomed to javascript, but it could still be clearer. javascript lets us use the + operator to concatenate strings together, so this function would technically still work if a and b were strings — it just might not give you the result you'd expect. what if we wanted to only allow numbers to be passed into this function? typescript makes that possible: function add(a: number, b: number) { return a + b; } the : number written after each parameter here tells typescript that both a and b must be numbers. if we were to use this function and pass '2' into it as an argument, typescript would raise an error during compilation, and we would be forced to fix our mistake. we cou...
...And 4 more matches

Understanding client-side JavaScript frameworks - Learn web development
in this article we will say hello to react. we'll discover a little bit of detail about its background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app, learning a bit about how react works in the process. 2. beginning our react todo list let's say that we’ve been tasked with creating a proof-of-concept in react – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. this article will walk you through putting the basic app component structure and styling in place, ready for individual component definition and interactivity, which we'll add later. 3. componentizing our react app at this point, our app is a monolith. before we can make it do thin...
...it apart into manageable, descriptive components. react doesn’t have any hard rules for what is and isn’t a component – that’s up to you! in this article, we will show you a sensible way to break our app up into components. 4. ...
...we'll look at conditional ui rendering along the way. 6. ...
...And 4 more matches

Handling common HTML and CSS problems - Learn web development
inside the widget with this class, so conflicts are less likely. for example .audio-player ul a. validation for html, validation involves making sure all your tags are properly closed and nested, you are using a doctype, and you are using tags for their correct purpose. a good strategy is to validate your code regularly. one service that can do this is the w3c markup validation service, which allows you to point to your code, and returns a list of errors: css has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on. the w3c has a css validator available too, for this purpose. linters another good option to choose is a ...
...a so-called linter application, which not only points out errors, but can also flag up warnings about bad practices in your css, and other points besides. linters can generally be customized to be stricter or more relaxed in their error/warning reporting. there are many online linter applications, the best of which are probably dirty markup (html, css, javascript), and css lint (css only). these allows you to paste your code into a window, and it will flag up any errors with crosses, which can then be hovered to get an error message informing you what the problem is. dirty markup also allows you to make fixes to your markup using the clean button. however, it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. what you really wa...
... html5 form elements also exhibit fallback qualities — html5 introduced some special <input> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. these are very useful, particularly on mobile platforms, where providing a pain-free...
...And 4 more matches

Introducing a complete toolchain - Learn web development
deploy a mini site that lists data (taken from one of nasa's open apis) concerning potentially hazardous space objects that threaten our existence on earth! it looks like this: you can see a live version of the site at near-misses.netlify.com. tools used in our toolchain in this article we're going to use the following tools and features: jsx, a react-related set of syntax extensions that allow you to do things like defining component structures inside javascript. you won't need to know react to follow this tutorial, but we've included this to give you an idea of how a non-native web language could be integrated into a toolchain. the latest built-in javascript features (at time of writing), such as import. useful development tools such as prettier for formatting and eslint for linting...
...ify account to your github repository to deploy this project; we'll see how to do that in the next chapter. three stages of tools as we talked about in chapter 1, the toolchain will be structured into the following phases: safety net: making the software development experience stable and more efficient. we might also refer to this as our development environment. transformation: tooling that allows us to use the latest features of a language (e.g. javascript) or another language entirely (e.g. jsx or typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers, modern and older. post development: tooling that comes into play after you are done with the body of development to ensure that your software makes it ...
...tives including gitlab and bitbucket, and you could even host your own git repositories. using revision control in your projects and including it as part of the toolchain will help manage the evolution of your code. it offers a way to "commit" blocks of work as you progress, along with comments such as "x new feature implemented", or "bug z now fixed due to y changes". revision control can also allow you to branch out your project code, creating a separate version and try out new functionality on, without those changes affecting your original code. finally, it can help you undo changes or revert your code back to a time "when it was working" if a mistake has been introduced somewhere and you are having trouble fixing it — something all developers need to do once in a while! git can be dow...
...And 4 more matches

Error codes returned by Mozilla APIs
ion which was not expected. this error occurred rather than continuing. ns_error_out_of_memory (0x8007000e) this error occurs when there is not enough memory available to carry out an operation, or an error occurred trying to allocate memory. ns_error_illegal_value (0x80070057) an argument supplied to a method was not valid, for instance a null value was supplied as an argument which does not allow null values, or a value was out of range. ns_error_no_aggregation (0x80040110) ns_error_not_available (0x80040111) an operation could not be completed because some other necessary component or resource was not available. ns_error_factory_not_registered (0x80040154) returned when a service could not be found. ns_error_factory_register_again (0x80040155) this error is returned when regist...
...mbolic link to a file or directory which does not exist. ns_error_file_execution_failed (0x80520003) an attempt to launch or execute a file failed because the file is not executable. nsifile.isexecutable() may be used to check if a file is executable. ns_error_file_unknown_type (0x80520004) an call was made to nsifile.create() with an invalid type. only normal_file_type and directory_type are allowed. ns_error_file_destination_not_dir (0x80520005) an attempt was made to copy or move a file to a destination that is not a directory. ns_error_file_target_does_not_exist (0x80520006) an attempt was made to reference a file that does not exist for copy/move, checking its size, etc. ns_error_file_copy_or_move_failed (0x80520007) a call to nsifile.copyto() or nsifile.moveto() failed. ns_erro...
...e file can be written to. ns_error_file_dir_not_empty (0x80520014) when calling nsifile.remove() on a directory and the 'recursive' argument to this method is false, this error will occur if the directory is not empty. ns_error_file_access_denied (0x80520015) an operation was not performed on a file because the file cannot be accessed, typically because the permissions set for the file do not allow the operation. stream errors ns_base_stream_closed (0x80470002) this error occurs when an operation is performed on a stream that has already been closed. ns_base_stream_oserror (0x80470003) this error occurs when an operating system error occurs. currently, this error only occurs when a file stream is closed. ns_base_stream_illegal_args (0x80470004) ns_base_stream_no_converter (0x80...
...And 4 more matches

An overview of NSS Internals
portability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards. ...
... order to allow interoperability between software and devices that perform cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. ...
... different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base l...
...And 4 more matches

Python binding for NSS
s which have "get" and "set" api function calls are exposed as python properties. all nss/nspr python objects can print their current value by evaluting the python object in a string context or by using the python str() function. support threading. the python global interpreter lock (gil) is released prior to calling nss/nspr c functions and reaquired after the nss/nspr c function returns. this allows other python threads to execute during the time a nss/nspr function is progress in another thread. also, any "global" values which are set in python-nss are actually thread-local. examples of this are the various callbacks which can be set and their parameters. thus each thread gets it own set of callbacks. many methods/functions provide sane default (keyword) parameters freeing the python prog...
... a nss/nspr function is progress in another thread. also, any "global" values which are set in python-nss are actually thread-local. examples of this are the various callbacks which can be set and their parameters. thus each thread gets it own set of callbacks. many methods/functions provide sane default (keyword) parameters freeing the python programmer from having to specify all parameters yet allowing them to be overriden when necessary. error codes are never returned from methods/functions. python-nss follows the existing python exception mechanism. any error reported by nss/nspr is converted into a python exception and raised. the exact error code, error description, and often contextual error information will be present in the exception object. enumerated constants used in the nss/nspr...
...unction it will be encoded as utf-8 first before being passed to nss/nspr. python-nss tries to be flexible when generating a print representation of complex objects. for simplicity you can receive a block of formatted text but if you need more control, such as when building gui elments you can access a list of "lines", each line is paired with an indentation level value. the (indent, text) pairs allow you to insert the item into a gui tree structure or simply change the indentation formatting. deprecated elements of the python-nss api are marked with python deprecation warnings as well as being documented in the nss module documentation. as of python 2.7 deprecation warnings are no longer reported by default. it is suggested python developers using python-nss periodically run their code with ...
...And 4 more matches

Scripting Java
we can test java classes by writing scripts. we can also aid our java development by using scripting for exploratory programming. exploratory programming is the process of learning about what a library or api can do by writing quick programs that use it. as we will see, scripting makes this process easier. note that the ecma standard doesn't cover communication with java (or with any external object system for that matter). ...
... { print(i) } exists parentfile mkdir tostring wait [44 others] note that not only the methods of the file class are listed, but also the methods inherited from the base class java.lang.object (like wait). this makes it easier to work with objects in deeply nested inheritance hierarchies since you can see all the methods that are available for that object. rhino provides another convenience by allowing properties of javabeans to be accessed directly by their property names. a javabean property foo is defined by the methods getfoo and setfoo. additionally, a boolean property of the same name can be defined by an isfoo method. for example, the following code actually calls the file object's getname and isdirectory methods. js> f.name test.txt js> f.directory false calling overloaded methods...
...java adapter. in practice there's little need to call the javaadapter constructor directly. most of the time the previous syntaxes using the new operator will be sufficient. javascript functions as java interfaces often we need to implement an interface with only one method, like in the previous runnable example or when providing various event listener implementations. ...
...And 4 more matches

Using the Places history service
ser like marking pages as typed in the url bar, and removing pages as from the history interface. nsinavhistoryservice: complex query functions, more fine-grained getters and setters. nsiautocompletesearch: url-bar autocomplete from history from 1.9.1 (firefox3.1) on, don't use any places service on (or after) quit-application has been notified, since the database connection will be closed to allow the last sync, and changes will most likely be lost. use quit-application-granted instead. differences from previous implementations the previous nsglobalhistory service stored one entry for each page in history. this entry contained the url, title, visit count, last visit date, first visit date, host name, last referrer, flags for typed, hidden, and gecko flags (gecko flags is trunk only). th...
... and typed. stored separately is the information specific to each visit. this information is called a "visit" in this document and in the code. a visit contains a reference to the url table for the page, the visit date, the transition type (typed, click, redirect, bookmark, etc.), a reference to the referring visit, and the session id. this separation of the global page information and the visit allows us to store information about each time the page was visited instead of just the last time. using the referrer information in each visit, the browsing path can be reconstructed at any time. the "session id" allows these paths to be reconstructed more easily. when the user starts browsing (for example, by typing in a link or following a bookmark), a new session id is created. new visits get the ...
...nstructed more easily. when the user starts browsing (for example, by typing in a link or following a bookmark), a new session id is created. new visits get the same session id as their referrer. this means that one "session" is comprised of going to a new page, and following a bunch of links or redirects. a session is ended when a new url is typed in or selected from bookmarks. these session ids allow the dotted lines separating related pages in the history view to be easily computed. creating the history service the places history service's contract id is "@mozilla.org/browser/nav-history-service;1": var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); it also responds...
...And 4 more matches

Components.utils.exportFunction
bal window object: it could be any other object in the target window, or an object created by the caller. options : object optional parameter that supplies additional options. the following options are currently defined: defineas: determines the name of the function in targetscope. if this is omitted, you need to assign the return value of exportfunction() to an object in the target scope. ...
...ow, or an object created by the caller. options : object optional parameter that supplies additional options. the following options are currently defined: defineas: determines the name of the function in targetscope. if this is omitted, you need to assign the return value of exportfunction() to an object in the target scope. allowcallbacks: deprecated/redundant from firefox 34. this option allows the exported function to accept callbacks as arguments. ...
...boolean, defaulting to false. ...
...And 4 more matches

nsIFile
pies a source file to a new location if it does not already exist. this method will not resolve aliases/shortcuts during the copy. void copyto( in nsifile newparentdir, in astring newname ); parameters newparentdir this parameter specifies the parent directory to copy the file into. if this parameter is null, then the parent directory of the file will be used. newname this parameter allows you to specify a new leaf name for the file to be copied. this parameter may be empty, in which case the current leaf name will be used. exceptions thrown ns_error_file_destination_not_dir if the "newparentdir" is not a directory. ns_error_file_target_does_not_exist indicates that the current file path does not exist. it is not possible to copy a file that does not exist. ns_error_file_...
...dy exist. this method is identical to copyto() except that any symbolic links will be followed as the name suggests. void copytofollowinglinks( in nsifile newparentdir, in astring newname ); parameters newparentdir this parameter specifies the parent directory to copy the file into. if this parameter is null, then the parent directory of the file will be used. newname this parameter allows you to specify a new leaf name for the file to be copied. this parameter may be empty, in which case the current leaf name will be used. exceptions thrown ns_error_file_destination_not_dir if the "newparentdir" is not a directory. ns_error_file_target_does_not_exist indicates that the current file path does not exist. it is not possible to copy a file that does not exist. ns_error_file_...
...is method is identical to copytonative() except that any symbolic links will be followed as the name suggests. void copytofollowinglinksnative( in nsifile newparentdir, in acstring newname ); parameters newparentdir this parameter specifies the parent directory to copy the file into. if this parameter is null, then the parent directory of the file will be used. newname this parameter allows you to specify a new leaf name for the file to be copied. this parameter may be empty, in which case the current leaf name will be used. this string must be encoded using the native character encoding. exceptions thrown ns_error_file_destination_not_dir if the "newparentdir" is not a directory. ns_error_file_target_does_not_exist indicates that the current file path does not exist. it is...
...And 4 more matches

Fullscreen API - Web APIs
such as fscreen for vendor agnostic access to the fullscreen api. interfaces the fullscreen api has no interfaces of its own. instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide full-screen functionality. these are listed in the following sections. methods the fullscreen api adds methods to the document and element interfaces to allow turning off and on full-screen mode. methods on the document interface document.exitfullscreen() requests that the user agent switch from full-screen mode back to windowed mode. returns a promise which is resolved once full-screen mode has been completely shut off. methods on the element interface element.requestfullscreen() asks the user agent to place the specified element (and, by e...
... tells you the element that's currently being displayed in full-screen mode on the dom (or shadow dom). if this is null, the document is not in full-screen mode. document.fullscreenenabled the fullscreenenabled property tells you whether or not it is possible to engage full-screen mode. this is false if full-screen mode is not available for any reason (such as the "fullscreen" feature not being allowed, or full-screen mode not being supported). event handlers the fullscreen api defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes. event handlers for these events are available on the document and element interfaces. note: these event handler properties a...
...ocument or element if an error occurs while attempting to switch it into or out of full-screen mode. dictionaries fullscreenoptions provides optional settings you can specify when calling requestfullscreen(). controlling access the availability of full-screen mode can be controlled using feature policy. the full-screen mode feature is identified by the string "fullscreen", with a default allow-list value of "self", meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document. see using feature policy to learn more about using feature policy to control access to an api. usage notes users can choose to exit full-screen mode simply by pressing the esc (or f11) key, rather than wait...
...And 4 more matches

Using IndexedDB - Web APIs
ines the database schema — the object stores in the database and their structure. if the database doesn't already exist, it is created by the open operation, then an onupgradeneeded event is triggered and you create the database schema in the handler for this event. if the database does exist but you are specifying an upgraded version number, an onupgradeneeded event is triggered straight away, allowing you to provide an updated schema in its handler. more on this later in updating the version of the database below, and the idbfactory.open reference page. important: the version number is an unsigned long long number, which means that it can be a very big integer. it also means that you can't use a float, otherwise it will be converted to the closest lower integer and the transaction may no...
...signed to minimize the need for error handling, so you're not likely to see many error events (at least, not once you're used to the api!). in the case of opening a database, however, there are some common conditions that generate error events. the most likely problem is that the user decided not to give your web app permission to create a database. one of the main design goals of indexeddb is to allow large amounts of data to be stored for offline use. (to learn more about how much storage you can have for each browser, see storage limits.) obviously, browsers do not want to allow some advertising network or malicious website to pollute your computer, so browsers used to prompt the user the first time any given web app attempts to open an indexeddb for storage. the user could choose to allo...
... indexeddb for storage. the user could choose to allow or deny access. also, indexeddb storage in browsers' privacy modes only lasts in-memory until the incognito session is closed (private browsing mode for firefox and incognito mode for chrome, but in firefox this is not implemented yet as of april 2020 so you can't use indexeddb in firefox private browsing at all). now, assuming that the user allowed your request to create a database, and you've received a success event to trigger the success callback; what's next? the request here was generated with a call to indexeddb.open(), so request.result is an instance of idbdatabase, and you definitely want to save that for later. your code might look something like this: var db; var request = indexeddb.open("mytestdatabase"); request.onerror = fu...
...And 4 more matches

SVGLengthList - Web APIs
numberofitems unsigned long the number of items in the list. length unsigned long the number of items in the list. methods name & arguments return description clear() void clears all existing current items from the list, with the result being an empty list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svglength newitem) svglength clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is i...
...g current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svglength returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domex...
...responds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svglength returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svglength newitem, in unsigned long index) svglength inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this li...
...And 4 more matches

SVGPathSegList - Web APIs
emsread only unsigned long the number of items in the list. methods clear() void clears all existing current items from the list, with the result being an empty list. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. initialize(in svgpathseg newitem) svgpathseg clears all existing current items from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous li...
...from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. getitem(in unsigned long index) svgpathseg returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. ...
... getitem(in unsigned long index) svgpathseg returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. insertitembefore(in svgpathseg newitem, in unsigned long index) svgpathseg inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list...
...And 4 more matches

SVGPointList - Web APIs
items in the list. methods name & arguments return description clear() void clears all existing current items from the list, with the result being an empty list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgpoint newitem) svgpoint clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is...
...om the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgpoint returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first ite...
...ad only. getitem(in unsigned long index) svgpoint returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgpoint newitem, in unsigned long index) svgpoint inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its pr...
...And 4 more matches

SVGStringList - Web APIs
r of items in the list. length unsigned long a mirror of the value in numberofitems, for consistency with other interfaces. methods name & arguments return description clear() void clears all existing current items from the list, with the result being an empty list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in domstring newitem) domstring clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is...
...urrent items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) domstring returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a ...
...nds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) domstring returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in domstring newitem, in unsigned long index) domstring inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this ...
...And 4 more matches

Using the Screen Capture API - Web APIs
the user agent responds by presenting a user interface that prompts the user to choose the screen area to share. both of these implementations of startcapture() return the mediastream containing the captured display imagery. see options and constraints, below, for more on both how to specify the type of surface you want as well as other ways to adjust the resulting stream. example of a window allowing the user to select a display surface to capture you can then use the captured stream, capturestream, for anything that accepts a stream as input. the examples below show a few ways to make use of the stream. visible vs logical display surfaces for the purposes of the screen capture api, a display surface is any content object that can be selected by the api for sharing purposes. sharing ...
...offscreen. how these are handled by the screen capture api varies. generally, the browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a color or pattern. this is done for security reasons, as the content that cannot be seen by the user may contain data which they do not want to share. a user agent might allow the capture of the entire content of an obscured window after gaining permission from the user to do so. in this case, the user agent may include the obscured content, either by getting the current contents of the hidden portion of the window or by presenting the most-recently-visible contents if the current contents are not available. options and constraints the constraints object passed into ...
... is taking place. note: for privacy and security reasons, screen sharing sources are not enumerable using enumeratedevices(). related to this, the devicechange event is never sent when there are changes to the sources available for getdisplaymedia(). capturing shared audio getdisplaymedia() is most commonly used to capture video of a user's screen (or parts thereof). however, user agents may allow the capture of audio along with the video content. the source of this audio might be the selected window, the entire computer's audio system, or the user's microphone (or a combination of all of the above). before starting a project that will require sharing of audio, be sure to check the browser compatibility in mediadevices.getdisplaymedia() to see if the browsers you wish compaibility with ha...
...And 4 more matches

Web Audio API - Web APIs
basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. several sources — with different types of channel layout — are supported even within a single context. ...
...basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. several sources — with different types of channel layout — are supported even within a single context. ...
...omething like this: create audio context inside the context, create sources — such as <audio>, oscillator, stream create effects nodes, such as reverb, biquad filter, panner, compressor choose final destination of audio, for example your system speakers connect the sources up to the effects, and the effects to the destination. ...
...And 4 more matches

Functions and classes available to Web Workers - Web APIs
on workerglobalscope yes, on workerglobalscope yes, but is a no-op. ...
... 41 (41) (yes) (yes) (yes) console api provides access to the browser's debugging console (e.g., the web console in firefox). ...
...(yes) console api provides access to the browser's debugging console (e.g., the web console in firefox). the specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided. 38 (38) (yes) (yes) (yes) crypto the crypto interface represents basic cryptography features available in the current context. it allows access to a cryptographically strong random number generator and to cryptographic primitives. ? no support ? ? customevent the customevent interface represents events initialized by an application for any purpose. 48 (48) (yes) (yes) (yes) domrequest and domcursor respectively, these objects represents an ongoing operation (with listeners for react...
...And 4 more matches

Typical use cases of Flexbox - CSS: Cascading Style Sheets
box use case. when we have a set of items that we want to display horizontally, we may well end up with additional space. we need to decide what to do with that space, and have a couple of options. we either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space. space distributed outside the items to distribute the space between or around the items we use the alignment properties in flexbox, and the justify-content property. you can read more about this property in aligning items in a flex container, which deals with aligning items on the main axis. in the below live example we display the items at their na...
..., space-evenly. you could also use flex-start to place the space at the end of the items, flex-end to place it before them, or center to centre the navigation items. space distributed within the items a different pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them. in this case we would use the flex properties to allow items to grow and shrink in proportion to one another as described in controlling ratios of flex items along the main axis. if i wanted all of my navigation items to have equal width, then i might use flex: auto, which is the shorthand for flex: 1 1 auto — all items grow and shrink from a flex-basis of auto. this would mean that the longer item would have more space. in the live example below...
...ave equal width, then i might use flex: auto, which is the shorthand for flex: 1 1 auto — all items grow and shrink from a flex-basis of auto. this would mean that the longer item would have more space. in the live example below try changing flex: auto to flex: 1. this is the shorthand for flex: 1 1 0 and causes all of the items become the same width, as they are working from a flex-basis of 0 allowing all of the space to be distributed evenly. split navigation another way to align items on the main axis is to use auto margins. this enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right. here we are using the auto margins technique described in using auto margins for main axis alignment. the items are aligned on the main ...
...And 4 more matches

hanging-punctuation - CSS: Cascading Style Sheets
the hanging-punctuation css property specifies whether a punctuation mark should hang at the start or end of a line of text. hanging punctuation may be placed outside the line box. ...
...ty specifies whether a punctuation mark should hang at the start or end of a line of text. hanging punctuation may be placed outside the line box. ...
...ion may be placed outside the line box. /* keyword values */ hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end; /* two keywords */ hanging-punctuation: first force-end; hanging-punctuation: first allow-end; hanging-punctuation: first last; hanging-punctuation: last force-end; hanging-punctuation: last allow-end; /* three keywords */ hanging-punctuation: first force-end last; hanging-punctuation: first allow-end last; /* global values */ hanging-punctuation: inherit; hanging-punctuation: initial; hanging-punctuation: unset; syntax the hanging-punctuation property may be specified with one, two, or three values. one-value syntax uses any one of the keyword values in the list below. two-value...
...And 4 more matches

Creating a cross-browser video player - Developer guides
<source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video ...
...clip-medium.mp4">download mp4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript. doing things this way still allows users who have javascript turned off (for whatever reason) to still have access to the browser's native controls. a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file. this provides the player with data such as video duratio...
...that instead. three different video sources are provided for the player: mp4, webm, and ogg. using these different source formats gives the best chance of being supported across all browsers that support html5 video. for further information on video formats and browser compatibility, see supported media formats. ...
...And 4 more matches

Audio and Video Delivery - Developer guides
yaudio.setattribute('src','audiofile.ogg'); } myaudio.currenttime = 5; myaudio.play(); we set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it. note: play will be ignored by most browsers unless issued by a user-initiated event. it's also possible to feed an <audio> element a base64 encoded wav file, allowing to generate audio on the fly: <audio id="player" src="data:audio/x-wav;base64,uklgrvc..."></audio> speak.js employs this technique. try the demo. javascript video var myvideo = document.createelement('video'); if (myvideo.canplaytype('video/mp4')) { myvideo.setattribute('src','videofile.mp4'); } else if (myvideo.canplaytype('video/webm')) { myvideo.setattribute('src','videofile.webm')...
...you take the stream you receive from getusermedia, pass ...
...utoplay = true; video.srcobject = stream; }) .catch(function onerror() { alert('there has been a problem retreiving the streams - are you running on file:/// or did you disallow access?'); }); } else { alert('getusermedia is not supported in this browser.'); } to find out more, read our mediadevices.getusermedia page. mediastream recording new standards are being rolled out to allow your browser to grab media from your mic or camera using getusermedia and record it instantly using the new mediarecorder api. you take the stream you receive from getusermedia, pass it to a mediarecorder object, take the resulting output and feed it to your audio or video source*. the main mechanism is outlined below: navigator.mediadevices.getusermedia({audio:true}) .then(function onsucce...
...And 4 more matches

<input type="number"> - HTML: Hypertext Markup Language
ed. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. ...
... using number inputs <input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form. ...
...idered invalid. specifying minimum and maximum values you can use the min and max attributes to specify a minimum and maximum value that the field can have. for example, let's give our example a minimum of 0, and a maximum of 100: <input type="number" placeholder="multiple of 10" step="10" min="0" max="100"> in this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. you can still manually enter a number outside these bounds, but it will be considered invalid. allowing decimal values one issue with number inputs is that their step size is 1 by default. if you try to enter a number with a decimal (such as "1.0"), it will be considered invalid. if you want to enter a value that requires decimals, you'll need to reflect this in ...
...And 4 more matches

<input type="password"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards. note: any forms involving sensitive information like passwords (e.g. login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure pa...
...ts password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password. a simple password input here we see the most basic password input, with a label established using the <label> element. ...
...enerally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password. a simple password input here we see the most basic password input, with a label established using the <label> element. ...
...And 4 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked. these provide useful hints to allow the browser to choose the most appropriate icon available. you can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> some interesting new performance and security fea...
...portscripts style <link rel=stylesheet> elements, css @import track <track> elements video <video> elements worker worker, sharedworker crossorigin this enumerated attribute indicates whether cors must be used when fetching the resource. cors-enabled images can be reused in the <canvas> element without being tainted. the allowed values are: anonymous a cross-origin request (i.e. with an origin http header) is performed, but no credential is sent (i.e. no cookie, x.509 certificate, or http basic authentication). if the server does not give credentials to the origin site (by not setting the access-control-allow-origin http header) the resource will be tainted and its usage restricted. use-credentials a cross-or...
... if the attribute is not present, the resource is fetched without a cors request (i.e. without sending the origin http header), preventing its non-tainted usage. if invalid, it is handled as if the enumerated keyword anonymous was used. ...
...And 4 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application. buffered an attribute you can read to determine the time ranges of the buffered media. this attribute contains a timeranges object. controls if this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. controlslist the controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified). the allowed values are nodownload, nofullscreen and noremoteplayback. use t...
...attribute is specified). the allowed values are nodownload, nofullscreen and noremoteplayback. use the disablepictureinpicture attribute if you want to disable the picture-in-picture mode (and the control). crossorigin this enumerated attribute indicates whether to use cors to fetch the related image. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cross-origin request without a credential. in other words, it sends the origin: http header without a cookie, x.509 certificate, or performing http basic authentication. if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted. use-credential...
... when not present, the resource is fetched without a cors request (i.e. without sending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated keyword anonymous was used. ...
...And 4 more matches

CSP: default-src - HTTP
the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may us...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 4 more matches

CSP: form-action - HTTP
as the target of a form submissions from a given context. whether form-action should block redirects after a form submission is debated and browser implementations of this aspect are inconsistent (e.g. firefox 57 doesn't block the redirects whereas chrome 63 does). csp version 2 directive type navigation directive default-src fallback no. not setting this allows anything. syntax one or more sources can be set for the form-action policy: content-security-policy: form-action <source>; content-security-policy: form-action <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 4 more matches

CSP: img-src - HTTP
the http content-security-policy img-src directive specifies valid sources of images and favicons. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the img-src policy: content-security-policy: img-src <source>; content-security-policy: img-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 4 more matches

CSP: navigate-to - HTTP
the http content-security-policy (csp) navigate-to directive restricts the urls to which a document can initiate navigations by any means including <form> (if form-action is not specified), <a>, window.location, window.open, etc. this is an enforcement on what navigations this document initiates not on what this document is allowed to navigate to. note: if the form-action directive is present, the navigate-to directive will not act on navigations that are form submissions. csp version 3 directive type navigation directive default-src fallback no. not setting this allows anything. syntax one or more sources can be set for the navigate-to policy: content-security-policy: navigate-to <source>; content-security-policy: navigate-to <source> <source>;...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 4 more matches

CSP: script-src-attr - HTTP
ly inline script event handlers like onclick, but not urls loaded directly into <script> elements. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fallback to default-src directive. ...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 4 more matches

CSP: script-src-elem - HTTP
valid sources for javascript <script> elements, but not inline script event handlers like onclick. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fallback to default-src directive. ...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 4 more matches

Feature-Policy: display-capture - HTTP
the http feature-policy header display-capture directive controls whether or not the document is permitted to use screen capture api, i.e.,getdisplaymedia() to capture the screen's contents. if display-capture is disabled in a document, the document will not be able to initiate screen capture via getdisplaymedia(). ...
... the http feature-policy header display-capture directive controls whether or not the document is permitted to use screen capture api, i.e.,getdisplaymedia() to capture the screen's contents. if display-capture is disabled in a document, the document will not be able to initiate screen capture via getdisplaymedia(). ...
... the http feature-policy header display-capture directive controls whether or not the document is permitted to use screen capture api, i.e.,getdisplaymedia() to capture the screen's contents. if display-capture is disabled in a document, the document will not be able to initiate screen capture via getdisplaymedia(). ...
...And 4 more matches

Feature-Policy: screen-wake-lock - HTTP
note: this api is still actively being developed and available only behind a flag on select browsers and platforms. the http feature-policy header screen-wake-lock directive controls whether the current document is allowed to use screen wake lock api to indicate that device should not dim or turn off the screen. note: in earlier specification drafts this directive was called wake-lock. ...
...g developed and available only behind a flag on select browsers and platforms. the http feature-policy header screen-wake-lock directive controls whether the current document is allowed to use screen wake lock api to indicate that device should not dim or turn off the screen. note: in earlier specification drafts this directive was called wake-lock. ...
...available only behind a flag on select browsers and platforms. the http feature-policy header screen-wake-lock directive controls whether the current document is allowed to use screen wake lock api to indicate that device should not dim or turn off the screen. note: in earlier specification drafts this directive was called wake-lock. syntax feature-policy: screen-wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. ...
...And 4 more matches

Content type - SVG: Scalable Vector Graphics
::= "h" | "min" | "s" | "ms" hours ::= digit+; any positive number minutes ::= 2digit; range from 00 to 59 seconds ::= 2digit; range from 00 to 59 fraction ::= digit+ timecount ::= digit+ 2digit ::= digit digit digit ::= [0-9] for timecount values, the default metric suffix is "s" (for seconds). no embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored. the following are examples of legal clock values: full clock values: 02:30:03 = 2 hours, 30 minutes and 3 seconds 50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds partial clock value: 02:33 = 2 minutes and 33 seconds 00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds timecoun...
...cal values (either three integer values or three percentage values) followed by ")". an rgb start-function is the case-insensitive string "rgb(", for example "rgb(" or "rgb(". for compatibility, the all-lowercase form "rgb(" is preferred. the integer value 255 corresponds to 100%, and to f or ff in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #fff. white space characters are allowed around the numerical values. all rgb colors are specified in the srgb color space. using srgb provides an unambiguous and objectively measurable definition of the color, which can be related to international standards. color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? | "rgb("integer, integer, integer")" | "rgb("integer "%", integer "%", integ...
... as part of the iri. an iri which includes an iri fragment identifier consists of an optional base iri, followed by a "#" character, followed by the iri fragment identifier. for example, the following iri can be used to specify the element whose id is "lamppost" within file somedrawing.svg: http://example.com/somedrawing.svg#lamppost iris are used in the xlink:href attribute. some attributes allow both iris and text strings as content. to disambiguate a text string from a relative iri, the functional notation <funciri> is used. this is simply an iri delimited with a functional notation. note: for historical reasons, the delimiters are "url(" and ")", for compatibility with the css specifications. the funciri form is used in presentation attributes . svg makes extensive use of iri referen...
...And 4 more matches

Same-origin policy - Web security
superdomain is used for same-origin checks. for example, assume a script from the document at http://store.company.com/dir/other.html executes the following: document.domain = "company.com"; afterward, the page can pass the same-origin check with http://company.com/dir/page.html (assuming http://company.com/dir/page.html sets its document.domain to "company.com" to indicate that it wishes to allow that - see document.domain for more). however, company.com could not set document.domain to othercompany.com, since that is not a superdomain of company.com. the port number is checked separately by the browser. any call to document.domain, including document.domain = document.domain, causes the port number to be overwritten with null. therefore, one cannot make company.com:8080 talk to company.
...rt number is checked separately by the browser. any call to document.domain, including document.domain = document.domain, causes the port number to be overwritten with null. therefore, one cannot make company.com:8080 talk to company.com by only setting document.domain = "company.com" in the first. it has to be set in both so their port numbers are both null. note: when using document.domain to allow a subdomain to access its parent securely, you need to set document.domain to the same value in both the parent domain and the subdomain. this is necessary even if doing so is simply setting the parent domain back to its original value. failure to do this may result in permission errors. cross-origin network access the same-origin policy controls interactions between two different origins, suc...
...ry even if doing so is simply setting the parent domain back to its original value. failure to do this may result in permission errors. cross-origin network access the same-origin policy controls interactions between two different origins, such as when you use xmlhttprequest or an <img> element. these interactions are typically placed into three categories: cross-origin writes are typically allowed. examples are links, redirects, and form submissions. some http requests require preflight. cross-origin embedding is typically allowed. (examples are listed below.) cross-origin reads are typically disallowed, but read access is often leaked by embedding. for example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resou...
...And 4 more matches

Subresource Integrity - Web security
subresource integrity (sri) is a security feature that enables browsers to verify that resources they fetch (for example, from a cdn) are delivered without unexpected manipulation. it works by allowing you to provide a cryptographic hash that a fetched resource must match. note: for subresource-integrity verification of a resource served from an origin other than the document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin. how subresource integrity helps using content delivery networks (cdns) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth. ho...
... using subresource integrity you use the subresource integrity feature by specifying a base64-encoded cryptographic hash of a resource (file) you’re telling the browser to fetch, in the value of the integrity attribute of any <script> or <link> element. an integrity value begins with at least one string, with each string including a prefix indicating a particular hash algorithm (currently the allowed prefixes are sha256, sha384, and sha512), followed by a dash, and ending with the actual base64-encoded hash. note: an integrity value may contain multiple hashes separated by whitespace. a resource will be loaded if it matches one of those hashes. example integrity string with base64-encoded sha384 hash: sha384-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxr...
...generator at https://www.srihash.org/ is an online tool you can use to generate sri hashes. ...
...And 4 more matches

widget - Archive of obsolete content
. they can be simple icons or complex web pages. you can attach panels to them that open when they're clicked, or you can define a custom click handler to perform some other action, like opening a web page in a tab. there are a few advantages to using widgets over an ad hoc user interface. first, your users will be accustomed to interacting with add-ons via widgets and the add-on bar. second, it allows firefox to treat your interface as a first-class citizen. for example, in the future firefox may allow the user to drag widgets from the add-on bar to other toolbars. by exposing your interface as a widget, your add-on would automatically inherit such functionality. creation and content widgets can contain images or arbitrary web content. you can include this content inline as a string by usin...
...lude this to listen to the widget's mouseover event. onmouseout function include this to listen to the widget's mouseout event. onattach function include this to listen to the widget's attach event. tooltip string optional text to show when the user's mouse hovers over the widget. if not given, the label is used. allow object an optional object describing permissions for the content. it should contain a single key named script whose value is a boolean that indicates whether or not to execute script in the content. script defaults to true. contentscriptfile string,array a local file url or an array of local file urls of content scripts to load. content scripts specified by this...
...tains. messages sent from the content script will no longer be received by the main add-on code, and vice versa. this issue is currently tracked as bug 825434. panel a panel to open when the user clicks on the widget. width the widget's width in pixels. setting it updates the widget's appearance immediately. tooltip the text of the tooltip that appears when the user hovers over the widget. allow a object describing permissions for the content. it contains a single key named script whose value is a boolean that indicates whether or not to execute script in the content. contentscriptfile a local file url or an array of local file urls of content scripts to load. contentscript a string or an array of strings containing the texts of content scripts to load. contentscriptwhen when to l...
...And 3 more matches

Intercepting Page Loads - Archive of obsolete content
e load event. this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window. it is full of useful functions, so you should always keep it in mind when you want to handle tabs and web content windows. attaching the load event handler to gbrowser allows us to listen to these events for all tabs, without having to worry how many tabs are open. gbrowser exists in every browser window. we store the handler function in a private variable because later we want to remove it when we do not need it anymore. gbrowser.removeeventlistener("load", this._loadhandler, true); finally, the actual code for the handler, which is very simple: _onpageload : fu...
...to keep your observer code in non-chrome objects (your xpcom service or jsm module). otherwise you have to make sure to avoid duplicated work if you have 2 or more windows open. there are 2 http topics you can listen to, as specified in the observer notifications page: topic description http-on-modify-request called as an http request is made. the channel is available to allow you to modify headers and such. http-on-examine-response called after a response has been received from the webserver. headers are available on the channel. the subject argument on the observe method is the nsihttpchannel object that corresponds to the http channel being opened or already opened, depending on the topic. observe : function(asubject, atopic, adata) { if (topic...
...leaks. there are a couple of things left to do: implementing the progress listener methods, and figuring out what notify_all is about. for that, we recommend that you first read the documentation on nsiwebprogresslistener and the nsiwebprogress.constants (webprogress notify constants). in a nutshell, there are a lot of state and status changes going on when a page loads, and the notify constants allow you to filter out the events you don't need to listen to. picking the right filter not only simplifies your code, but also reduces the performance impact your extension will have in regular navigation. here are a couple of common use cases and the ways to implement them with web progress listeners: if you want simple detection and filtering like in the page load events, you can use onlocation...
...And 3 more matches

Modularization techniques - Archive of obsolete content
= 0; }; the ns_imethod and ns_imethod_(type) macros are basically shorthand for virtual nsresult and virtualtype. on windows they expand to virtual nsresult __stdcall and virtual type __stdcall for com compatibility reasons. you don't have to use them in your interfaces unless you're concerned with com compatibility. all mozilla interfaces inherit from nsisupports. inheriting from nsisupports allows any interface to be interrogated about other interfaces that its instance may support, and insures that reference counting facilities are always available. the iid for nsisupports is defined as ns_isupports_iid. queryinterface() has several important characteristics that must be maintained. if you perform a queryinterface() on interface a and obtain interface b, you must be able to perform a qu...
...en though interface b inherits from nsisupports, performing a queryinterface() on it may not return the same interface. this important behavior is the only reliable mechanism for determining whether interfaces a and b are implemented by the same object.for simple objects, maintaining these behaviors is easy. aggregation, as we will see later, can complicate things. on the other hand, objects are allowed a certain degree of flexibility in their implementations of addref() and release(). they can maintain a single reference count for the entire object, or individual reference counts for each interface. a static object would chose to ignore reference counts altogether. however, a poor implementation of these functions can have negative results, such as memory leaks or inadvertent access of freed ...
... const nsiid &aiid, void **aresult) = 0; ns_imethod lockfactory(prbool alock) = 0; the reason for using factories is that it provides a mechanism for creating an object without having access to the class declaration for that object. calling new foo() requires that at compile time you have access to the class declaration of foo(). a factory allows an implementor to hide both the class declaration and creation details of an object, an extremely important step for allowing maximum flexibility in the implementation of a class and reducing compile time dependencies. it can even be used to eliminate all link time dependencies on the class and its factory entirely. the component manager one of the major goals of our modularization is to remov...
...And 3 more matches

URIs and URLs - Archive of obsolete content
warning: the content of this article may be out of date. it was last updated in 2002. overview handling network and locally retrievable resources is a central part of necko. ...
...ed in 2002. overview handling network and locally retrievable resources is a central part of necko. ...
... resource a resource can be anything that has identity. familiar examp...
...And 3 more matches

XUL accessibility guidelines - Archive of obsolete content
ssible operations. the column picker and column headers in xul trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. it is therefore necessary to provide a keyboard accessible alternative for accessing this functionality. the firefox "bookmarks manager" provides an example of how to make trees more accessible. the bookmark manager allows users to sort bookmarks by a particular column of information and choose which columns to display. because column headers and the column picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a keyboard. in the bookmark manager this functionality is available under the view menu which is accessible to a keyboard user. toolbarbuttons by default, to...
...ng or information to the user. some users may override the default color scheme of your application. color should only be used to enhance the meaning of an object or text after that meaning is also communicated another way. flexible sizing one of the great things about xul is that visual layout is easy to control. on the web, visual design is often contained to a specific size. with xul you can allow elements to flex with the resizing of the application window. use the flex attribute to provide this functionality. testing display verify that your application is functional and pleasant looking using user-defined font and color settings. do this by changing system display settings to an accessible theme (such as the high-contrast theme on windows, available via left-alt + left-shift + printsc...
...ndows, available via left-alt + left-shift + printscreen). confirm that text is emphasized correctly and that color is not used as a sole means to convey meaning. ensure that when windows are resized, the application adjusts gracefully. human computer interaction as you use an application you expect a certain amount of control and feedback. provide users with clear instruction and feedback, and allow users to correct errors. some users with disabilities have difficulties with quick responses. allow users adequate time to perform tasks. instruction provide users with help documentation. even simple applications should include a help document or manual for user reference. describe keyboard shortcuts and any other accessibility considerations. users should be able to reference a complete descr...
...And 3 more matches

tabbrowser - Archive of obsolete content
, replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents. the progress listener should implement the nsiwebprogresslistener interface. addtab( url, referreruri, charset, postdata, owner, allowthirdpartyfixup ) addtab( url, {referreruri: ..., charset: ..., postdata: ..., owner: ..., allowthirdpartyfixup: ..., relatedtocurrent: ... }) return type: tab element opens a new tab that loads a page with the specified url. the rest of the parameters are optional. the row of tabs will appear if needed. firefox 3.6 note the second form of this method was added in firefox 3.6; it allo...
...rowser.tabs.loadgroup. the argument should be an array of objects, one for each document to load. the objects may be defined in script and contain a uri property for the url of the page to load. a referreruri property may also be optionally used to set the referrer page. this function returns a reference to the first tab loaded. ...
... may be defined in script and contain a uri property for the url of the page to load. a referreruri property may also be optionally used to set the referrer page. this function returns a reference to the first tab loaded. loadonetab( url, referreruri, charset, postdata, loadinbackground, allowthirdpartyfixup ) loadonetab( url, { referreruri: ..., charset: ..., postdata: ..., inbackground: ..., allowthirdpartyfixup: ..., relatedtocurrent: ... }) return type: tab element opens a new tab that loads a page with the specified url. the rest of the parameters are optional. this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background. there's also no owner parameter as the owner tab is specified au...
...And 3 more matches

textbox - Archive of obsolete content
d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused ...
...ibute is true if the element is focused. emptytext deprecated since gecko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the placeholder attribute in gecko 2.0. the old name is retained for compatibility, but you should update your code. hidespinbuttons type: boolean if true, the number box does not have arrow buttons next to it to allow the user to adjust the value. the value may still be adjusted with the keyboard. the default value is false. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. label type: string if present and not empty, this w...
...dragged). the default value is 1. label type: string if present and not empty, this will be exposed to screen readers through the label property. type: integer the maximum value that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. maxlength type: integer the maximum number of characters that the textbox allows to be entered. min type: integer the minimum value the textbox's value may take. the default value is 0. multiline type: boolean if true, the textbox displays multiple lines. if the user presses enter, a new line is started. if false, the textbox only allows entry of one line. newlines type: one of the values below how the text box handles pastes with ne...
...And 3 more matches

RDF in Mozilla FAQ - Archive of obsolete content
of statements ("microtheories") together. statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular website comes from the "browser global history" datasource, and the "shortcut keyword" that you can type to reach that website comes from the "browser bookmarks" datasource. both datasources refer to "website" by url: this is the "key" that allows the datasources to be "merged" effectively. for a more detailed account of how to write a datasource, refer to the rdf datasource how-to. how does mozilla manage datasources? the rdf service manages a table of all loaded datasources. the table is keyed by the datasource's "uri", which is either the url of an rdf/xml file, or a "special" uri starting with rdf: that refers to a built-in datasou...
...asn't loaded, but it's loading now!"); } say the datasource wasn't loaded, and is loading asynchronously. using this api and javascript's settimeout(), one could set up a polling loop that would continually check the loaded property. this is kludgy, and even worse, won't detect a failed load, for example, if there wasn't any data at the url! for this reason, there is an observer interface that allows you to spy on a datasource's progress. the following code illustrates its usage: // this is the object that will observe the rdf/xml load's progress var observer = { onbeginload: function(asink) {}, oninterrupt: function(asink) {}, onresume: function(asink) {}, onendload: function(asink) { asink.removexmlsinkobserver(this); alert("done!"); }, onerro...
...l datasources together as a collective. because the nsirdfcompositedatasource interface is derived from nsirdfdatasource, it can be queried and modified just like an individual data source. how do i access "built-in" datasources? a built-in datasource is a locally-installed component that implements nsirdfdatasource. for example, the bookmarks service. first, check here to make sure you will be allowed to access a built-in datasource. there are several security restrictions on accessing built-in datasources from "untrusted" xul and js. since a built-in datasource is just an xpcom component, you can instantiate it directly using the xpconnect component manager. // use the component manager to get the bookmarks service var bookmarks = components. classes["@mozilla.org/rdf/datasource;1?nam...
...And 3 more matches

HTML: A good basis for accessibility - Learn web development
that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document. <br><br> i'll add another paragraph here too. <br><br> 1. here is <br><br> 2. a list for <br><br> 3. you to read <b...
...s, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements. the focused elements are given a highlighted default style in every browser (it differs slightly betwe...
...this is nearly always a bad idea, as it can cause major confusion. use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. t...
...And 3 more matches

HTML: A good basis for accessibility - Learn web development
that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document. <br><br> i'll add another paragraph here too. <br><br> 1. here is <br><br> 2. a list for <br><br> 3. you to read <b...
...s, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements. the focused elements are given a highlighted default style in every browser (it differs slightly betwe...
...this is nearly always a bad idea, as it can cause major confusion. use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. t...
...And 3 more matches

Fundamental text and font styling - Learn web development
ry, before carrying on. the css properties used to style text generally fall into two categories, which we'll look at separately in this article: font styles: properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether 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 (...
...way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. the browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. a simple example looks like so: p { font-family: arial; } this would make all paragraphs on a page adopt the arial font, which is found on any compute...
...is font — it isn't widely available on mobile oses. verdana sans-serif note: among various resources, the cssfontstack.com website maintains a list of web safe fonts available on windows and macos operating systems, which can help you make your decision about what you consider safe for your usage. note: there is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. this is a little bit more complex, and we will be discussing this in a separate article later on in the module. default fonts css defines five generic names for fonts: serif, sans-serif, monospace, cursive and fantasy. those are very generic and the exact font face used when using those generic names is up to each browser and ca...
...And 3 more matches

What are browser developer tools? - Learn web development
ars. (an added bonus: this method straight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot. this tool shows what the html on your page looks like at runtime, as well as what css is applied to each element on the page. it also allows you to instantly modify the html and css and see the results of your changes reflected live in the browser viewport. if you don't see the inspector, tap/click the inspector tab. in internet explorer, tap/click dom explorer, or press ctrl + 1. in microsoft edge, or opera, tap/click elements. in safari, the controls are not so clearly presented, but you should see the html if you haven't ...
...urrent element. edit as html (sometimes add attribute/edit text). lets you change the html and see the results on the fly. very useful for debugging and testing. :hover/:active/:focus. forces element states to be toggled on, so you can see what their styling would look like. copy/copy as html. copy the currently selected html. some browsers also have copy css path and copy xpath available, to allow you to copy the css selector or xpath expression that would select the current html element. try editing some of your dom now. double-click an element, or right-click it and choose edit as html from the context menu. you can make any changes you'd like, but you cannot save your changes. exploring the css editor by default, the css editor displays the css rules applied to the currently selecte...
...ted styles for the currently selected element (the final, normalized values that the browser applies). layout: in firefox, this area includes two sections: box model: represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is. ...
...And 3 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
, discusses what they are useful for, and considers their inherent issues. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand asynchronous loops and intervals and what they are useful for. introduction for a long time, the web platform has offered javascript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop. these functions are: settimeout() execute a specified block of code once after a specified time has elapsed. setinterval() execute a specified block of code repeatedly with a fixed time delay between each call. requestanimationf...
...chronously until you tell it to stop. these functions are: settimeout() execute a specified block of code once after a specified time has elapsed. setinterval() execute a specified block of code repeatedly with a fixed time delay between each call. requestanimationframe() the modern version of setinterval(). executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in. the asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed). it's important to know that you can (and often will) run other code before a settimeout() call executes, or between iterations of setinterval(). depending on how processor-intensiv...
...ting = settimeout(sayhi, 2000, 'mr. universe'); clearing timeouts finally, if a timeout has been created, you can cancel it before the specified time has elapsed by calling cleartimeout(), passing it the identifier of the settimeout() call as a parameter. so to cancel our above timeout, you'd do this: cleartimeout(mygreeting); note: see greeter-app.html for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (see the source code also). setinterval() settimeout() works perfectly when you need to run code once after a set period of time. but what happens when you need to run the code over and over again—for example, in the case of an animation? this is where setinterval() comes in. this w...
...And 3 more matches

Drawing graphics - Learn web development
previous overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl). this article provides an introduction to canvas, and further resources to allow you to learn more. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn the basics of drawing on <canvas> elements using javascript. graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via ...
... with some of the other apis the web platform provides. the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–2007, mozilla started work on an experimental 3d canvas implementation. this became webgl, which gained traction among browser vendors, and was standardized around 2009–2010. webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex. we will however show how to use a webgl library to create a 3d scene more easily, and you can find a tutorial covering raw webgl elsewhere — see getting started with webgl. note: basic canvas functiona...
...equal to window.innerwidth (which gives us the viewport width). in the third line we set both a new constant height and the canvas' height property equal to window.innerheight (which gives us the viewport height). so now we have a canvas that fills the entire width and height of the browser window! you'll also see that we are chaining assignments together with multiple equals signs — this is allowed in javascript, and it is a good technique if you want to make multiple variables all equal to the same value. we wanted to make the canvas width and height easily accessible in the width/height variables, as they are useful values to have available for later (for example, if you want to draw something exactly halfway across the width of the canvas). if you save and load your example in a ...
...And 3 more matches

Getting started with React - Learn web development
...
...re 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 the multiple lines of code inside are part of the same expression. you could ...
...nity think that the readability of jsx is worthwhile. plus, popular tooling makes the jsx-to-javascript compilation part of its setup process. you don't have to configure compilation yourself unless you want to. because jsx is a blend of html and javascript, some developers find it intuitive. others say that its blended nature makes it confusing. once you're comfortable with it, however, it will allow you to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance. to read more about jsx, check out the react team's jsx in depth article. setting up your first react app there are many ways to use react, but we're going to use the command-line interface (cli) tool create-react-app, as mentioned earlier, which expedites the process of d...
...And 3 more matches

Handling common accessibility problems - Learn web development
, then restart the browser. click the gear icon that will appear, then select css > disable all styles. edge: select view > style > no style from the main menu. using native keyboard accessibility certain html features can be selected using only the keyboard — this is default behavior, available since the early days of the web. the elements that have this capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>. you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted def...
... elements), but some browsers have their own idiosyncracies: firefox for the mac doesn't do tabbing by default. to turn it on, you have to go to preferences > advanced > general, then uncheck "always use the cursor keys to navigate within pages". next, you have to open your mac's system preferences app, then go to keyboard > shortcuts, then select the all controls radio button. safari doesn't allow you to tab through links by default; to enable this, you need to open safari's preferences, go to advanced, and check the press tab to highlight each item on a webpage checkbox. important: you should perform this kind of test on any new page you write — make sure the functionality can be accessed by the keyboard. this example highlights the importance of using the correct semantic element ...
...cessibility sometimes it is not possible to avoid losing keyboard accessibility. you might have inherited a site where the semantics are not very good (perhaps you've ended up with a horrible cms that generates buttons made with <div>s), or you are using a complex control that does not have keyboard accessibility built in, like the html5 <video> element (amazingly, opera is the only browser that allows you to tab through the <video> element's default browser controls). you have a few options here: create custom controls using <button> elements (which we can tab to by default!) and javascript to wire up their functionality. see creating a cross-browser video player for some good examples of this. create keyboard shortcuts via javascript, so functionality is activated when you press certain ...
...And 3 more matches

Setting up your own test automation environment - Learn web development
run your tests. most popular environments have available a package or framework that will install webdriver and the bindings required to communicate with webdriver using this language, for example, java, c#, ruby, python, javascript (node), etc. see setting up a selenium-webdriver project for more details of selenium setups for different languages. different browsers require different drivers to allow webdriver to communicate with and control them. see platforms supported by selenium for more information on where to get browser drivers from, etc. we will cover writing and running selenium tests using node.js, as it is quick and easy to get started, and a more familiar environment for front end devs. note: if you want to find out how to use webdriver with other server-side environments, also...
...ront end devs. note: if you want to find out how to use webdriver with other server-side environments, also check out platforms supported by selenium for some useful links. setting up selenium in node to start with, set up a new npm project, as discussed in setting up node and npm in the last chapter. call it something different, like selenium-test. next, we need to install a framework to allow us to work with selenium from inside node. we are going to choose selenium's official selenium-webdriver, as the documentation seems fairly up-to-date and it is well-maintained. if you want different options, webdriver.io and nightwatch.js are also good choices. to install selenium-webdriver, run the following command, making sure you are inside your project folder: npm install selenium-webdriv...
...d choices. to install selenium-webdriver, run the following command, making sure you are inside your project folder: npm install selenium-webdriver note: it is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. you should make sure that everything is up-to-date. next, you need to download the relevant drivers to allow webdriver to control the browsers you want to test. you can find details of where to get them from on the selenium-webdriver page (see the table in the first section.) obviously, some of the browsers are os-specific, but we're going to stick with firefox and chrome, as they are available across all the main oses. download the latest geckodriver (for firefox) and chromedriver drivers. unpack t...
...And 3 more matches

CSUN Firefox Materials
ard support in the industry via gok, the gnome onscreen keyboard. basic screen reader accessibility is available via gnopernicus or the fire vox extension. keyboard support "mozilla firefox is a web-browser with superior keyboard support. " - alan cantor, cantor access consulting (http://www.cantoraccess.com) firefox includes keyboard access to all of its amazing features: find as you type allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification users because there is a single point of regard for the search. it also assists users of input aids because there are far fewer keys to type to get the desired location. for example, it is possible to navigate to the desired link by pressing 2 letter keys ...
...the f7 key toggles this feature on/off. ...
...the f7 key toggles this feature on/off. ...
...And 3 more matches

Embedding API for Accessibility
la accessibility community. mozilla needs to move in the direction of accessibility. here is the w3c's definition of accessibility for a user agent like mozilla. in part, being accessible means supporting a built-in accessibility apis for a platform, such as microsoft active accessibility or atk for linux and unix desktops. there are many other pieces, such as preferences to allow the user to change foreground and background colors, and font sizes. mozilla already supports some of these options. this document lays out what we already have, and what we'll need later, in the embedding api to support accessibility. text zoom on a per-window basis the nsidomwindow::gettextzoom(float *zoomfactor) and nsidomwindow::settextzoom(float zoomfactor) methods can be used to set a w...
...dfile); /* these alerts will also be mirrored visually, either on the status bar or elsewhere */ no background images setboolpref("browser.accept.background_images", acceptbackgroundimages); no blinking text setboolpref("browser.blink_allowed", acceptblinktext); no animations setcharpref("image.animation_mode", animationmode); animationmode: "normal", "none", "once" moz 0.8 applets setboolpref("browser.accept.applets", acceptapplets); no ...
...", acceptaudio); no timed events setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard focus setboolpref("keyboardnav.mouse_follows_keyboard_focus", mousefollows); /* if this pref is set, the mouse pointer will always be move to the 0,0 pixel of the cur...
...And 3 more matches

Multiple Firefox profiles
tomizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox. you can find details about profiles on mozilla's end-user support site. reasons to have multiple profiles the casual user may want to have different profiles for work and personal use, or different family members. having different profiles would help separate work and personal life, or allow each family member to have his or her own set of bookmarks, settings, and add-ons. web developers might want a secondary profile for testing websites, apps, or other projects on different firefox channels. for example, you might want to have some extensions installed for web development, but not for general-purpose web browsing. while using the nightly channel, you may encounter some add-ons tha...
...in the profile manager, select the profile to remove, and click delete profile.... confirm that you wish to delete the profile: don't delete files removes the profile from the profile manager yet retains the profile data files on your computer in the storage folder so that your information is not lost. "don't delete files" is the preferred option, because it saves the old profile's folder, allowing you to recover the files to a new profile. delete files removes the profile and its files, including the profile bookmarks, settings, passwords, etc. warning: if you use the "delete files" option, the profile folder, and files will be deleted. this action cannot be undone. cancel interrupts the profile deletion. renaming a profile in the profile manager, select t...
... note: the folder containing the files for the profile is not renamed. options work offline choosing this option loads the selected profile, and starts firefox offline. you can view previously viewed web pages, and experiment with your profile. don't ask at startup if you have multiple profiles, firefox prompts you for the profile to use each time you start firefox. select this option to allow firefox to load the selected profile, without prompting at startup. note: to access other profiles after selecting this option, you must start the profile manager first. using the profiles windows if you want to have the profile manager to pop up each time you start firefox, so you can choose a profile, you will need to edit the "target" of the launch icon. to do this: right-click the ic...
...And 3 more matches

Frame script loading and lifetime
the loadframescript() function. this line of code loads a frame script into the currently selected tab. the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a window message manager, loadframescript() may load the script multiple times, once in each applicable frame. chrome: urls extension developers usually use a chrome:// url to refer to the frame scripts. to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manife...
... chrome: urls extension developers usually use a chrome:// url to refer to the frame scripts. to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e10s-extension/content/content.js", true); allowdelayedload if the message manager is a global frame message manager or a window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call. for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded i...
...age manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call. for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded into all tabs currently open in this window, and all new tabs opened afterwards. if allowdelayedload is false, the script will only be loaded into frames which are open when the call was made. if the message manager is a browser message manager, you should always pass true here. because a browser message manager only corresponds to a single browser tab, its loadframescript() function will only ever load the frame script into that one tab. ...
...And 3 more matches

Browser API
it currently works in (privileged) chrome code on firefox desktop (version 47 and above). browser api concepts and usage the browser api consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content. this means that window.top, window.parent, window.frameelement, etc. should not reflect the frame hierarchy. ...
... includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface. browser api interfaces to support the requirement of a browser <iframe>, the htmliframeelement dom interface has been extended with new methods that give the <iframe> some super powers. navigation methods the following navigation methods allow navigation through the browsing history of the <iframe>. they are necessary to be able to implement back, forward, stop, and reload buttons. htmliframeelement.reload() allows reloading of the <iframe> element content. htmliframeelement.stop() allows stopping of the <iframe>'s content loading. htmliframeelement.getcangoback() indicates whether it's possible to navigate backwards. htmlifra...
...tmliframeelement.getvisible() indicates the current visibility state of the browser <iframe>. htmliframeelement.setactive() sets the current <iframe> as the active frame, which has an effect on how it is prioritized by the process manager. htmliframeelement.getactive() indicates whether the current browser <iframe> is the currently active frame. audio-related methods the following methods allow direct control of sound in the browser element. htmliframeelement.getvolume() gets the current volume of the browser <iframe>. htmliframeelement.setvolume() sets the current volume of the browser <iframe>. htmliframeelement.mute() mutes any audio playing in the browser <iframe>. htmliframeelement.unmute() unmutes any audio playing in the browser <iframe>. htmliframeelement.getmuted() ...
...And 3 more matches

Internationalized Domain Names (IDN) Support in Mozilla Browsers
introduction netscape 7.1 is the first commercial browser that has built-in support for internationalized domain name under the new ietf rfc's established in 2003. an internationalized domain name (idn) is a domain/host name which uses non-ascii characters. until recently domain names allowed only a subset of 7-bit ascii characters. as the internet has spread to non-english speaking people around the world, it has become increasingly clear that forcing them to use domain names written only in a subset of the latin alphabet is not ideal. many of the european languages use the basic latin alphabet with additional accented characters for writing but they were not able to use them in domain names. there are many languages whose writing scripts are not based on latin alphabet at all. spea...
...ng non-ascii characters in domain names. how idn works when a browser sees a host name such as http://developer.mozilla.org, it passes a request to the dns resolver service (usually built into an os), which in turn sends a request to a nearest domain name server to return an ip address that corresponds to the host name. this ip address is then used to connect to the web server in question. idn allows host/domain names with non-ascii characters for user input into a browser's location bar or url's embedded in web pages. at the network protocol level, there is no change in the restriction that only a subset of ascii characters be used in url/uri. if end users input non-ascii characters as part of a domain name or if a web page contains a link using a non-ascii domain name, the application must...
...uppercase characters to lowercase ones (case folding), unify characters with multiple representation, e.g. conversion of half-width kana characters in japanese into full-width ones (normalization), eliminate prohibited characters (e.g. space), eliminate ambiguities in bi-directional text (e.g. arabic and hebrew), and check whether or not unassigned characters in the unicode repertoire are used -- allowing them for "query strings" but disallowing them for "stored strings" such as the data input for domain name registration. this process is called "nameprep" and is performed according to rfc 3491 (nameprep: a stringprep profile for internationalized domain names (idn)) and rfc 3454 (preparation of internationalized strings ("stringprep")). ascii-compatible encoding (ace) the next step is to co...
...And 3 more matches

Creating localizable web applications
et 2. good: require_once('templates/footer.php'); if it's not possible to remove the app logic code, you should consider using gettext. gettext extracts localizable content form the source files, thus making it impossible for localizers to accidentally change them. you can learn more about the choice of the format for your project at file formats. text messages don't hardcode english content allow localizers to localize english content, such as: text messages, number formats, date formats, word order and sentence structure. note that some strings might be hidden in libraries' code (e.g. error messages), or in javascript libraries and scripts. if you are using pure html instead of gettext to localize your webapp, consider using an additional gettext-like format such as .lang to str...
...<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. for this reason, it is better to leave the <strong/> html tags inside the gettext function call and take advantage of the printf() variable that will be substituted by the date upon interpretation of the code (snippet 3). snippet 4. good: <h3> <?printf( /* l10n: ...
...%s is a date */ _("<strong>added:</strong> %s"), $persona['date']);?></p> snippet 5. bad: printf(_("%1$s by %2$s"), $persona['name'], $persona['display_username']); snippet 6. good: // %1$s is persona name, %2$s is athor's username printf(_("%1$s by %2$s"), $persona['name'], $persona['display_username']); use printf variables swapping use printf() ordered variables (%1$s, %2$s, etc.) to allow changes to the order of the sentence. some languages may require this. remember to use single quotes around the strings containing the formatting symbols. otherwise, php will treat $s as a regular variable, instead of parsing the whole %1$s formatting symbol. snippet 1. bad: $page_header = $persona['name'] . ' by ' . $persona['display_username']; snippet 2. better: printf(_("%s by %s"), $pers...
...And 3 more matches

NSS 3.12.6 release notes
and shared libraries, which nss 3.12.6 requires. nspr 4.8.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.8.4/. new in nss 3.12.6 ssl3 & tls renegotiation indication extension (rfc 5746) by default, nss 3.12.6 uses the new tls renegotiation indication extension for tls renegotiation but allows simple ssl/tls connections (without renegotiation) with peers that don't support the tls renegotiation indication extension. the behavior of nss for renegotiation can be changed through api function calls, or with the following environment variables: nss_ssl_enable_renegotiation values: [0|n|n]: ssl_re...
...peers that don't support the tls renegotiation indication extension. the behavior of nss for renegotiation can be changed through api function calls, or with the following environment variables: nss_ssl_enable_renegotiation values: [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5 release. [1|u|u]: ssl_renegotiate_unrestricted server and client are allowed to renegotiate without any restrictions. this setting was the default prior 3.12.5 and makes products vulnerable. [2|r|r]: ssl_renegotia...
... [1|u|u]: ssl_renegotiate_unrestricted server and client are allowed to renegotiate without any restrictions. this setting was the default prior 3.12.5 and makes products vulnerable. [2|r|r]: ssl_renegotiate_requires_xtn (default) only allows renegotiation if the peer's hello bears the tls renegotiation_info extension. this is the safe renegotiation. [3|t|t]: ssl_renegotiate_transitional disallows unsafe renegotiation in server sockets only, but allows clients to continue to renegotiate with vulnerable servers. this value should only be used during...
...And 3 more matches

JIT Optimization Strategies
ovide, what kind of program characteristics can prevent them from being used, and common ways to enable the engine to utilize that optimization. getproperty getproperty_argumentslength attempts to optimize an arguments.length property access. this optimization only works if the arguments object is used in well-understood ways within the function. the function containing the arguments.length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions. call a function...
...ization will be suppressed. in particular, arguments cannot be returned from the function, or passed as an argument into calls (except for the apply case above). getprop_argumentscallee attempts to optimize an arguments.callee property access. this optimization only works if the arguments object is used in well-understood ways within the function. the function containing the arguments.callee is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions. call a function...
...e cpu-level load instruction. function someconstructor() { this.x = 10; // x is a definite slot property this.y = 10; // y is a definite slot property somecomplicatedfunctioncall(); this.z = 20; // z is not a definite slot property. } in the above example, the properties x and y can always be determined to exist on any instance of someconstructor at definite locations, allowing the engine to infer deterministically the position of x without a shape guard. this optimization can fail for a number of reasons. if the types observed at the property access are polymorphic (more than one type), this optimization cannot succeed. furthermore, even if the object type is monomorphic, the optimization will fail if the property being accessed is not a definite slot as described ...
...And 3 more matches

Mozilla internal string guide
en. nsastring/nsacstring: the abstract base class for all strings. it provides an api for assignment, individual character access, basic manipulation of characters in the string, and string comparison. this class corresponds to the xpidl astring parameter type. nsastring is not necessarily null-terminated. nsstring/nscstring: builds on nsastring by guaranteeing a null-terminated storage. this allows for a method (.get()) to access the underlying character buffer. the remainder of the string classes inherit from either nsastring or nsstring. thus, every string class is compatible with nsastring. since every string derives from nsastring (or nsacstring), they all share a simple api. common read-only methods: .length() - the number of code units (bytes for 8-bit string classes and char16...
...wn its buffer. it is useful for converting a raw string (const char16_t* or const char*) into a class of type nsastring. note that you must null-terminate buffers used by to nsdependentstring. if you don't want to or can't null-terminate the buffer, use nsdependentsubstring. nsprintfcstring- derived from nscstring, this string behaves like an nsautocstring. the constructor takes parameters which allows it to construct a 8-bit string from a printf-style format string and parameter list. there are also a number of concrete classes that are created as a side-effect of helper routines, etc. you should avoid direct use of these classes. let the string library create the class for you. nssubstringtuple - created via string concatenation nsdependentsubstring - created through substring nspromi...
...ing beginwriting() to make a string longer is not ok. beginwriting() must not be used to write past the logical length of the string indicated by endwriting() or length(). calling setcapacity() before beginwriting() does not affect what the previous sentence says. to make the string longer, call setlength() before beginwriting() or use the bulkwrite() api described below. bulk write bulkwrite() allows capacity-aware cache-friendly low-level writes to the string's buffer. capacity-aware means that the caller is made aware of how the caller-requested buffer capacity was rounded up to mozjemalloc buckets. this is useful when initially requesting best-case buffer size without yet knowing the true size need. if the data that actually needs to be written is larger than the best-case estimate but s...
...And 3 more matches

nsIProtocolHandler
netwerk/base/nsiprotocolhandler.idlscriptable this interface is used to implement protocol handlers. if you wish to create a new protocol handler, you need to implement this interface. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean allowport(in long port, in string scheme); nsichannel newchannel(in nsiuri auri); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description defaultport long the default port is the port the protocol uses by default. if the protocol doesn't need a port (for example, the "about" protocol), this attribute is -1. read only. protocolflags unsi...
...urity_context 1<<4 uris for this protocol have no inherent security context, so documents loaded using this protocol should inherit the security context of the document that loads them. uri_forbids_automatic_document_replacement 1<<5 "automatic" loads that would replace the document (such as a meta refresh, certain types of xlinks, and other non-user-triggered loads) are not allowed if the originating uri has this protocol flag. keep in mind that the decision of what constitutes an automatic load is made externally, by the caller of nsiscriptsecuritymanager.checkloaduri(). typically, this flag is used by protocols that show highly untrusted content in a viewing area that the user expects to have a lot of control over, such as an email reader. uri_loadable_by_anyo...
...he uris for this protocol refer to resources that are part of the application's user interface. there are cases in which such resources may be made accessible to untrusted content such as web pages, so this is less restrictive than uri_dangerous_to_load but more restrictive than uri_loadable_by_anyone. uri_is_local_file 1<<9 uris for this protocol from other origins should only be allowed if those origins should have access to the local file system. it's up to the application to decide what origins should have such access. protocols like file that point to local data should set this flag. uri_loadable_by_subsumers 1<<14 the uris for this protocol can be loaded only by callers with a principal that subsumes this uri. for example, privileged code and websites that ...
...And 3 more matches

nsISelectionPrivate
er); void endbatchchanges(); void getcachedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only! nsienumerator getenumerator(); nsframeselection getframeselection(); native code only! void getrangesforinterval(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results); void getrangesforintervalarray(in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results); native code only! void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomno...
... array, size_is(resultcount)] out nsidomrange results); void getrangesforintervalarray(in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results); native code only! void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results); native code only! obsolete since gecko 12.0 long gettableselectiontype(in nsidomrange range); void removeselectionlistener(in nsiselectionlistener listenertoremove); void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native c...
...e only!getframeselection nsframeselection getframeselection(); parameters none. return value a reference to the frame selection associated with this selection. getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. resultcount returns th...
...And 3 more matches

Getting Started Guide
ir parents. it turns out that reference counting by hand is hard for programmers to get right. it may sound simple, but in practice it's very easy to forget to release at the appropriate moment. or to addref too many or too few times. how does nscomptr help? nscomptr manages addref, release, and other red-tape for you. an nscomptr looks and acts as much like a raw xpcom interface pointer as c allows, but it knows it owns the object it points to. this takes a little getting used to on your part, but ends up with less typing, clearer, safer code, and less leaks. for instance, here is a typical snippet of code (at its most compact) where you assign a xpcom interface pointer into a member variable, i.e., the body of a `setter' function, side-by-side using raw xpcom interface pointers and nscom...
...o* fooptr = 0; // ... fooptr->somefunction(x, y, z); anotherfunction(fooptr); if ( fooptr ) // ... if ( fooptr == foo2ptr ) // ... // |nscomptr|... nscomptr<nsifoo> fooptr; // ... fooptr->somefunction(x, y, z); anotherfunction(fooptr); if ( fooptr ) // ... if ( fooptr == foo2ptr ) // ... there are two main differences. first: you no longer need, nor are you allowed, to call addref or release. comparison 3. differences: addref and release are illegal for nscomptrs. // raw xpcom interface pointers... // given: |nsifoo* mfooptr;| /* note: this sequence is not the correct order to do assign raw pointers anyway (see comparison 1) but i need it for this comparison. */ ns_if_release(mfooptr); mfooptr = afooptr; ns_if_a...
...; nscomptr happily calls addref and release implicitly. this same favor is not extended to queryinterface. nscomptr does not queryinterface on assignment without your explicit permission in the form of the do_queryinterface directive. you need never worry about hidden queries. however, be aware that if you should have queried but didn't, e.g., when assigning in a raw pointer where c++ allows the assignment, but xpcom wouldn't, nscomptr will assert at runtime. use do_queryinterface whenever you assign in a pointer to a xpcom interface of a different type, even if that type happens to derive from the base type of the nscomptr comparison 6. do_queryinterface prevents xpcom type errors. class nsibar : public nsifoo ... { ... }; nsibar* p = ...; // c++ thinks every...
...And 3 more matches

XPIDL
nsiidref const nsiid& nsiid* ? nscidref const nscid& nscid* ? nsidptr const nsid* nsid** ? nsiidptr const nsiid* nsiid** ? ns...
... nsiidref const nsiid& nsiid* ? nscidref const nscid& nscid* ? nsidptr const nsid* nsid** ? nsiidptr const nsiid* nsiid** ? nscidptr const nscid* nscid** ? nsi...
... nsiidref const nsiid& nsiid* ? ...
...And 3 more matches

Autoconfiguration in Thunderbird
send their mail as securely as possible. see also: for instructions for users, see automatic account configuration on the thunderbird knowledge base. ...
... it was added because we cannot assume that all big isps (including microsoft) will set up a configuration server for thunderbird. ...
...rovide their configuration information themselves directly to users, by setting up a web server at autoconfig.<domain>, which simply returns a static xml file with the configuration, as described below. for more complicated setups, for example when the login name does not appear in the email address, the xml file can also be generated by the isp. in such complicated cases, this is the only way to allow an automatic setup. configuration file on harddisk local administrators may place a configuration file in the thunderbird installation folder. this is mainly intended for companies who install thunderbird on their employees' computers and want to enable easy account setup without having to set up a configuration server. this method is not practical for other use cases, because it is difficult ...
...And 3 more matches

Debugger - Firefox Developer Tools
ssigning to it enables or disables this debugger instance; reading it produces true if the instance is enabled, or false otherwise. this property is initially true in a freshly created debugger instance. this property gives debugger code a single point of control for disentangling itself from the debuggee, regardless of what sort of events or handlers or “points” we add to the interface. allowunobservedasmjs a boolean value indicating whether asm.js code running inside this debugger instance’s debuggee globals is invisible to debugger api handlers and breakpoints. setting this to false inhibits the ahead-of-time asm.js compiler and forces asm.js code to run as normal javascript. this is an accessor property with a getter and setter. it is initially false in a freshly created debug...
...s to false inhibits the ahead-of-time asm.js compiler and forces asm.js code to run as normal javascript. this is an accessor property with a getter and setter. it is initially false in a freshly created debugger instance. setting this flag to true is intended for uses of subsystems of the debugger api (e.g, debugger.source) for purposes other than step debugging a target javascript program. allowwasmbinarysource a boolean value indicating whether webassembly sources will be available in binary form. the webassembly text generation will be disabled. collectcoverageinfo a boolean value indicating whether code coverage should be enabled inside each debuggee of this debugger instance. changing this flag value will recompile all jit code to add or remove code coverage instrumentation. cha...
...s substituted into the error message. this method’s return value is ignored. onnewglobalobject(global) a new global object,global, has been created. this handler method should return a resumption value specifying how the debuggee’s execution should proceed. however, note that a { return:value } resumption value is treated like undefined (“continue normally”);value is ignored. (allowing the handler to substitute its own value for the new global object doesn’t seem useful.) this handler method is only available to debuggers running in privileged code (“chrome”, in firefox). most functions provided by this debugger api observe activity in only those globals that are reachable by the api’s user, thus imposing capability-based restrictions on a debugger’s reach. howev...
...And 3 more matches

Index - Firefox Developer Tools
easingly "tall," projecting outward from the bottom of the page. this view makes it easy to visualize the nesting of your content. 3 accessibility inspector accessibility, accessibility inspector, devtools, guide, tools the accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. this article takes you through the main features of the accessibility inspector and how to use it. 4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page...
...m inspector dom, dom:tools, dom_inspector, extensions, extensions:tools, themes, themes:tools, tools, web development, web development:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object model of documents - usually web pages or xul windows. the dom hierarchy can be navigated using a two-paned window that allows a variety of different views on the document and all nodes within. 7 dom inspector faq dom_inspector the file menu contains approaches which will allow you to inspect a document. 8 dom inspector internals code, tools, internals, organisation, source there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspe...
...the page. 52 performance analysis 110n:priority, debugging, dev tools, firefox, guide, networking, tools the network monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site. 53 throttling 110n:priority, debugging, dev tools, firefox, guide, networking, tools the network monitor allows you to throttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types. 54 page inspector css, dom, html, stylesheets, web development, web development:tools, l10n:priority use the page inspector to examine and modify the html and css of a page. 55 how to links for various how to'...
...And 3 more matches

BiquadFilterNode() - Web APIs
dictionary. context a reference to an audiocontext. options optional options are as follows: type: one of "lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass". the meaning of the other options depends on the value of this one. the defaults for all are as follows: q: 1 detune: 0 frequency: 350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance valu...
...ents a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. ...
...it implements a second-order lowshelf filter. q: not used. frequency: the upper limit of the frequences where the boost, or attenuation, is applied. gain: the boost, in db, to be applied. if the value is negative, the frequencies are attenuated. ...
...And 3 more matches

Using Fetch - Web APIs
and response objects.) note: the body mixin also has similar methods to extract other types of body content; see the body section for more. fetch requests are controlled by the connect-src directive of content security policy rather than the directive of the resources it's retrieving. supplying request options the fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings: see fetch() for the full options available, and more details. // example post method implementation: async function postdata(url = '', data = {}) { // default options are marked with * const response = await fetch(url, { method: 'post', // *get, post, put, delete, etc. mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache',...
...rigin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by `data.json()` call }); note that mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain sending a request with credentials included to cause browsers to send a request with credentials included, even for a cross-origin call, add credentials: 'include' to the init object you pass to the fetch() me...
...(response => response.blob()) .then(myblob => { myimage.src = url.createobjecturl(myblob); }); request() accepts exactly the same parameters as the fetch() method. you can even pass in an existing request object to create a copy of it: const anotherrequest = new request(myrequest, myinit); this is pretty useful, as request and response bodies are one use only. making a copy like this allows you to make use of the request/response again while varying the init options if desired. the copy must be made before the body is read, and reading the body in the copy will also mark it as read in the original request. note: there is also a clone() method that creates a copy. both methods of creating a copy will fail if the body of the original request or response has already been read, but r...
...And 3 more matches

MediaDevices.getUserMedia() - Web APIs
such as a camera, video recording device, screen sharing service, and so forth), an audio track (similarly, produced by a physical or virtual audio source like a microphone, a/d converter, or the like), and possibly other track types. it returns a promise that resolves to a mediastream object. if the user denies permission, or matching media is not available, then the promise is rejected with notallowederror or notfounderror respectively. note: it's possible for the returned promise to neither resolve nor reject, as the user is not required to make a choice at all and may simply ignore the request. generally, you will access the mediadevices singleton object using navigator.mediadevices, like this: async function getmedia(constraints) { let stream = null; try { stream = await nav...
...n obtained. exceptions rejections of the returned promise are made by passing a domexception error object to the promise's failure handler. possible errors are: aborterror although the user and operating system both granted access to the hardware device, and no hardware issues occurred that would cause a notreadableerror, some problem occurred which prevented the device from being used. notallowederror one or more of the requested source devices cannot be used at this time. this will happen if the browsing context is insecure (that is, the page was loaded using http rather than https). it also happens if the user has specified that the current browsing instance is not permitted access to the device, the user has denied access for the current session, or the user has denied all access to...
...using http rather than https). it also happens if the user has specified that the current browsing instance is not permitted access to the device, the user has denied access for the current session, or the user has denied all access to user media devices globally. on browsers that support managing media permissions with feature policy, this error is returned if feature policy is not configured to allow access to the input source(s). older versions of the specification used securityerror for this instead; securityerror has taken on a new meaning. notfounderror no media tracks of the type specified were found that satisfy the given constraints. notreadableerror although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or w...
...And 3 more matches

SVGNumberList - Web APIs
numberofitems unsigned long the number of items in the list. length unsigned long the number of items in the list. methods name & arguments return description clear() void clears all existing current items from the list, with the result being an empty list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgnumber newitem) svgnumber clears all existing current items from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous list before it is inser...
...ting current items from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgnumber returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a ...
...nds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgnumber returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgnumber newitem, in unsigned long index) svgnumber inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into ...
...And 3 more matches

SVGTransform - Web APIs
t (0, 0), e and f will be zero. methods name & arguments return description setmatrix(in svgmatrix matrix) void sets the transform type to svg_transform_matrix, with parameter matrix defining the new transformation. note that the values from the parameter matrix are copied. ...
...xception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. settranslate(in float tx , in float ty) void sets the transform type to svg_transform_translate, with parameters tx and ty defining the translation amounts. exceptions: a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. setscale(in float sx , in float sy) void sets the transform type to svg_transform_scale, with parameters sx and sy defining the scale amounts. ...
... a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. setscale(in float sx , in float sy) void sets the transform type to svg_transform_scale, with parameters sx and sy defining the scale amounts. exceptions: a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. setrotate(in float angle, in float cx , in float cy) void sets the transform type to svg_transform_rotate, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation. exceptions: a domexception ...
...And 3 more matches

CSS values and units - CSS: Cascading Style Sheets
ant it to be any other pre-defined css keyword. see the <custom-ident> and <string> reference pages for more details. pre-defined keyword values pre-defined keywords are text values defined by the specification for that property. these keywords are also css identifiers and are therefore used without quotes. when viewing css property value syntax in a css specification or the mdn property page, allowable keywords will be listed in the following form. the following values are the pre-defined keyword values allowed for float. left | right | none | inline-start | inline-end such values are used without quotes: .box { float: left; } css-wide values in addition to the pre-defined keywords that are part of the specification for a property, all css properties accept the css-wide property v...
...0ms, or 10px. the attached unit identifier is case insensitive. there is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm is not valid. css uses dimensions to specify: <length> (distance units) <angle> <time> <frequency> <resolution> these are all covered in subsections below. distance units where a distance unit, also known as a length, is allowed as a value for a property, this is described as the <length> type. there are two types of lengths in css: relative and absolute. relative length units specify a length in relation to something else. for example, em is relative to the font size on the element and vh is relative to the viewport height. relative length units unit relative to em font size of the e...
...css inch, centimeter, or pixel. it accepts the following values: unit description dpi dots per inch. dpcm dots per centimetre. dppx, x dots per px unit. percentages a <percentage> is a type that represents a fraction of some other value. percentage values are always relative to another quantity, for example a length. each property that allows percentages also defines the quantity to which the percentage refers. this quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else. as an example, if you specify the width of a box as a percentage, it refers to the percentage of the box's parent's computed width: .box { width: 50%;...
...And 3 more matches

CSS Tutorials - CSS: Cascading Style Sheets
ages so that difficulty-based lists can be automatically built. beginner-level css tutorials getting started this guide is aimed at complete beginners: you haven't written one single line of css? — this is for you. it explains the fundamental concepts of the language and guides you in writing basic stylesheets. using multiple backgrounds backgrounds are fundamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice effects. scaling background images css allows you to resize images used as an element's background. this tutorial describes how to achieve this in a simple way. media queries the size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. media q...
...te-level css tutorials after the release of css 2 (level 1), new features have been added to css. some of them are fancy and are pretty self contained. they are easy to use for anybody with a fair knowledge of basic concepts. css counters counting items and pages is an easy task in css. learn to use counter-reset, counter-increment, counters(), and counter(). ...
...ned. they are easy to use for anybody with a fair knowledge of basic concepts. css counters counting items and pages is an easy task in css. learn to use counter-reset, counter-increment, counters(), and counter(). css animations css3 animations allow you to define configurations of style, as keyframes, and to transition between them defining an animation. css transitions css3 transitions allow you to define an animation between several styles and to control the way this transition happens. css transforms transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2d or 3d spaces. css gradients gradients are images that transition smoothly from one color to another. there are several type...
...And 3 more matches

Adding captions and subtitles to HTML5 video - Developer guides
ces if you are not sure what they are. they are however implemented in the same way technically, so the material in this article will apply to both. for this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people. the <track> element html5 allows us to specify subtitles for a video using the <track> element. the various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information. webvtt the files that contain the actual subtitle data are simple text files that follow a specified format,...
... src is assigned a valid url pointing to the relevant webvtt subtitle file in each case. srclang indicates what language each subtitle files' contents are in. the default attribute is set on the english <track> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been t...
...[i].mode = 'hidden'; } the video.texttracks property contains an array of all the text tracks attached to the video. we loop through each one and set its mode to hidden. note: the webvtt api gives us access to all the text tracks that are defined for an html5 video using the <track> element. building a caption menu our aim is to use the subtitles button we added earlier to display a menu that allows users to choose which language they want the subtitles displayed in, or to turn them off entirely. we have added the button, but before we make it do anything, we need to build the menu that goes with it. this menu is built dynamically, so that languages can be added or removed later by simply editing the <track> elements within the video's markup. all we need to do is to go through the vide...
...And 3 more matches

Live streaming web audio and video - Developer guides
e player synchronized with the stream: adaptive streaming is a technique for doing this in the case of low bandwidth. the idea is that the data transfer rate is monitored and if it looks like it's not keeping up, we drop down to a lower bandwidth (and consequently lower quality) stream. in order to have this capability, we need to use formats that facilitate this. live streaming formats generally allow adaptive streaming by breaking streams into a series of small segments and making those segments available at different qualities and bit rates. streaming audio and video on demand streaming technology is not used exclusively for live streams. it can also be used instead of the traditional progressive download method for audio and video on demand: there are several advantages to this: laten...
...e adobe flash plugin. rtmp comes in various flavours including rtmpe (encrypted), rtmps (secure over ssl/tls) and rtmpt (encapsulated within http requests). rtsp real time streaming protocol (rtsp) controls media sessions between endpoints and is often used together with real-time transport protocol (rtp) and with real-time control protocol (rtcp) for media stream delivery. using rtp with rtcp allows for adaptive streaming. this is not yet supported natively in most browsers, but be aware that firefox os 1.3 supports rtsp. note: some vendors implement propriety transport protocols, such as realnetworks and their real data transport (rdt). rtsp 2.0 rtsp 2.0 is currently in development and is not backward compatible with rtsp 1.0. important: although the <audio> and <video> tags are prot...
...cking from firewalls or proxy servers. using streaming protocols the process of using the various protocols is reassuringly familiar if you are used to working with media over http. for example: <video src="rtsp://myhost.com/mymedia.format"> <!-- fallback here --> </video> media source extensions (mse) media source extensions is a w3c working draft that plans to extend htmlmediaelement to allow javascript to generate media streams for playback. allowing javascript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. for example, you could implement mpeg-dash using javascript while offloading the decoding to mse. note: time shifting is the process of consuming a live stream sometime after it happened. video streaming file fo...
...And 3 more matches

Making content editable - Developer guides
and fast rich text editor. this article provides some information about this functionality. note: in firefox 63 beta/dev edition, some of the rich-text editing features have been disabled by default, for better cross-browser compatibility. these are object resizing on <img>, <table>, and absolutely-positioned elements; inline table editing to add or remove rows and columns; and the grabber that allows moving of absolutely-positioned elements. see bug 1449564 and firefox-specific html editing ui has been deprecated for additional details. how does it work? all you have to do is set the contenteditable attribute on nearly any html element to make it editable. here's a simple example which creates a <div> element whose contents the user can edit. <div contenteditable="true"> this text can...
...ap 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 allow you to change it. for example, to use <p> elements: document.execcommand("defaultparagraphseparator", false, "p"); additionally, firefox supports the non-standard argument, br, for defaultparagraphseparator since firefox 55. this is useful if your web application expects the older firefox behavior, and you don't want to or don't have the time to update it to use the new behavior. you can use th...
...o use the new behavior. you can use the older firefox behavior with this line: document.execcommand("defaultparagraphseparator", false, "br"); security for security reasons, firefox doesn't let javascript code use clipboard related features (copy, paste, etc.) by default. ...
...And 3 more matches

HTML elements reference - HTML: Hypertext Markup Language
<title> the html title element (<title>) defines the document's title that is shown in a browser's title bar or a page's tab. sectioning root element description <body> the html <body> element represents the content of an html document. there can be only one <body> element in a document. content sectioning content sectioning elements allow you to organize the document content into logical pieces. use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. element description <address> the html <address> element indicates that the enclosed html provides contact information for a person or ...
...ser action. <progress> the html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. <select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. interactive elements html offers a selection of elements which help to create interactive user interface objects. element description <details> the html details element (<details>) creates a disclosure widget in which information is visible only when the...
...using javascript. obsolete and deprecated elements warning: these are old html elements which are deprecated and should not be used. you should never use them in new projects, and should replace them in old projects as soon as you can. they are listed here for informational purposes only. element description <acronym> the html acronym element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word. <applet> the obsolete html applet element (<applet>) embeds a java applet into the document; this element has been deprecated in favor of <object>. <basefont> the obsolete html base font element (<basefont>) sets a default font face, size, and color for the other e...
...And 3 more matches

MIME types (IANA media types) - HTTP
nse's content-type header. if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled. structure of a mime type the simplest mime type consists of a type and a subtype; these are each strings which, when concatenated with a slash (/) between them, comprise a mime type. no whitespace is allowed in a mime type: type/subtype the type represents the general category into which the data type falls, such as video or text. the subtype identifies the exact kind of data of the specified type the mime type represents. for example, for the mime type text, the subtype might be plain (plain text), html (html source code), or calendar (for icalendar/.ics) files. each type has its own set of pos...
...sn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "save as" window if it doesn't know how to display the document). there are two multipart types: message list at iana a message that encapsulates other messages. this can be used, for instance, to represent an email that includes a forwarded message as part of its data, or to allow sending very large messages in chunks as if it were multiple messages. examples include message/rfc822 (for forwarded or replied-to message quoting) and message/partial to allow breaking a large message into smaller ones automatically to be reassembled by the recipient. multipart list at iana data that is comprised of multiple components which may individually have different mime types. example...
...t per the html specification, javascript files should always be served using the mime type text/javascript. no other values are considered valid, and using any of those may result in scripts that do not load or run. ...
...And 3 more matches

CSP: connect-src - HTTP
navigator.sendbeacon(). note: connect-src 'self' does not resolve to websocket schemas in all browsers, more info: https://github.com/w3c/webappsec-csp/issues/7 csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the connect-src policy: content-security-policy: connect-src <source>; content-security-policy: connect-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 3 more matches

CSP: object-src - HTTP
the http content-security-policy object-src directive specifies valid sources for the <object>, <embed>, and <applet> elements. to set allowed types for <object>, <embed>, and <applet> elements, use the plugin-types directive. elements controlled by object-src are perhaps coincidentally considered legacy html elements and aren't receiving new standardized features (such as the security attributes sandbox or allow for <iframe>). therefore it is recommended to restrict this fetch-directive (e.g. explicitly set object-src 'none' if possible). csp version 1 directive type fetch directive default-src fallback yes. ...
...ecurity attributes sandbox or allow for <iframe>). therefore it is recommended to restrict this fetch-directive (e.g. explicitly set object-src 'none' if possible). csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the object-src policy: content-security-policy: object-src <source>; content-security-policy: object-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a ...
...on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...And 3 more matches

CSP: prefetch-src - HTTP
the http content-security-policy (csp) prefetch-src directive specifies valid resources that may be prefetched or prerendered. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the prefetch-src policy: content-security-policy: prefetch-src <source>; content-security-policy: prefetch-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the po...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 3 more matches

CSP: style-src-attr - HTTP
tr directive specifies valid sources for inline styles applied to individual dom elements. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 3 more matches

CSP: style-src-elem - HTTP
valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet". csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
...https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a scheme such as http: or https:. the colon is required. unlike other values below, single quotes shouldn't be used. you can also specify data schemes (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. ...
...And 3 more matches

Content-Security-Policy - HTTP
with a few exceptions, policies mostly involve specifying server origins and script endpoints. this helps guard against cross-site scripting attacks (xss). for more information, see the introductory article on content security policy (csp). header type response header forbidden header name no syntax content-security-policy: <policy-directive>; <policy-directive> where <policy-directive> consists of: <directive> <value> with no internal punctuation. ...
...cation manifest files. media-src specifies valid sources for loading media using the <audio> , <video> and <track> elements. object-src specifies valid sources for the <object>, <embed>, and <applet> elements. elements controlled by object-src are perhaps coincidentally considered legacy html elements and are not receiving new standardized features (such as the security attributes sandbox or allow for <iframe>). therefore it is recommended to restrict this fetch-directive (e.g., explicitly set object-src 'none' if possible). prefetch-src specifies valid sources to be prefetched or prerendered. script-src specifies valid sources for javascript. script-src-elem specifies valid sources for javascript <script> elements. script-src-attr specifies valid sources for javascript inline e...
...ng any assets using http when the page is loaded using https. referrer used to specify information in the referer (sic) header for links away from a page. use the referrer-policy header instead. require-sri-for requires the use of sri for scripts or styles on the page. require-trusted-types-for enforces trusted types at the dom xss injection sinks. trusted-types used to specify an allow-list of trusted types policies. trusted types allows applications to lock down dom xss injection sinks to only accept non-spoofable, typed values in place of strings. upgrade-insecure-requests instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https). this directive is intended for web si...
...And 3 more matches

Feature-Policy: fullscreen - HTTP
the http feature-policy header fullscreen directive controls whether the current document is allowed to use element.requestfullscreen(). when this policy is enabled, the returned promise rejects with a typeerror. by default, top-level documents and their same-origin child frames can request and enter fullscreen mode. this directive allows or prevents cross-origin frames from using fullscreen mode. this includes same-origin frames. if both this directive (i.e. via the allow attribute) and the allowfullscreen attribute are present on an <iframe> element, this directive takes precedence. there was a bug whereby the fullscreen directive didn't work unless the allowfullscreen attribute was also present, but this has been fixed as of firefox 80 (bug 1608358). syntax feature-policy: f...
...s includes same-origin frames. if both this directive (i.e. via the allow attribute) and the allowfullscreen attribute are present on an <iframe> element, this directive takes precedence. there was a bug whereby the fullscreen directive didn't work unless the allowfullscreen attribute was also present, but this has been fixed as of firefox 80 (bug 1608358). syntax feature-policy: fullscreen <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. ...
...bute was also present, but this has been fixed as of firefox 80 (bug 1608358). syntax feature-policy: fullscreen <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. ...
...And 3 more matches

Feature-Policy: xr-spatial-tracking - HTTP
the http feature-policy header xr-spatial-tracking directive controls whether the current document is allowed to use the webxr device api. this policy controls whether navigator.xr.requestsession() can return xrsession that requires spatial tracking and whether user agent can indicate support for sessions supporting spatial tracking via navigator.xr.issessionsupported() and devicechange event on navigator.xr object. ...
...ols whether the current document is allowed to use the webxr device api. this policy controls whether navigator.xr.requestsession() can return xrsession that requires spatial tracking and whether user agent can indicate support for sessions supporting spatial tracking via navigator.xr.issessionsupported() and devicechange event on navigator.xr object. syntax feature-policy: xr-spatial-tracking <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. ...
...xr.issessionsupported() and devicechange event on navigator.xr object. syntax feature-policy: xr-spatial-tracking <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. ...
...And 3 more matches

<mo> - MathML
the mathml <mo> element represents an operator in a broad sense. besides operators in strict mathematical meaning, this element also includes "operators" like parentheses, separators like comma and semicolon, or "absolute value" bars. attributes accent if the operator is used as an under- or overscript this attribute specifies whether the operator should be treated as an accent. allowed values are true or false. class, id, style provided for use with stylesheets. dir the text direction. possible values are either ltr (left to right) or rtl (right to left). fence there is no visual effect for this attribute, but it specifies whether the operator is a fence (such as parentheses). allowed values are true or false. form specifies the role of the operator in an enclosed expression, w...
..., for separators. (it is the default value if the operator is not included in a <mrow> element.) postfix, closing fences. (it is the default value if the operator is the last argument in a <mrow> element with more than one argument.) href used to set a hyperlink to a specified uri. largeop specifies whether the operator should be drawn larger than normal when displaystyle="true" is set. allowed values are either true or false. lspace the amount of space before the operator (see length for values and units). the constant thickmathspace (5/18em) is the default value. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. mathsize the size of the content. see length for possibl...
...g. these will be removed in the future. mathvariant this attribute specifies the logical class of the operator which varies in typography. that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography. ...
...And 3 more matches

Privacy, permissions, and information security
mentally, privacy of your data on the internet is about ensuring that information that has personal implications is kept out of the hands of unauthorized persons or organizations, regardless of how it's obtained. privacy exceptions may be granted to specific sites or applications, but it may also be granted conditionally, such as by permitting only a select group of people to access it, or only allowing the information to be accessed and used for a limited period of time. security security is about the active protection of data or a system against being accessed, downloaded, or operated by people or organizations that don't have permission to do so. good security practices aim to prevent unauthorized access to systems or data, regardless of what the target is. personal and private i...
...f information that's made available by a user's browser and collating it until it becomes possible to uniquely identify that user's browser. even seemingly innocuous information can in principle be used in the fingerprinting process, though the more unique the information is to the particular device the better. modern browsers take steps to help prevent fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that prevent it from being used for identification purposes. for example, if a web site queries a user's browser for the elapsed time, a comparison of that time to the time as reported by the server might be useful as a factor in fingerprinting. because of this, browsers typically introduce ...
...cy provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be allowed to access http public key pinning (hpkp) hpkp is used by servers to instruct a client to associate a specific public key with the server going forward in order to decrease the likelihood of man-in-the-middle attacks http ...
...And 3 more matches

Using the WebAssembly JavaScript API - WebAssembly
store can access any byte in the entire linear memory, which is necessary to faithfully represent c/c++ concepts like pointers. unlike a native c/c++ program, however, where the available memory range spans the entire process, the memory accessible by a particular webassembly instance is confined to one specific — potentially very small — range contained by a webassembly memory object. this allows a single web app to use multiple independent libraries — each of which are using webassembly internally — to have separate memories that are fully isolated from each other. in addition, newer implementations can also create shared memories, which can be transferred between window and worker contexts using postmessage(), and used in multiple places. in javascript, a memory instance can be th...
... i++) { i32[i] = i; } var sum = results.instance.exports.accumulate(0, 10); console.log(sum); note how we create the uint32array view on the memory object’s buffer (memory.prototype.buffer), not on the memory itself. memory imports work just like function imports, only memory objects are passed as values instead of javascript functions. memory imports are useful for two reasons: they allow javascript to fetch and create the initial contents of memory before or concurrently with module compilation. they allow a single memory object to be imported by multiple module instances, which is a critical building block for implementing dynamic linking in webassembly. note: you can find our complete demo at memory.html (see it live also) . tables a webassembly table is a resizable type...
...the table before indexing and calling the indexed function reference. thus, tables are currently a rather low-level primitive used to compile low-level programming language features safely and portably. tables can be mutated via table.prototype.set(), which updates one of the values in a table, and table.prototype.grow(), which increases the number of values that can be stored in a table. this allows the indirectly-callable set of functions to change over time, which is necessary for dynamic linking techniques. the mutations are immediately accessible via table.prototype.get() in javascript, and to wasm modules. a table example let’s look at a simple table example — a webassembly module that creates and exports a table with two elements: element 0 returns 13 and element 1 returns 42. ...
...And 3 more matches

WebAssembly
webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the web. it is also designed to run alongside javascript, allowing both to work together. in a nutshell webassembly has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so. webassembly is designed to complement and run alongside javascript — using the webassembly javascript apis, you can load webassembly modules into a javascript app and share functio...
... web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so. webassembly is designed to complement and run alongside javascript — using the webassembly javascript apis, you can load webassembly modules into a javascript app and share functionality between the two. this allows you to take advantage of webassembly's performance and power and javascript's expressiveness and flexibility in the same apps, even if you don't know how to write webassembly code. and what's even better is that it is being developed as a web standard via the w3c webassembly working group and community group with active participation from all major browser vendors. guides webassembly conc...
... why it is so useful, how it fits into the web platform (and beyond), and how to use it. compiling a new c/c++ module to webassembly when you’ve written code in c/c++, you can then compile it into .wasm using a tool like emscripten. let’s look at how it works. compiling an existing c module to webassembly a core use-case for webassembly is to take the existing ecosystem of c libraries and allow developers to use them on the web. compiling from rust to webassembly if you've written some rust code, you can compile it into webassembly! this tutorial takes you through all you need to know to compile a rust project to wasm and use it in an existing web app. loading and running webassembly code after you have a .wasm, this article covers how to fetch, compile and instantiate it, combining...
...And 3 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
is used to contain language data that can be translated. to make an extension’s gui support multiple languages, you can include multiple locale packages, one for each language. the skin package this is used to include source files used as visual elements in the gui, including style sheets and images. most extensions include only one skin package, but you can include multiple skin packages to allow the gui to change with different themes. chrome url use a file called a “chrome manifest” to register chrome packages with firefox and start using them. to register a package, you use a special uri scheme called a “chrome url” to represent the path to the file. chrome urls are structured as: chrome://%package name%/%package type%/%relative path to source file% for example, the chrome ...
...pen the clock window (figure 9). fixme: figure 9: toolbar after phase 4 directory structure the style sheet and graphics files will be located inside the chrome’s skin package. the extension will actually work fine even if these are located in the content package, but putting them in the skin package has the benefit of making it possible to design guis that match specific firefox themes, and allowing theme developers to create special visual effects for extensions. first, add the skin directory and its subordinate files to your helloworld directory as shown in figure 10. the purpose of each of these files is explained in table 4. download the files icon.png and icon-small.png from the resources website and place them appropriately. fixme: figure 10: directory structure with skin package ...
...firefox under a different profile (see footnote 1). drag and drop the xpi file onto your browser window to start the installation. this completes the explanation of how to create and package a simple “hello world” extension. developing practical extensions: a session-management extension in this section, we will create an extension that uses a new feature: the session store api. this will allow the user to save and restore session snapshots (browser window states) at any time. phase 1: test install figure 12 shows what the interface for the session-management extension will look like. under the tool menu, the session store submenu contains two items—save session and clear sessions; in between them is a list of previously saved sessions that you can restore, most recent first. fixme...
...And 2 more matches

Custom XUL Elements with XBL - Archive of obsolete content
="pete" greeting="good morning" image="" />, then those attribute values are "inherited" to the content nodes that have this special attribute. the value attribute of the xul:label element would be "pete". the oncommand attribute of the button has some code you've probably never seen before: document.getbindingparent(this). this code gets the dom object that corresponds to the xshelloperson tag, allowing you access to its methods and properties. in this case we're calling the remove method, which we will discuss later on. if you need to create a container element, or any other element that has child nodes, you can use the xbl children tag in your content to indicate the place where the child nodes will be inserted. the includes attribute gives you a little more flexibility with children, but...
...attribute( this, "anonid", "xulshoolhello-name-label"); implementation the implementation section defines most of the scripting side of your element. here you can define methods and properties, as well as a constructor and a destructor for your element. javascript code is enclosed in cdata sections to prevent js and xml syntax conflicts. properties and fields the field and property tags allow you to handle element variables and access them from outside of the element. a field holds a value that can be changed, except when the readonly attribute is set. it's very similar to a js object variable, and we generally use a field for private variables inside of the element. <field name="fieldname">defaultvalue</field> from inside your binding methods, you can access fields with: th...
... from inside your binding methods, you can access fields with: this.fieldname you can also access them from outside of the element, if you have a reference to it: elementref.fieldname just like with js objects, all fields are publicly accessible, and we use a "_" to indicate a field is "private". a property is a little more robust. it is defined using a getter and setter method, allowing read-only and write-only properties, as well as more complex behavior. there are two properties defined in our binding, which are just meant for easier access to the two text attributes in the element. we use the shorthand version of the property tag: <property name="name" onget="return this.getattribute('name');" onset="this.setattribute('name', val);" /> there's a less compact versio...
...And 2 more matches

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
g to a document fragment while removing any scripts or other unsafe content in the process. let { cc, ci } = require("chrome"); /** * safely parse an html fragment, removing any executable * javascript, and return a document fragment. * * @param {document} doc the document in which to create the * returned dom tree. * @param {string} html the html fragment to parse. ...
...ment while removing any scripts or other unsafe content in the process. let { cc, ci } = require("chrome"); /** * safely parse an html fragment, removing any executable * javascript, and return a document fragment. * * @param {document} doc the document in which to create the * returned dom tree. * @param {string} html the html fragment to parse. ...
...l fragment to parse. * @param {boolean} allowstyle if true, allow <style> nodes and * style attributes in the parsed fragment. gecko 14+ only. * @param {nsiuri} baseuri the base uri relative to which resource * urls should be processed. note that this will not work for * xml fragments. * @param {boolean} isxml if true, parse the fragment as xml. */ function parsehtml(doc, html, allowstyle, baseuri, isxml) { let parser_utils = "@mozilla.org/parserutils;1"; // user the newer nsiparserutils on versions that support it. ...
...And 2 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
igational models in mind. in the next section we will introduce inner-browsing as an extension to the traditional model. let's start defining what we mean by inner-browsing. in this model, when a request goes to the web server, the current page is updated rather than replaced. without leaving the page, the user browses new information and preserves the page's context. this new navigational method allows us to make html user interfaces behave similarly to non-web based applications such as contact management software. the basic implementation uses a resource such as the web page or the web application to control the navigation system. in other words, the page is the browsing device during the experience, and the user is "immersed" in that browsing device. what does this mean, practically speakin...
.... if the data changes, it will not update unless you reload the web page. this article includes a ticker example demonstrating that the inner-browsing model can be used to dynamically request new data from the server side and provide updates to the ticker. spell check suppose you have a web publishing system for a portal, and a spell check application on your server. today, this publishing system allows your users to modify content for the portal, but in order to have their text spell checked they must click somewhere and wait for the response page. the inner-browsing model is able to provide users with automatic spell check without leaving the page being edited, a similar experience to a word processor application. the incorrect words are highlighted while the user is typing. forms with nested...
...ge with the next block of message headers. on slow speed connections, this process can be slow and frustrating. with inner browsing, a simple request to retrieve the next set of message headers that replace the currently viewed message headers can dramatically improve user experience. implementing inner-browsing on top of html pages modern browsers have good support for the w3c dom and javascript allowing fine-grained control over page content. instead of forcing the reader to follow links to new pages, the javascript code can act as the mediator for information access. if the user clicks on a link item, the script will be responsible to load the information from the data source and to apply that into the current document. there are basically two steps in this process: data load: acquisition of...
...And 2 more matches

Template and Tree Listeners - Archive of obsolete content
movelistener method. listening for tree changes the second type of listener is used to handle particular actions related to trees. the tree builder implements the nsitreeview interface, so handles the gathering of data and passing it on to the tree. the tree widget informs the view when certain operations are performed that might affect the data. the tree view handles all of these operations, but allows an observer to be attached which is invoked during these operations. for instance, the observer may have an ontoggleopenstate method which will be called when the user opens or closes a row. the tree builder will handle the adding or removing of rows, but will call the observer so that it can perform some task. the tree builder observer implements the nsixultreebuilderobserver interface and may ...
...rver. some useful functions of the observer are the drag and drop related callbacks to handle when an item is dragged onto the tree. this makes handling dragging onto a tree fairly simple. all you need to do is implement three methods, candropon, candropbeforeafter and ondrop. the tree observer receives drag related events in three places: over a container row, before a row, and after a row. this allows you to handle dragging with more flexibility. for example, in some situations you may want to require dragging onto a folder type of row. in other situations, you may wish to allow items to be dragged between (before or after) rows. this would be the situation if you were dragging items from that tree around, for instance dragging a bookmark from one location to another. the tree widget will dra...
...o allow items to be dragged between (before or after) rows. this would be the situation if you were dragging items from that tree around, for instance dragging a bookmark from one location to another. the tree widget will draw a small line between the rows while dragging. all you need to do is add a tree builder observer which returns true for the candrop method. note that the 'drag on' case only allows dragging onto containers, not ordinary rows. var treebuilderobserver = { candropbeforeafter : function(idx, orient) { return false; }, candropon : function(idx, orient) { return true; }, candrop : function(idx, orient) { return !orient; }, ondrop : function(idx, orient) { // do something here }, }; //tree.builderview.addobserver(treebuilderobserver); // ppchenhui@hotmail.com tree.b...
...And 2 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disable...
... inputtooltiptext type: string the tooltip text for the textbox. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. minresultsforpopup new in thunderbird 3requires seamonkey 2.0 type: integer the minimum number of results that must be returned for the popup to be displayed. the default value is 1. new in th...
...: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers. in addition, arrow buttons appear next to the textbox to let the user step through values. there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value. password a textbox that hides what is typed, used for entering passwords. search a textbox intended ...
...And 2 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disable...
... inputtooltiptext type: string the tooltip text for the textbox. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. minresultsforpopup obsolete since gecko 1.9.1 type: integer the minimum number of results that must be returned for the popup to be displayed. the default value is 1. a zero value will always ...
...: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers. in addition, arrow buttons appear next to the textbox to let the user step through values. there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value. password a textbox that hides what is typed, used for entering passwords. search a textbox intended ...
...And 2 more matches

Templates - Archive of obsolete content
with mozilla such as bookmarks, history and mail messages. more details on these will be provided in the later section. usually, elements such as treeitems and menuitems will be populated with data. however, you can use other elements if you want although they are more useful for specialized cases. nevertheless, we'll start with these other elements because trees and menus require more code. to allow the creation of elements based on rdf data, you need to provide a simple template which will be duplicated for each element that is created. essentially, you provide only the first element and the remaining elements are constructed based on the first one. the template is created using the template element. inside it, you can place the elements that you want to use for each constructed element. t...
...t can be used to get the data. this example will only get the top-level bookmarks (or bookmark folders) as we're going to create buttons. for child bookmarks, we would need to use an element that displays a hierarchy such as a tree or menu. this example and any others that reference internal rdf datasources will only work if you load them from a chrome url. for security reasons, mozilla doesn't allow access to them from other sources. to view this example, you will need to create a chrome package and load the file from there (you can do this easily, see manifest files). you can then enter the chrome url into the browser url field. example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/n...
... in the image that the set of buttons has been created, one for each bookmark. try adding a bookmark in the browser while you have the example window open. you'll notice that the buttons in the example get updated instantly. (you may have to focus the window for it to change.) container and datasources the template itself is placed inside a vertical box. the box has two special attributes that allow it to be used for templates, which are used to specify where the data comes from. the first attribute on the box is the datasources attribute. this is used to declare what rdf datasource will be providing the data to create the elements. in this case, rdf:bookmarks is used. you can probably guess that this means to use the bookmarks datasource. this datasource is provided by mozilla. to use your ...
...And 2 more matches

XUL Structure - Archive of obsolete content
nsion or standalone xulrunner application. content from remote sources (e.g. http://localhost/~username/ ), regardless of whether they are html or xul or another document type, are limited in the type of operations they can perform, for security reasons. for this reason, mozilla provides a method of installing content locally and registering the installed files as part of its chrome system. this allows a special url form, called a chrome:// url, to be used. by accessing a file using a chrome url, the files receive elevated privileges to access local files, access preferences and bookmarks and perform other privileged operations. obviously, web pages do not get these privileges, unless they are signed with a digital certificate and the user has granted permission to perform these operations. t...
...atures to the browser. the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file. these packaged files can be created by using a zip utility. when the user downloads the zipped file, the packaged files will be installed onto the user's machine. the extension will hook into the browser using a xul specific feature called an overlay which allows the xul from the extension to mesh with the xul in the browser. to the user, it may seem like the extension has modified the browser, but in reality, the code is all separate, and the extension may be easily uninstalled. registered packages are not required to use overlays, of course. if they don't, you won't be able to access them via the main browser interface, but you can still access them vi...
...hree sets are the content, the skin, and the locale, which are all described below. a particular package might provide one or more skins and locales, but a user can replace them with their own. in addition, the package might include several different applications, each accessible via different chrome urls. the packaging system is flexible enough so that you can include whatever parts you need and allow other parts, such as the text for different languages, to be downloaded separately. the three types of chrome packages are: content - windows and scripts the declarations of the windows and the user interface elements contained within them. these are stored in xul files, which have a .xul extension. a content package can have multiple xul files, but the main window should have a filename th...
...And 2 more matches

XUL controls - Archive of obsolete content
rpicker color="#ff0000"/> colorpicker reference <colorpicker type="button"> a specialized type of color picker which shows only a button. pressing the button displays a color picker popup window. <colorpicker type="button" color="#cc0080"/> colorpicker reference <datepicker> a set of textboxes which may be used to allow the entry of a date. <datepicker value="2007/03/26"/> datepicker reference <datepicker type="grid"> a datepicker which displays a calendar grid for selecting a date. <datepicker type="grid" value="2007/02/20"/> datepicker reference <datepicker type="popup" > a datepicker which displays a set of textboxes f...
... more information about the description element. description reference <groupbox> a groupbox displays a labelled box around other user interface controls. <groupbox> <caption label="network"/> </groupbox> more information about the groupbox element. groupbox reference related elements: caption <filefield> allows the user to select a file. <filefield/> filefield reference <image> an image specified by a url. <image src="start.png"/> more information about the image element. image reference <label> adds a text label to a nearby control. <label control="volume" value="volume:"/> more information ...
...ichlistitem> <richlistitem> <image src="angry.png"/> </richlistitem> </richlistbox> richlistbox reference related elements: richlistitem <scale> a scale displays a bar with a thumb that may be slid across the bar to select between a range of values. ...
...And 2 more matches

menuitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...t key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type ...
...d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image ...
...And 2 more matches

timepicker - Archive of obsolete content
to specify the initial, use the value attribute set to a value of either the form hh:mm:ss or hh:mm. the value may be retrieved and changed using the value property or the datevalue property. ...
... to specify the initial, use the value attribute set to a value of either the form hh:mm:ss or hh:mm. the value may be retrieved and changed using the value property or the datevalue property. ...
... to specify the initial, use the value attribute set to a value of either the form hh:mm:ss or hh:mm. the value may be retrieved and changed using the value property or the datevalue property. ...
...And 2 more matches

tree - Archive of obsolete content
t specified using tags, but is determined from a view object. the view object implements the nsitreeview interface. the view is queried for the data to appear in the tree. there are several ways in which trees are used, as listed below. the second column lists the interfaces available via the tree's view property. the third column indicates whether treeitem element are used. if you would like to allow the tree to be horizontally scrolled, simply set the width attributes for each column to make the tree wider than its containing object. tree type view interfaces has dom nodes? description content tree nsitreeview, nsitreecontentview yes this tree has treeitem elements placed within the treechildren element. in this situation, a content view (which implements...
...d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablek...
...ction. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of rows in the element, use the getrowcount method. seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbo...
...And 2 more matches

treecol - Archive of obsolete content
you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell. if the cycler attribute is not set, the cell is a regular text cell. dragging type: boolean this attribute will be set to true if the column is being dragged. this attribute is set automatically; you shouldn't adjust it yourself. editable type: boolean allows the contents of cells in the column to be changed, especially useful when type="checkbox". when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. the tree must also be marked as editable in order for this to work. individual treecell elements in the column may be marked editable="false" in order to disable editing. fixed ...
...y upon user selection of the menuitem. primary type: boolean if set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. if no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will be given to the user. the attribute also controls whether the column picker allows the user to deselect this column. sort type: uri or xml attribute set this to a rdf property or xml attribute to have the data in the column sorted based on that property. the property will usually be the same as that of the cell label. sortactive type: boolean this should be set to true for the column which should be sorted by default. sortdirection type: one of the value...
...And 2 more matches

NPAPI plugin reference - Archive of obsolete content
the articles below describe each of the apis related to npapi plugins. browser-side plug-in api this chapter describes methods in the plug-in api that are provided by the browser; these allow call back to the browser to request information, tell the browser to repaint part of the window, and so forth. the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. np_getmimedescription np_getmimedescription returns a supported mime type list for your plugin. it works on unix (linux) and macos. on windows you have to define supported mimetypes in the dll resource file. np_getvalue allows the browser to query the plug-in for information. np_initialize provides global initialization for a plug-in. np_port contains i...
...ovides global initialization for a plug-in. np_port contains information required by the window field of an npwindow structure. np_shutdown provides global deinitialization for a plug-in. npanycallbackstruct contains information required during embedded mode printing. npapi plug-in side api this chapter describes methods in the plug-in api that are available from the plug-in object; these allow plug-ins to interact with the browser. the names of all of these methods begin with npp_ to indicate that they are implemented by the plug-in and called by the browser. npbyterange represents a particular range of bytes from a stream. npclass npclass is a structure that holds a set of pointers to functions that make up the behavior of an instance of an npclass (i.e. an npobject). npembedprin...
...pn_getstringidentifier returns an opaque identifier for the string that is passed in. npn_getstringidentifiers returns an array of opaque identifiers for the names that are passed in. npn_geturl asks the browser to create a stream for the specified url. npn_geturlnotify requests creation of a new stream with the contents of the specified url; gets notification of the result. npn_getvalue allows the plug-in to query the browser for information. npn_getvalueforurl provides information to a plugin which is associated with a given url, for example the cookies or preferred proxy. npn_hasmethod determines whether or not the specified npobject has a particular method. npn_hasproperty determines whether or not the specified npobject has a particular property. npn_identifierisstring det...
...And 2 more matches

E4X for templating - Archive of obsolete content
rn strs.formatstringfromname(msg,args,args.length); } return strs.getstringfromname(msg); } for example, <toolbarbutton label={$s('mytoolbar.label')}/> conditionals function _if (cond, h, _else) { if (cond && cond != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows conditions in attribute as well as element content } for example: {_if(elems.length(), function () <description>{elems[0]}</description>, function _else () <label>no data</label> )} note that the simple xmllist() constructor (<></>) may be useful to still be able to use an expression closure (i.e., without needing return statements and braces): {_if(elems.length(), function () <> ...
...unctions can also be easily serialized inline (and then perhaps converted to the dom) as needed: var list = <>{_if(elems.length(), function () <> <markup/> <markup/> </>)}</>.toxmlstring(); iterating functions such as the following foreach (which can work with arrays, objects, or e4x objects) are quite convenient in iterating over complex structures such as e4x would not normally allow. /* the first two arguments are optional: (h is a handler with an explicit argument v only, or beginning with k, v) lev is optional argument to note recursive depth (if part of recursion) */ function foreach (min, max, arr, h, lev) { var k, ret=<></>, it = 1; lev = lev || 0; if (typeof min === 'number') { if (typeof max !== 'number') { lev = h; h = arr...
...ible to use anonymous functions inline (returning the desired content, including potentially xmllist's) in order to execute more than a single related statement, keeping this logic together with the resulting xml. ...
...And 2 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
nce this won't work in mozilla-based browsers such as netscape 7. furthermore, ie's use of the codebase attribute as an obtainment mechanism itself is not strictly correct according to the html 4.01 specification, which says that the codebase attribute should be used to qualify urns referenced by the data, archive, and classid attributes. future netscape browsers based on mozilla source code will allow the use of a special param element to specify where to get plugins that are not present, but this feature is not available in netscape 7. this feature is discussed in mozilla bug 167601. ie doesn't display nested object elements correctly according to the html 4.01 specification. according to the specification, you can nest elements and browsers should stop if they can display the outermost e...
... you aren't taking advantage of any version specific features, a more generic mime type such as application/x-java-vm will do the job just as well. the configuration parameters for the applet, including the class which contains the initial entry point (animator.class, referenced by the "code" param element), are specified in multiple param elements. mozilla-based browsers such as netscape 7 also allow for a special classid attribute that can also be used. this is the special "java:" classid. here is an example using this invocation method: <object classid="java:nervoustext.class" width="534" height="50"> <param name="text" value="java 2 sdk, standard edition v1.4" /> <p>you need the java plugin. get it from <a href="http://java.sun.com/products/plugin/index.html">here. </a> </p...
...hat can also be used. this is the special "java:" classid. here is an example using this invocation method: <object classid="java:nervoustext.class" width="534" height="50"> <param name="text" value="java 2 sdk, standard edition v1.4" /> <p>you need the java plugin. get it from <a href="http://java.sun.com/products/plugin/index.html">here. </a> </p> </object> the "java:" classid allows you to reference the class that provides the primary entry point. the rest of the configuration parameters work via the param elements. applet -- the popular choice the applet element is still very much supported, and is the most popular way currently to invoke java applets. in netscape 7 and compuserve 7, the applet element directly invokes the java plugin. here is a sample: <applet code="ne...
...And 2 more matches

XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
code sample the following code aims to let <xi:include> and <xi:fallback> tags (the two elements in the language) with all of the attributes of <xi:include> be included in an xml document so as to be resolvable into a single xml document. ...
... code sample the following code aims to let <xi:include> and <xi:fallback> tags (the two elements in the language) with all of the attributes of <xi:include> be included in an xml document so as to be resolvable into a single xml document. ...
...ple the following code aims to let <xi:include> and <xi:fallback> tags (the two elements in the language) with all of the attributes of <xi:include> be included in an xml document so as to be resolvable into a single xml document. (note that this has not been thoroughly tested for all circumstances and may not necessarily reflect the standard behavior completely.) note also that if you wish to allow xml:base, you will need the xml:base function, and the line beginning var href = ... should become: var href = getxmlbaselink (/* xlink sans xml:base */ xinclude.getattribute('href'), /* element to query from */ xinclude); function resolvexincludes(docu) { // http://www.w3.org/tr/xinclude/#xml-included-items var xincludes = docu.getelementsbytagnamens('http://www.w3.org/2001/xinclude', ...
...And 2 more matches

Legacy layout methods - Learn web development
understanding how they work, and why they are different to css grid layout. this lesson will explain how grid systems and grid frameworks based on floats and flexbox work. having studied grid layout you will probably be surprised how complicated this all seems! this knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems. it is worth bearing in mind, as we explore these systems, that none of them actually create a grid in the way that css grid layout creates a grid. they work by giving items a size, and pushing them around to line them up in a way that looks like a grid. a two column layout let's start with the simplest possible example — a...
... top row of single columns will now lay out neatly as a grid. note: we've also given each column a light red color so you can see exactly how much space each one takes up. layout containers that we want to span more than one column need to be given special classes to adjust their width values to the required number of columns (plus gutters in between). we need to create an additional class to allow containers to span 2 to 12 columns. each width is the result of adding up the column width of that number of columns plus the gutter widths, which will always number one less than the number of columns. add the following at the bottom of your css: /* two column widths (120px) plus one gutter width (20px) */ .col.span2 { width: 140px; } /* three column widths (180px) plus two gutter widths (40px...
...load it in a browser, and try changing the viewport width — you should see the column widths adjust nicely to suit. note: if you are having trouble getting the above example to work, try comparing it against our finished version on github (see it running live also). easier calculations using the calc() function you could use the calc() function to do the math right inside your css — this allows you to insert simple mathematical equations into your css values, to calculate what a value should be. it is especially useful when there is complex math to be done, and you can even compute a calculation that uses different units, for example "i want this element's height to always be 100% of its parent's height, minus 50px". see this example from a mediarecorder api tutorial. anyway, back to ...
...And 2 more matches

CSS FAQ - Learn web development
render correctly? browsers use the doctype declaration to choose whether to show the document using a mode that is more compatible with web standards or with old browser bugs. using a correct and modern doctype declaration at the start of your html will improve browser standards compliance. modern browsers have two main rendering modes: quirks mode: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. documents with an incomplete, incorrect, or missing doctype declaration or a known doctype declaration in common use before 2001 will be rendered in quirks mode. standards mode: the browser attempts to follow the w3c standards strictly. new html pages are expected to be d...
...erve it with this type, it won't be applied. what is the difference between id and class? html elements can have an id and/or class attribute. the id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. the class attribute assigns a class name to the element, and that name can be used on many elements within the page. css allows you to apply styles to particular id and/or class names. use a class-specific style when you want to apply the styling rules to many blocks and elements within the page, or when you currently only have element to style with that style, but you might want to add more later. use an id-specific style when you need to restrict the applied styling rules to one specific block or element. this styl...
.... it is generally recommended to use classes as much as possible, and to use ids only when absolutely necessary for specific uses (like to connect label and form elements or for styling elements that must be semantically unique): using classes makes your styling extensible — even if you only have one element to style with a particular ruleset now, you might want to add more later. classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors. shorter stylesheets are more performant. class selectors have lower specificity than id selectors, so are easier to override if needed. note: see selectors for more information. how do i restore the default valu...
...And 2 more matches

Web fonts - Learn web development
prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. ...
... prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. ...
...n systems — the so-called web-safe fonts. you can use the font stack to specify preferable fonts, followed by web-safe alternatives, followed by the default system font, but this adds overhead in terms of testing to make sure that your designs look ok with each font, etc. web fonts but there is an alternative, which works very well, right back to ie version 6. web fonts are a css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it. amazing! the syntax required looks something like this: first of all, you have a @font-face block at the start of the css, which specifies the font file(s) to download: @font-face { font-family: "myfont"...
...And 2 more matches

Other form controls - Learn web development
objective: to understand the non-<input> form features, and how to implement them using html. multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element. <textarea cols="30" rows="8"></textarea> this renders like so: the main difference between a <textarea> and a regular single line text field is that users are allowed to include hard line breaks (i.e. pressing return) that will be included when the data is submitted. <textarea> also takes a closing tag, and any default text you want it to contain should be put between the opening and closing tags. in contrast, the <input> is an empty element with no closing tag — any default value is put inside the value attribute. note that even though you can put anyth...
...ubmitted 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 <textarea> is controlled with the css resize property. ...
...er 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 <textarea> is controlled with the css resize property. its possible values are: both: the default — allows resizing horizontally and vertically. horizontal: allows resizing only horizontally. ...
...And 2 more matches

The web and web standards - Learn web development
referred to as timbl) wrote a notebook program called enquire, which featured the concept of links between different nodes. sound familiar? fast forward to 1989, and timbl wrote information management: a proposal and hypertext at cern; these two publications together provided the background for how the web would work. they received a fair amount of interest, enough to convince timbl's bosses to allow him to go ahead and create a global hypertext system. by late 1990, timbl had created all the things needed to run the first version of the web — http, html, the first web browser, which was called worldwideweb, an http server, and some web pages to look at. in the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and...
...boration between many different companies, it means that no one company gets to control them, which is a really good thing. you wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of html that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off. this allows the web to remain a freely-available public resource. don't break the web another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible wit...
... browsers you are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). web browsers are the software programs people use to consume the web, and include firefox, chrome, opera, safari, and edge. http hypertext transfer protocol, or http, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). a typical conversation goes something like "hello web server. can you give me the files i need to render bbc.co.uk"? "sure thing web browser — here 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 bas...
...And 2 more matches

Graceful asynchronous programming with Promises - Learn web development
this is useful for setting up a sequence of async operations to work correctly. this article shows you how promises work, how you'll see them in use with web apis, and how to write your own. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand promises and how to use them. ...
...mise3.catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); to see this in action, try misspelling the url to the image and reloading the page. the error will be reported in the console of your browser's developer tools. this doesn't do much more than it would if you just didn't bother including the .catch() block at all, but think about it — this allows us to control error handling exactly how we want. in a real app, your .catch() block could retry fetching the image, or show a default image, or prompt the user to provide a different image url, or whatever. note: you can see our version of the example live (see the source code also). chaining the blocks together this is a very longhand way of writing this out; we've deliberately done this ...
...ether it fulfilled or rejected. previously you'd have to include the same code in both the .then() and .catch() callbacks, for example: mypromise .then(response => { dosomething(response); runfinalcode(); }) .catch(e => { returnerror(e); runfinalcode(); }); in more recent modern browsers, the .finally() method is available, which can be chained onto the end of your regular promise chain allowing you to cut down on code repetition and do things more elegantly. the above code can now be written as follows: mypromise .then(response => { dosomething(response); }) .catch(e => { returnerror(e); }) .finally(() => { runfinalcode(); }); for a real example, take a look at our promise-finally.html demo (see the source code also). this works the same as the promise.all() demo we looked at...
...And 2 more matches

Website security - Learn web development
te security, but it is not exhaustive. website security threats this section lists just a few of the most common website threats and how they are mitigated. as you read, note how threats are most successful when the web application either trusts, or is not paranoid enough about the data coming from the browser. cross-site scripting (xss) xss is a term used to describe a class of attacks that allow an attacker to inject client-side scripts through the website into the browsers of other users. because the injected code comes to the browser from the site, the code is trusted and can do things like send the user's site authorization cookie to the attacker. when the attacker has the cookie, they can log into a site as though they were the user and do anything the user can, such as access their ...
... as <script>, <object>, <embed>, and <link>. the process of modifying user data so that it can't be used to run scripts or otherwise affect the execution of server code is known as input sanitization. many web frameworks automatically sanitize user input from html forms by default. sql injection sql injection vulnerabilities enable malicious users to execute arbitrary sql code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. a successful injection attack might spoof identities, create new identities with administration rights, access all data on the server, or destroy/modify the data to make it unusable. sql injection types include error-based sql injection, sql injection based on boolean errors, and time-based sql injection. thi...
...mful). select * from users where name = 'a\';drop table users; select * from userinfo where \'t\' = \'t'; web frameworks will often take care of the character escaping for you. django, for example, ensures that any user-data passed to querysets (model queries) is escaped. note: this section draws heavily on the information in wikipedia here. cross-site request forgery (csrf) csrf attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. this type of attack is best explained by example. john is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an http post request that includes the account name and an amount of money. john constructs a form that in...
...And 2 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-side javascript frameworks next now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app. in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: learn and put into practice some basic svelte concepts, like creating components, passing data using props, render javascript expressions into our ...
...expressions in html attributes, like we did with the checked and id attributes of the checkbox. we've turned our static markup into a dynamic template ready to display the tasks from our component's state. great! we are getting there. working with props with a hardcoded list of todos, our todos component is not very useful. to turn our component into a general purpose to-do editor we should allow the parent of this component to pass in the list of todos to edit. this would allow us to save them to a web service or local storage and later retrieve them for update. so let's turn the array into a prop. in todos.svelte, replace the existing let todos = ... block with export let todos = []. export let todos = [] this may feel a little weird at first. that's not how export normally...
...try this now. <todos {todos} /> at this point your todos should render just like they did before, except that now we're passing them in from the app.svelte component. toggling and removing todos let's add some functionality to toggle the task status. svelte has the on:eventname directive for...
...And 2 more matches

Client-side tooling overview - Learn web development
ut also helps to package assets like html, css, and image files into convenient bundles that you can then go on to deploy, and also adds dependencies for you automatically whenever you try to use them. it can even handle some code transformation duties for you. webpack is another very popular packaging tool that does similar things. transformation this stage of your web app lifecycle typically allows you to code in either "future code" (such as the latest css or javascript features that might not have native support in browsers yet) or code using another language entirely, such as typescript. transformation tools will then generate browser-compatible code for you, to be used in production. generally web development is thought of as three languages: html, css, and javascript, and there are t...
...thers): the ability to write code using the latest language features and have that transformed into code that works on everyday devices. for example, you might want to write javascript using cutting-edge new language features, but still have your final production code work on older browsers that don’t support those features. good examples here include: babel: a javascript compiler that allows developers to write their code using cutting-edge javascript, which babel then takes and converts into old-fashioned javascript that more browsers can understand. developers can also write and publish plugins for babel. postcss: does the same kind of thing as babel, but for cutting-edge css features. if there isn’t an equivalent way to do something using older css features, postcss will ins...
... the same kind of thing as babel, but for cutting-edge css features. if there isn’t an equivalent way to do something using older css features, postcss will install a javascript polyfill to emulate the css effect you want. the option to write your code in an entirely different language and have it transformed into a web-compatible language. for example: sass/scss: this css extension allows you to use variables, nested rules, mixins, functions, and many other features, some of which are available in native css (such as variables), and some of which aren't. typescript: typescript is a superset of javascript that offers a bunch of additional features. the typescript compiler converts typescript code to javascript when building for production. frameworks such as react, ember, an...
...And 2 more matches

Accessibility Features in Firefox
fire vox extension. fire vox can also be used on windows or os x. for more detailed information, please check the assistive technology compatibility guide is kept on an editable wiki. keyboard support "mozilla firefox is a web-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. this allows copying arbitrary pieces of text to the clipboard. the f7 key toggles this feature on/off. tabbed browsing helps keyboard users by putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation ...
...ering the alt+tab order which makes keyboard navigation within the entire windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing custom searches from the command line such as "word punditry" to look up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can swi...
...ch faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination. the built-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys. the accessibility extension may be installed on top of firefox, allowing keyboard access to document structure. the find bar allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification users because there is a single point of regard for the search. it also assists users of input aids because there are far fewer keys to type to get the desired location. for example, it is possi...
...And 2 more matches

Chrome registration
r, and it can be any file type viewable from within mozilla. it will typically be a xul file, since xul is designed for describing the contents of windows and dialogs. the javascript files that define the user interface are also contained within the content packages, as well as most xbl binding files. locale localizable applications keep all their localized information in locale providers. this allows translators to plug in a different chrome package to translate an application without altering the rest of the source code. the two main types of localizable files are dtd files and java-style properties files. skin a skin provider is responsible for providing a complete set of files that describe the visual appearance of the chrome. typically a skin provider will provide css files and images.
...ifests are in a simple line-based format. each line is parsed individually; if the line is parsable the chrome registry takes the action identified by that line, otherwise the chrome registry ignores that line (and prints a warning message in the runtime error console). locale packagename localename path/to/files skin packagename skinname path/to/files note: the characters @ # ; : ? / are not allowed in the packagename. firefox 2, thunderbird 2, and seamonkey 1.1 will not find the chrome when packagename is mixed case. if the above example had a packagename of camelcasepackage, you would get an error message similar to "no chrome registered for chrome://camelcasepackage/path/to/files". firefox 3, thunderbird 3, and seamonkey 2 support mixed case. bug resolved in mozilla 1.9; see bug 13218...
...s preferences. style style overlays (custom css which will be applied to a chrome page) are registered with the following syntax: style chrome://uri-to-style chrome://stylesheet-uri [flags] note: only stylesheets at chrome uris can be applied in this way. override in some cases an extension or embedder may wish to override a chrome file provided by the application or xulrunner. in order to allow for this, the chrome registration manifest allows for "override" instructions: override chrome://package/type/original-uri.whatever new-resolved-uri [flags] note: overrides are not recursive (so overriding chrome://foo/content/bar/ with file:///home/john/blah/ will not usually do what you want or expect it to do). also, the path inside overridden files is relative to the overridden path, not t...
...And 2 more matches

Script security
er, gecko can load javascript from untrusted and potentially hostile web pages and run it on the user's computer. the security model for web content is based on the same-origin policy, in which code gets full access to objects from its origin but highly restricted access to objects from a different origin. the rules for determining whether an object is same-origin with another, and what access is allowed cross-origin, are now mostly standardized across browsers. gecko has an additional problem, though: while its core is written in c++, the front-end code is written in javascript. this javascript code, which is commonly referred to as chrome code, runs with system privileges. if the code is compromised, the attacker can take over the user's computer. legacy sdk extensions also run with chrome p...
... https://example.org/ can access each other, and they can also access objects served from https://example.org/foo. objects that are cross-origin get highly restricted access to each other, according to the same-origin policy. for example, code served from https://example.org/ trying to access objects from https://somewhere-else.org/ will have restricted access. objects in a privileged scope are allowed complete access to objects in a less privileged scope, but by default they see a restricted view of such objects, designed to prevent them from being tricked by the untrusted code. an example of this scope is chrome-privileged javascript accessing web content. objects in a less privileged scope don't get any access to objects in a more privileged scope, unless the more privileged scope explici...
..., there's a separate compartment for every global object. this means that each global object and the objects associated with it live in their own region of memory. 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 chec...
...And 2 more matches

Getting Started with Chat
en 9am and 7pm pst monday to friday, excluding us holidays. when asking a question, be patient. sometimes, it can take a few minutes for people to respond. posting a message like "help!" is not particularly helpful. asking a good question will result in a better experience for both you and the person trying to help. relax and have fun! software there are several different applications which allow you to connect to irc networks. you will need to use the following information to configure the server connection: server: irc.mozilla.org port: 6667 (default) or 6697 (ssl) desktop clients desktop clients tens to allow the most detailed configuration. for example, you can connect using ssl or a non-secure connection, and you can configure the client to automatically connect to a server an...
... ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available. if not, you'll have to download source code and compile. note: for a complete list of irc clients go here. web-based clients there are also a few web-based clients which allow connecting to irc by clicking on irc:// links. one of the simplest web-based clients is mibbit, another is irccloud. these operate very much in the same way as the previously mentioned desktop clients and chatzilla. mibbit does not require flash or any other plugins. channels here is a list of channels you should be aware of as a member of the mozilla community: (remember to use irc.mozilla.or...
...splay information about the specified user. this information displays in the server window. for more information about irc commands go here. bots some users in irc are not human. these users are known as bots and automatically perform certain tasks; some automatic, some triggered by other users. the most common of these bots are called nickserv, chanserv, and firebot. nickserv this bot allows you to register your nickname which prevents other users from using it. nickserv also automatically elevates all registered users to operators when they sign on.the following are some helpful commands which can be used by nickserv: /msg nickserv register password email this registers your nickname with the server. /msg nickserv identify password once registered, you need...
...And 2 more matches

IPDL Tutorial
ipdl, short for "inter-process-communication protocol definition language", is a mozilla-specific language allowing c++ code to pass messages between processes or threads in an organized and secure way. all messages for multi-process plugins and tabs in firefox are declared in the ipdl language. to experiment with adding a new ipdl protocol, see creating a new protocol. all ipdl messages are sent between parent and a child end points, called actors. an ipdl protocol declares how actors communicate: it declares the possible messages that may be sent between actors, as well as a state machine describing when messages are allowed to be sent. the parent actor is typically the more permanent side of the conversation: parent/child actors parent child ipc tabs...
... // pdirectionchild.h class pdirectionchild { protected: virtual void recvfoo() = 0; virtual void recvbaz() = 0; public: void sendbar() { /* boilerplate */ } void sendbaz() { /* boilerplate */ } }; you can use the child, parent, and both labels multiple times in a protocol specification. they behave like public, protected, and private labels in c++. parameters message declarations allow any number of parameters. parameters specify data that are sent with the message. their values are serialized by the sender and deserialized by the receiver. ipdl supports built-in and custom primitive types, as well as unions and arrays. the built-in simple types include the c++ integer types (bool, char, int, double) and xpcom string types (nsstring, nscstring). ipdl imports these automatic...
... returned values: class pplugininstanceparent { ... bool sendinit(bool* windowless, bool* ok) { ... }; }; class pplugininstancechild { ... virtual bool recvinit(bool* windowless, bool* ok) = 0; } rpc semantics "rpc" stands for "remote procedure call," and this third semantics models procedure call semantics. a quick summary of the difference between rpc and sync semantics is that rpc allows "re-entrant" message handlers: while an actor is blocked waiting for an "answer" to an rpc "call", it can be unblocked to handle a new, incoming rpc call. in the example protocol below, the child actor offers a "callmecallyou()" rpc interface, and the parent offers a "callyou()" rpc interface. the rpc qualifiers mean that if the parent calls "callmecallyou()" on the child actor, then the child ...
...And 2 more matches

Mozilla DOM Hacking Guide
known property on the object (window, in our case). in getproperty(), we check if the property being set is "location". if that is the case, we call nsidomlocation::sethref(). in fact, when setting window.location, we really set window.location.href. this is all possible thanks to the magic of the interaction between xpconnect and the dom. the second example is the history object. other browsers allow the history object to be used like an array, e.g. history[1]. the behavior "act as an array" cannot be reflected in the idl itself. fortunately, xpconnect provides us with a way to make our class available as an array in javascript. i'm talking about the "scriptable flags". the nsixpcscriptable interface, implemented by the nsdomclassinfo class (see section) defines several flags, one of which is...
...ray, e.g. history[1]. the behavior "act as an array" cannot be reflected in the idl itself. fortunately, xpconnect provides us with a way to make our class available as an array in javascript. i'm talking about the "scriptable flags". the nsixpcscriptable interface, implemented by the nsdomclassinfo class (see section) defines several flags, one of which is the want_getproperty flag. when set, it allows us to define a getproperty() function on nshistorysh (the helper class for the history object), which will handle the array behavior. indeed, it will forward the call history[1] to history.item(1), which is defined in the idl and easily coded. the relevant code is at nsdomclassinfo.cpp, around line 4520. these two examples demonstrate the power of the dom combined with xpconnect and the javascr...
...ata members, and register class names and class prototypes. finally it sets sisinitialized to true. the actions that concern the dom are described below. first, the call to callgetservice() initializes sxpconnect. then the script security manager (ssecman) is initialized. getsafejscontext() grabs us a cool js context to run our javascript code in. the part about componentregistrar is designed to allow external modules (in this case xpath) to be included in domclassinfo and as such benefit from the javascript benefits it provides. after that, we fill the blanks in the sclassinfodata array. if you remember the discussion in the introduction to class info, there is the main array, sclassinfodata, filled with objects of type nsdomclassinfodata. however when the array is created, three data member...
...And 2 more matches

Mozilla Port Blocking
mozilla responded by modifying how protocols can access ports. ...
...mozilla responded by modifying how protocols can access ports. ...
...lication requires access to one of the ports which is blocked in mozilla. if a user attempts to access a uri on a blocked port, mozilla shows one of the following alerts to the user or in the error console. "access to the port number given has been disabled for security reasons." "establishing a connection to an unsafe or otherwise banned port was prohibited" "0x804b0013 (ns_error_port_access_not_allowed)" if your product or web site uses a port which is blocked by mozilla's default port blocking rules, you can either change the port of your service to a unblocked value (recommended if possible) or ask your mozilla users to enable the port. for details on which ports are blocked and how to override the blocking see below. modifying mozilla's port blocking at run time users can modify the defaul...
...And 2 more matches

Profiling with the Firefox Profiler
are annotated with "[default]" are in the parent (aka "ui", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the web content (aka "child") processes. tip: long-running tasks in the parent process will block all input or drawing with the browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz. tracing markers red: these indicate that the event loop is being unresponsive. note that high priority events such as vsync are not included here. also note that this indicates what would have happened had there been an event waiting and not necessarily that there was an event pending for that long. black: these indicate synchronous ipc call...
...and not necessarily that there was an event pending for that long. black: these indicate synchronous ipc calls. ranges ranges of time can be zoomed in on by clicking and dragging anywhere in the tracing marker or thread areas. once a range is selected, a magnifying glass appears which zooms into that range. clicking on a tracing marker will create a selection corresponding with its duration allowing for easy zooming in on interesting time ranges. as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to previously-selected ranges or the entire profile (denoted as "full range"). tip: while zooming out to a previously-selected range deletes the narrower range, the browser back button can be used to restore the narrower range. thread timeline(s) thread/pr...
... sort by the time spent in a function in descending order. note that the running time here is only the running time of that particular frame and not the total of all called instances of that function. you can see the samples in the timeline get darker as you select different functions in the call tree; these are samples that were taken when the selected function was running. "filter stacks" will allow you to search for functions by name. one of the easiest ways to find slowness caused by a page's js is to type its url into the "filter stacks" box. you can then select corresponding call tree entries and watch the timeline for entries in the content process main thread that get darker as you select call tree entries. tip: if things are blank elsewhere in the ui, you may have text entered into ...
...And 2 more matches

NSS tools : certutil
o one. --upgrade-merge upgrade an old database and merge it into a new database. this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). arguments arguments modify a command option and are usually lower case, numbers, or symbols. -a use ascii format or allow the use of ascii format for input or output. this formatting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the valid...
...tting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set relative to the validity end time. specifying seconds (ss) is optional. when specifying an explicit time, use a z at the end of the term, yymmddhhmmssz, to close it. when specifying an offset time, use yymmddhhmmss+hhmm or yymmddhhmmss-hhmm for adding or subtracting time, respectively. if this option...
...icate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g keysize set a key size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 16384 bits. the default is 2048 bits. any size between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless specified otherwise the default token is an internal slot. -i input_file pass an input file to the command. depending on the command option, an input file can be a specific certificate, a certificate request file, or a batch file of commands...
...And 2 more matches

sslerr.html
te has been requested." the application has attempted to configure ssl to use an unknown cipher suite. ssl_error_no_ciphers_supported -12265 "no cipher suites are present and enabled in this program." possible causes: (a) all cipher suites have been configured to be disabled, (b) the only cipher suites that are configured to be enabled are those that are disallowed by cipher export policy, (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected. ssl_error_bad_block_padding -12264 "ssl received a record with bad block padding." ssl was using a block cipher, and the last block in an ssl record had incorrect padding information...
...this probably indicates a flaw in the remote peer's implementation. ...
...this probably indicates a flaw in the remote peer's implementation. ssl_error_rx_malformed_hello_request -...
...And 2 more matches

certutil
r sqlite databases (cert9.db and key4.db). --upgrade-merge upgrade an old database and merge it into a new database. this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). arguments option arguments modify an action and are lowercase. -a use ascii format or allow the use of ascii format for input or output. this formatting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the validi...
...atting follows rfc 1113. for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set relative to the validity end time. specifying seconds (ss) is optional. when specifying an explicit time, use a z at the end of the term, yymmddhhmmssz, to close it. when specifying an offset time, use yymmddhhmmss+hhmm or yymmddhhmmss-hhmm for adding or subtracting time, respectively. if this option is not used, the valid...
...ificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g keysize set a key size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 8192 bits. the default is 1024 bits. any size between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless specified otherwise the default token is an internal slot (specifically, internal slot 2). this slot can also be explicitly named with the string "internal". an internal slots is a virtual slot maintained in software, rather than a hardware device. internal slot 2 is ...
...And 2 more matches

Rhino overview
introduction most people who have used javascript before have done so by adding scripts to their html web pages. however, rhino is an implementation of the core language only and doesn't contain objects or methods for manipulating html documents. rhino contains all the features of javascript 1.7 allows direct scripting of java a javascript shell for executing javascript scripts a javascript compiler to transform javascript source files into java class files a javascript debugger for scripts executed with rhino language the javascript language itself is standardized by standard ecma-262 ecmascript: a general purpose, cross-platform programming language. rhino 1.3 and greater conform to edition 3 of the standard. rhino 1.6 and greater implement ecma-357 ecmascript for xml (e4...
...a-262 ecmascript: a general purpose, cross-platform programming language. rhino 1.3 and greater conform to edition 3 of the standard. rhino 1.6 and greater implement ecma-357 ecmascript for xml (e4x). see the specification for more information on the standard, and rhino version 1.6r1 release notes for details on the implementation in rhino. in addition, rhino has implemented javaadapters, which allows javascript to implement any java interface or extend any java class with a javascript object. see the enum.js example for more information. numerous books and tutorials on javascript are available. javascript: the definitive guide is recommended, and contains a chapter on rhino. deprecated language features several language features introduced in javascript 1.2 are now deprecated. these featu...
...vascript to implement any java interface or extend any java class with a javascript object. see the enum.js example for more information. numerous books and tutorials on javascript are available. javascript: the definitive guide is recommended, and contains a chapter on rhino. deprecated language features several language features introduced in javascript 1.2 are now deprecated. these features allow "computational reflection": that is, the ability for a script to determine and influence aspects of the way it is evaluated. these features are generally not broadly useful, yet they impose significant constraints on implementations that hamper or prevent optimization. the deprecated features are the __proto__ and __parent__ properties, and the constructors with, closure, and call. attempts to in...
...And 2 more matches

WebReplayRoadmap
te immediately. these messages will show up on the timeline and can be seeked to in the same way as other console messages. dom/css integration (partially implemented) when paused, the inspector panel can be used to inspect the dom and css state of the page. ...
...tially implemented) when paused, the inspector panel can be used to inspect the dom and css state of the page. new features are possible with time travel, though, which would be nice to support: supporting the debugger's event breakpoints would allow searching the recording for places where particular dom events occur, and -- in the same manner as logpoints -- logging them to the console and allowing them to be seeked to later. similarly, when the debugger supports dom mutation breakpoints (bug 1547692), the recording can be searched for dom mutations, and mutations can be logged to the console and seeked to later. allowing css to be changed while paused somewhere in the recording and update graphics with the effects of those changes. object watching (not yet implemented) it would be ...
...unsound by design, and it is pretty easy to satisfy the type system and yet have different types in practice. a recording can be analyzed for the types that appear in practice. these can be compared with the types provided to the type system, and any mismatches can be flagged. the points in the recording where the mismatches occur can be identified, and the debugger can seek to those points to allow further investigation of the causes of the mismatch. an alternate use of the types that appear in practice would be to provide seed information for automatically populating the types in an app that is being converted to use flow or typescript. type profiling (not yet implemented) the types that appear in practice have a large effect on how well the associated code can be optimized by jits. wh...
...And 2 more matches

Component Internals
y the application startup itself. a web browser that embeds gecko, for example, may initialize xpcom at startup through the embedding apis. another application may delay this startup until xpcom is needed for the first time. in either case, the initialization sequence within xpcom is the same. xpcom starts when the application makes a call to initialize it. parameters passed to this startup call allow you to configure some aspects of xpcom, including the customization of location of specific directories. the main purpose of the api at this point is to change which components directory xpcom searches when it looks for xpcom components. this is how the api is used, for example, in the gecko runtime environment (gre). xpcom startup the six basic steps to xpcom startup are as follows: applic...
...t you observe cannot be used to implement something like a "are you sure you want to quit?" dialog. rather, the shutdown event gives the component or embedding application a last chance to clean up any leftovers before they are released. in order to support something like an "are you sure you want to quit" dialog, the application needs to provide a higher-level event (e.g., startshutdown()) which allows for cancellation. note also that xpcom services may deny you access once you have received the shutdown notification. it is possible that xpcom will return an error if you access the nsiservicemanager at that point, for example, so you may have to keep a reference-counted pointer to the service you are interested in using during this notification. component loaders components can be written ...
...es a basic abstraction of the core xpcom object. an overview of xpcom discussed the factory design pattern that's used in a factory object. at this layer of the xpcom component library, the factory objects are factories for the core xpcom objects of the layer below. one more layer outward is the module code. the module interface provides yet another abstraction - this time of the factories - and allows for multiple factory objects. from the outside of the component library, there is only the single entry point, nsgetmodule(). this point of entry may fan out to any number of factories, and from there, to any number of xpcom objects. the factory design pattern in xpcom is represented by the nsifactory interface. the module layer is represented by the nsimodule interface. most component librarie...
...And 2 more matches

Setting up the Gecko SDK
ithreaded dll runtime and the debug configuration to the debug multithreaded dll runtime (this needs clarification): after making these changes, press ok. this finalizes the project settings and gives you a project that will hold and compile xpcom components. building a windows project this section is writting for those of you who do not wish to install visual studio or the express edition, allowing the user to be able to create commercial extensions without buying the full version of visual studio and allowing them to use their own editors. first, you need to get the sdk, this project uses the following tools to compile the extension for use. tools needed gecko 1.9.2 sdk: http://releases.mozilla.org/pub/mozi....win32.sdk.zip windows platform sdk: http://www.microsoft.com/downloads/...
... sets up the compiler to know where included code files are, it looks in the platform sdk, visual studio 9.0 include (installed with the platform sdk), and the gecko sdk includes. set lib=c:\program files\microsoft sdks\windows\v7.0\lib;c:\program files (x86)\microsoft visual studio 9.0\vc\lib;d:\projects\xulrunner-sdk\lib this tells the linker where the default libraries to bind to are. this allows you to created the component without sending any extra dlls set path=%path%;d:\projects\xulrunner-sdk\sdk\bin;d:\projects\xulrunner-sdk\bin this tells the command prompt where to find the gecko tools, importantly (xpidl, regxpcom, and gmake). building the sample built sample in d:\projects\sample the idl this step is fairly straight forward. first create the idl file. ispecialthing.idl ...
...ib" /machine:i386 xpcom.lib xpcomglue_s.lib nspr4.lib "cspecialthing.obj" "cspecialthingmodule.obj" clean: del *.lib *.dll *.obj *.exp please note, this makefile is only for compiling the sample, you will probably have more .lib files if you are linking against winapi functions like kernel32.lib, user32.lib, etc. also, if you notice, this turns on "xp_win" and "xp_win32" definitions, this allows xp and onward support. to build the component, just type "gmake", to clean up files run "gmake clean". installing component this if for manually installing the component for testing. i used a different firefox profile for testing purposes called extensions. copy the .dll file to your extensions directory. %applicationdata%\mozilla\firefox\profiles\x.extensions\extensions\bob@george.com. th...
...And 2 more matches

nsIClipboardDragDropHooks
are added. adding the same hook to the same window will not add a second call. each hook can only be called once per user action/api. not all hooks are guaranteed to be called. if there are multiple hooks set for a window, any of them has an opportunity to cancel the action so no further processing will occur. if any errors occur (without setting the boolean result) the default action will occur. ...
...ce per user action/api. not all hooks are guaranteed to be called. if there are multiple hooks set for a window, any of them has an opportunity to cancel the action so no further processing will occur. if any errors occur (without setting the boolean result) the default action will occur. allowdrop() will be called many times during drag so ensure that it is efficient. ...
...there are multiple hooks set for a window, any of them has an opportunity to cancel the action so no further processing will occur. if any errors occur (without setting the boolean result) the default action will occur. allowdrop() will be called many times during drag so ensure that it is efficient. method overview boolean allowdrop(in nsidomevent event, in nsidragsession session); boolean allowstartdrag(in nsidomevent event); boolean oncopyordrag(in nsidomevent aevent, in nsitransferable trans); boolean onpasteordrop(in nsidomevent event, in nsitransferable trans); methods allowdrop() tells gecko whether a drop is allowed on this content area. boolean allowdrop( in nsidomevent event, in nsidragsession session ); parameters event the dom event (drag gesture). session the dra...
...And 2 more matches

nsIDroppedLinkHandler
dom/base/nsidroppedlinkhandler.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean candroplink(in nsidomdragevent aevent, in prbool aallowsamedocument); astring droplink(in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped. boolean candroplink( in nsidomdragevent aevent, in prbool aallo...
...this check includes any parent, sibling and child frames in the same content tree. if true, the source is not checked. return value true if the link being dragged can be dropped. ...
...this check includes any parent, sibling and child frames in the same content tree. if true, the source is not checked. return value true if the link being dragged can be dropped. ...
...And 2 more matches

nsIMsgFolder
gned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean allowundo); void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages,in boolean ismove, in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener, in boolean isfolder, in boolean allowundo); void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder,in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener ); void copyfilemessage(in nsifi...
...s boolean readonly: returns true if this folder has sub folders. messages nsisimpleenumerator readonly: returns a list of components.interfaces.nsimsgdbhdr. numsubfolders unsigned long readonly: returns the number of sub folders that this folder has. invfeditsearchscope boolean readonly customidentity nsimsgidentity readonly: this allows a folder to have a special identity. e.g., you might want to associate an identity with a particular newsgroup, or for imap shared folders in the other users namespace, you might want to create a delegated identity. gettingnewmessages boolean are we running a url as a result of the user clicking get msg. filepath nsilocalfile local path of this folder. base...
...ath of this folder. basemessageuri acstring readonly charset acstring the charset of this folder. charsetoverride boolean biffstate unsigned long locked boolean readonly flags unsigned long direct access to the set/get all the flags at once. knowssearchnntpextension boolean readonly allowsposting boolean readonly relativepathname acstring readonly sizeondisk unsigned long size of this folder on disk (not including .msf file) for imap, it's the sum of the size of the messages. username acstring readonly hostname acstring readonly expungedbytes unsigned long readonly deletable boolean rea...
...And 2 more matches

nsIProcessScriptLoader
le: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisupports this interface is used by parent process message managers to load scripts into a child process. the scripts run only once per process. the global object for process scripts is a contentprocessmessagemanager. ...
... in boolean aallowdelayedload) void removedelayedprocessscript(in astring aurl); jsval getdelayedprocessscripts(); loadprocessscript() load a script in the child process. process scripts are loaded as soon as loadprocessscript() is called. if this function is called on a chromemessagebroadcaster, : it will load the process script into all child processes. if aallowdelayedload is true, then the script will also be loaded into any new child processes created after the loadprocessscript() call. otherwise it will only be loaded into child processes that exist at the time of the call. ...
...it's possible that the child process for this chromemessagesender is not yet available at the time of the loadprocessscript() call, and if you pass false in this situation, your process script won't be loaded. ...
...And 2 more matches

nsISHistoryListener
urge(in long anumentries); boolean onhistoryreload(in nsiuri areloaduri, in unsigned long areloadflags); methods onhistorygoback() called when navigating to a previous session history entry, for example due to an nsiwebnavigation.goback() call. boolean onhistorygoback( in nsiuri abackuri ); parameters abackuri the uri of the session history entry being navigated to. ...
...onhistorygotoindex() called when navigating to a session history entry by index, for example, when nsiwebnavigation.gotoindex() is called. boolean onhistorygotoindex( in long aindex, in nsiuri agotouri ); parameters aindex the index in session history of the entry to be loaded. ...
...o proceed or false to cancel it. onhistorygotoindex() called when navigating to a session history entry by index, for example, when nsiwebnavigation.gotoindex() is called. boolean onhistorygotoindex( in long aindex, in nsiuri agotouri ); parameters aindex the index in session history of the entry to be loaded. agotouri the uri of the session history entry to be loaded. return value true to allow the operation to proceed or false to cancel it. onhistorynewentry() called when a new document is added to session history. new documents are added to session history by the docshell when new pages are loaded in a frame or content area; for example by calling nsiwebnavigation.loaduri(). note: you can't cancel this operation. void onhistorynewentry( in nsiuri anewuri ); parameters anewuri the ...
...And 2 more matches

nsITreeView
note: drop_on will only be passed to candrop() if the item is a container; see iscontainer(). boolean candrop( in long index, in long orientation, in nsidomdatatransfer datatransfer ); parameters index the ...
...before -1 drop_on 0 drop_after 1 indropbefore 0 obsolete since gecko 1.8 indropon 1 obsolete since gecko 1.8 indropafter 2 obsolete since gecko 1.8 methods candrop() methods used by the drag feedback code to determine if a drag is allowable at the current location. to get the behavior where drops are only allowed on items, such as the mailnews folder pane, always return false when the orientation is not drop_on. note: drop_on will only be passed to candrop() if the item is a container; see iscontainer(). boolean candrop( in long index, in long orientation, in nsidomdatatransfer datatransfer ); parameters index the index of the row. orientation the position around the given row. defined i...
.... boolean candrop( in long index, in long orientation, in nsidomdatatransfer datatransfer ); parameters index the index of the row. orientation the position around the given row. defined in constants. datatransfer this parameter, added in gecko 1.9.2, provides the data being dragged, so that it can be examined to determine if a drop is possible. ...
...And 2 more matches

nsIWebContentHandlerRegistrar
be thrown. this string must also be of either the http or https schemes. title the title of the handler presented to the user as a string. contentwindow the dom content window from which the method has been called. note: script must execute from same domain as uri or else it will throw permission error. can bypass this by opening about:config and setting preference of gecko.handlerservice.allowregisterfromdifferenthost to true. examples register a webmail service as mailto handler the following code aims to add "outlook.com live mail" to list of webservice handlers. in the image below "gmail" and "yahoo! mail" already exist as webservice handlers. cu.import('resource://gre/modules/services.jsm'); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1...
...=compose&to=%s as a content or protocol handler'permission denied to add http://mail.live.com/secure/start?action=compose&to=%s as a content or protocol handler' when calling method: [nsiwebcontenthandlerregistrar::registerprotocolhandler] if the host names do match then a confirmation like this will be seen: this domain check can be bypassed by setting the preference of gecko.handlerservice.allowregisterfromdifferenthost to true as in this code here: var {classes: cc, interfaces: ci, utils: cu} = components; cu.import("resource://gre/modules/services.jsm"); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var allowregisterfromdifferenthost = services.prefs.getboolpref('gecko.handlerservic...
...gisterfromdifferenthost to true as in this code here: var {classes: cc, interfaces: ci, utils: cu} = components; cu.import("resource://gre/modules/services.jsm"); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var allowregisterfromdifferenthost = services.prefs.getboolpref('gecko.handlerservice.allowregisterfromdifferenthost'); if (!allowregisterfromdifferenthost) { services.prefs.setboolpref('gecko.handlerservice.allowregisterfromdifferenthost', true); } var htmlcontentwindow = services.wm.getmostrecentwindow('navigator:browser'); //because we set the preference to true above, we need any window that has a browser, just pass the domwindow and the registerprotocolhandler will get the conte...
...And 2 more matches

Index
products. it assumes you are already familiar with configuring preferences for deployed builds in addition to setting up thunderbird to use an ldap directory. it should be noted that all of this information applies to both thunderbird and the seamonkey application suite. 34 mail and rdf mozilla mail exposes many of it's data structures to rdf through a few datasources. this allows exposure of mailnews-specific data to user interface using rdf templates. 35 mail client architecture overview sections in grey refer to modules outside of mail/news 36 mail composition back end by richard h. pizzarro <rhp@netscape.com> contents 37 mail event system mozilla mail requires an event system to notify different subsyst...
...oped to support the xpcshell-tests; see the core xpcshell-tests page for more information on how to develop these. 42 mailbox mailnews the mailbox protocol is used to read messages from a local folder berkeley mailbox. it consists of nsmailboxservice, nsmailboxurl, and nsmailboxprotocol. this may seem like a lot of infrastructure just to read messages from a flat file, but it allows us to do it asynchronously, and to have reading local messages fit into the same kind of mechanisms that reading nntp and imap messages do - running urls, getting onstart/stoprunningurl notifications when the url starts/stops, etc. 43 mailnews and mail code review requirements this document describes the process for reviewing patches to the mozilla/mailnews and mozilla/mai...
...y not be relevant. 55 thunderbird binaries branch, trunk, comm-central, thunderbird described below are three types of generally available thunderbird packages - releases, early preview releases, and nightly builds (including trunk development builds) - and their downloaded locations. additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in related bug reports. 56 thunderbird configuration files config editor, configuration files many of the tips and tricks mentioned on this site can be applied by using the built-in config editor. to access the config editor, go to tools > options or do thunderbird > preferences. if you are on mac os x, and on linux ...
...And 2 more matches

Dominators view - Firefox Developer Tools
the dominators view is new in firefox 46. starting in firefox 46, the memory tool includes a new view called the dominators view. this is useful for understanding the "retained size" of objects allocated by your site: that is, the size of the objects themselves plus the size of the objects that they keep alive through references. if you already know what shallow size, retained size, and dominators are, skip to the dominators ui section. otherwise, you might want to review the article on dominators concepts. dominators ui to see the dominators view for a snapshot, select "dominators" in the "view" drop-down list. it looks something like this: the dominators view consists of two panels: the dominators tree panel shows you which nodes in the snapshot are retaining the most memo...
...re more than one root. there may be many (often temporary) roots. for example: variables allocated on the stack need to be rooted, or internal caches may need to root their​ elements. any other node that's referenced from two different roots (since in this case, neither root dominates it). each entry displays: the retained size of the node, as bytes and as a percentage of the total the shallow size of the node, as bytes and as a percentage of the total the nodes's name and address in memory. entries are ordered by the amount of memory that they retain. for example: in this screenshot we can see five entries under "gc roots". the first two are call and window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively. you can also see that these ob...
...as a percentage of the total the nodes's name and address in memory. entries are ordered by the amount of memory that they retain. for example: in this screenshot we can see five entries under "gc roots". the first two are call and window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively. you can also see that these objects have a relatively tiny "shallow size", so almost all of the retained size is in the objects that they dominate. immediately under each gc root, you'll see all the nodes for which this root is the immediate dominator. these nodes are also ordered by their retained size. for example, if we click on the first window object: we can see that this window dominates a css2properties object, whose retained size is 2% of the total s...
...And 2 more matches

DOMException - Web APIs
names are listed here. some apis define their own sets of names, so this is not necessarily a complete list. note: because historically the errors were identified by a numeric value that corresponded with a named variable defined to have that value, some of the entries below indicate the legacy code value and constant name that were used in the past. indexsizeerror the index is not in the allowed range. for example, this can be thrown by the range object. (legacy code value: 1 and legacy constant name: index_size_err) hierarchyrequesterror the node tree hierarchy is not correct. (legacy code value: 3 and legacy constant name: hierarchy_request_err) wrongdocumenterror the object is in the wrong document. (legacy code value: 4 and legacy constant name: wrong_document_err) invalidchar...
...equesterror the node tree hierarchy is not correct. (legacy code value: 3 and legacy constant name: hierarchy_request_err) wrongdocumenterror the object is in the wrong document. (legacy code value: 4 and legacy constant name: wrong_document_err) invalidcharactererror the string contains invalid characters. (legacy code value: 5 and legacy constant name: invalid_character_err) nomodificationallowederror the object cannot be modified. (legacy code value: 7 and legacy constant name: no_modification_allowed_err) notfounderror the object cannot be found here. (legacy code value: 8 and legacy constant name: not_found_err) notsupportederror the operation is not supported. (legacy code value: 9 and legacy constant name: not_supported_err) invalidstateerror the object is in an invalid stat...
...ct is in an invalid state. (legacy code value: 11 and legacy constant name: invalid_state_err) syntaxerror the string did not match the expected pattern. (legacy code value: 12 and legacy constant name: syntax_err) invalidmodificationerror the object cannot be modified in this way. (legacy code value: 13 and legacy constant name: invalid_modification_err) namespaceerror the operation is not allowed by namespaces in xml. (legacy code value: 14 and legacy constant name: namespace_err) invalidaccesserror the object does not support the operation or argument. (legacy code value: 15 and legacy constant name: invalid_access_err) typemismatcherror the type of the object does not match the expected type. (legacy code value: 17 and legacy constant name: type_mismatch_err) this value is depre...
...And 2 more matches

Element.classList - Web APIs
enlist': " + "the token provided ('"+v[wsindex]+"') contains html space characters, which are not valid in tokens."); } // 2. ...
...are not valid in tokens."); } // 2. ...
...ropchange = 1, target.classlist = restokenlist, target.classname = strval; skippropchange = 0, restokenlist.length = tokens.length - sub; } } function polyfillclasslist(ele){ if (!ele || !("innerhtml" in ele)) throw typeerror("illegal invocation"); ele.detachevent( "onpropertychange", whenpropchanges ); // prevent duplicate handler infinite loop allowtokenlistconstruction = 1; try{ function protoobj(){} protoobj.prototype = new domtokenlist(); } finally { allowtokenlistconstruction = 0 } var protoobjproto = protoobj.prototype, restokenlist = new protoobj(); a: for(var toks=ele.classname.trim().split(wsre), ci=0, clen=toks.length, sub=0; ci !== clen; ++ci){ for (var inneri=0; inneri !== ci; ++inneri) ...
...And 2 more matches

HTMLSelectElement.disabled - Web APIs
the htmlselectelement.disabled is a boolean that reflects the disabled html attribute, which indicates whether the control is disabled. if it is disabled, it does not accept clicks. a disabled element is unusable and un-clickable. ...
... the htmlselectelement.disabled is a boolean that reflects the disabled html attribute, which indicates whether the control is disabled. if it is disabled, it does not accept clicks. a disabled element is unusable and un-clickable. ...
... syntax edit aselectelement.disabled = abool; example html <label> allow drinks? ...
...And 2 more matches

MediaTrackConstraints - Web APIs
for each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you'd like to be as close to as possible. ...
...ates which are acceptable and/or required. height a constrainlong specifying the video height or range of heights which are acceptable and/or required. width a constrainlong specifying the video width or range of widths which are acceptable and/or required. resizemode a constraindomstring object specifying a mode or an array of modes the ua can use to derive the resolution of a video track. allowed values are none and crop-and-scale. none means that the user agent uses the resolution provided by the camera, its driver or the os. crop-and-scale means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constraints that affect the resolution. properties of shared screen tracks these constraints apply to mediatrackconstraints objects specifi...
...s specified as part of the displaymediastreamconstraints object's video property when using getdisplaymedia() to obtain a stream for screen sharing. cursor a constraindomstring which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. the value may be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor. always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared ...
...And 2 more matches

Signaling and video calling - Web APIs
a connection is established through a discovery and negotiation process called signaling. this tutorial will guide you through building a two-way video-call. webrtc is a fully peer-to-peer technology for the real-time exchange of audio, video, and data, with one central caveat. a form of discovery and media format negotiation must take place, as discussed elsewhere, in order for two devices on different networks to locate one another. this process is called signaling and involves both devices connecting to a third, mutually agreed-upon server. through this third server, the two devices can locate one another, and exchange negotiation messages. ...
...is channel the information back and forth. the contents don't matter at all to the signaling server. readying the chat server for signaling our chat server uses the websocket api to send information as json strings between each client and the server. the server supports several message types to handle tasks, such as registering new users, setting usernames, and sending public chat messages. to allow the server to support signaling and ice negotiation, we need to update the code. we'll have to allow directing messages to one specific user instead of broadcasting to all connected users, and ensure unrecognized message types are passed through and delivered, without the server needing to know what they are. this lets us send signaling messages using this same server, instead of needing a separa...
...; } } } this code now looks at the pending message to see if it has a target property. if that property is present, it specifies the username of the client to which the message is to be sent, and we call sendtooneuser() to send the message to them. otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user. as the existing code allows the sending of arbitrary message types, no additional changes are required. our clients can now send messages of unknown types to any specific user, letting them send signaling messages back and forth as desired. that's all we need to change on the server side of the equation. now let's consider the signaling protocol we will implement. designing the signaling protocol now that we've built a ...
...And 2 more matches

Basic concepts behind Web Audio API - Web APIs
ind how the features of the web audio api work, to help you make informed decisions while designing how audio is routed through your app. it won't turn you into a master sound engineer, but it will give you enough background to understand why the web audio api works like it does. audio graphs the web audio api involves handling audio operations inside an audio context, and has been designed to allow modular routing. basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. several sources — with different types of channel layout — are supported even within a single context. this modular design provides the flexibility to create complex audio functions with dynamic effects. audio nodes are linked via their inputs and outputs, forming...
...lements (such as <video> or <audio>). taken directly from a webrtc mediastream (such as a webcam or microphone). audio data: what's in a sample when an audio signal is processed, sampling means the conversion of a continuous signal to a discrete signal; or put another way, a continuous sound wave, such as a band playing live, is converted to a sequence of samples (a discrete-time signal) that allow a computer to handle the audio in distinct blocks. a lot more information can be found on the wikipedia page sampling (signal processing). audio buffers: frames, samples and channels an audiobuffer takes as its parameters a number of channels (1 for mono, 2 for stereo, etc), a length, meaning the number of sample frames inside the buffer, and a sample rate, which is the number of sample frames...
...therwise aliasing occurs. while an ideal low-pass filter would perfectly pass frequencies below 20 khz (without attenuating them) and perfectly cut off frequencies above 20 khz, in practice a transition band is necessary, where frequencies are partly attenuated. the wider this transition band is, the easier and more economical it is to make an anti-aliasing filter. the 44.1 khz sampling frequency allows for a 2.05 khz transition band. if you use this call above, you will get a stereo buffer with two channels, that when played back on an audiocontext running at 44100hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames/44100hz = 0.5 seconds. var context = new audiocontext(); var buffer = context.createbuffer(1, 22050, 22050); if you use this call...
...And 2 more matches

Using Web Workers - Web APIs
arent page. in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null. dedicated workers as mentioned above, a dedicated worker is only accessible by the script that called it. in this section we'll discuss the javascript found in our basic dedicated worker example (run dedicated worker): this allows you to enter two numbers to be multiplied together. the numbers are 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 controlle...
...ch anything you like in the message. in the worker, we can respond when the message is received by writing an event handler block like this (worker.js): onmessage = function(e) { console.log('message received from main script'); var workerresult = 'result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(workerresult); } the onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute. here we simply multiply together the two numbers then use postmessage() again, to post the result back to the main thread. back in the main thread, we use onmessage again, to respond to the message sent back from the worker: myworker.onmessage = function(e) { res...
...e, in general, not governed by the content security policy of the document (or parent worker) that created them. so for example, suppose a document is served with the following header: content-security-policy: script-src 'self' among other things, this will prevent any scripts it includes from using eval(). however, if the script constructs a worker, code running in the worker's context will be allowed to use eval(). to specify a content security policy for the worker, set a content-security-policy response header for the request which delivered the worker script itself. the exception to this is if the worker script's origin is a globally unique identifier (for example, if its url has a scheme of data or blob). in this case, the worker does inherit the csp of the document or worker that cre...
...And 2 more matches

Accessibility documentation index - Accessibility
failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect. this must be done in order to determine where to file a bug (browser or at). 5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents. typical use cases include edit suggestions (i.e. an addition and/or deletion in an editable document), and comments (e.g. an editorial comment related to a part of a document under review). 6 aria guides aria accessible rich internet applications (aria) defines ways to make the web more accessible to people with dis...
...ent the aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. this attribute can be used with any typical html form element; it is not limited to elements that have an aria role assigned. 26 using the aria-valuemax attribute aria, accessibility the aria-valuemax attribute is used to define the maximum value allowed for a range widget such as a slider, spinbutton or progressbar. 27 using the aria-valuemin attribute aria, accessibility, needscontent the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progressbar. if the aria-valuenow has a known maximum and minimum, the author should provide properties for aria-valu...
...browsers and assistive technology. 39 using the toolbar role needscontent this technique demonstrates how to use the toolbar role and describes the effect it has on browsers and assistive technology. 40 x-ms-aria-flowfrom aria, microsoft, non-standard the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order. the property serves to define element relationships utilizing aria relationship attributes and the aria-flowto property. 41 wai-aria roles aria, aria roles, accessibility, reference, rôles this page lists reference pages covering all the wai-aria roles discussed on mdn. for a full li...
...And 2 more matches

Operable - Accessibility
ality may have a time limit. for example, purchases sometimes need to be completed within a time limit for security reasons. success criteria how to conform to the criteria practical resource 2.2.1 timing is adjustable (a) for functionality with time limits (e.g. completing a hotel or flight booking often has a time limit), the user should be given controls to allow them to adjust, extend or turn off the time limit. exceptions to this are activities with time limits longer than 20 hours, real time events (e.g. live multiplayer games), and any other activity that requires a time limit and would be invalidated if it were turned off. 2.2.2 pausing, stopping, hiding (a) for moving/blinking content that starts automatically, lasts lo...
... alert. 2.2.5 re-authenticating (aaa) if an authentication session expires during usage of a web app, the user can re-authenticate and continue their usage without losing any data. 2.2.6 timeouts (aaa) added in 2.1 if there is a timeout (caused by user inactivity) warn users at the start of a process so they will not be surprised that a timeout exists (or only allow the timeout to occur after 20 hours of inactivity. understanding timeouts note: also see the wcag description for guideline 2.2 enough time: provide users enough time to read and use content. guideline 2.3 — seizures and physical reactions: do not design content in a way that is known to cause seizures or physical reactions this refers to content that, if not changed, could c...
... 2.3.1 three flashes, or below threshold (a) content doesn't contain any aspect that flashes more than three times per second, or flashing content is below acceptable flash and red flash thresholds. 2.3.2 three flashes (aaa) content doesn't contain any aspect that flashes more than three times per second. 2.3.3 animations from interactions (aaa) added in 2.1 allow users to disable animations from interactions (unless the animation is essential). understanding animations from interactions note: also see the wcag description for guideline 2.3 seizures and physical reactions: do not design content in a way that is known to cause seizures or physical reactions. guideline 2.4 — navigable: provide ways to help users navigate, find content, and de...
...And 2 more matches

Color picker tool - CSS: Cascading Style Sheets
sion : setprecision, setsensivity : setsensivity, getprecision : getprecision, createslider : createslider, }; })(); 'use strict'; window.addeventlistener("load", function() { colorpickertool.init(); }); var colorpickertool = (function colorpickertool() { /*========== get dom element by id ==========*/ function getelembyid(id) { return document.getelementbyid(id); } function allowdropevent(e) { e.preventdefault(); } /*========== make an element resizable relative to it's parent ==========*/ var uicomponent = (function uicomponent() { function makeresizable(elem, axis) { var valuex = 0; var valuey = 0; var action = 0; var resizestart = function resizestart(e) { e.stoppropagation(); e.preventdefault(); if (e.button !== 0) return; ...
...ample() { var node = document.createelement('div'); node.classname = 'sample'; this.uid = samples.length; this.index = nr_samples++; this.node = node; this.color = new color(base_color); node.setattribute('sample-id', this.uid); node.setattribute('draggable', 'true'); node.addeventlistener('dragstart', this.dragstart.bind(this)); node.addeventlistener('dragover' , allowdropevent); node.addeventlistener('drop' , this.dragdrop.bind(this)); this.updateposition(this.index); this.updatebgcolor(); samples.push(this); }; colorsample.prototype.updatebgcolor = function updatebgcolor() { this.node.style.backgroundcolor = this.color.getcolor(); }; colorsample.prototype.updateposition = function updateposition(index) { this.index = index; ...
...; trash_can = getelembyid('trash-can'); addsamplebutton.init(); for (var i=0; i<16; i++) { var sample = new colorsample(); container.appendchild(sample.node); } addsamplebutton.updateposition(samples.length); updateui(); active = samples[0]; active.activate(); container.addeventlistener('click', setactivatesample); trash_can.addeventlistener('dragover', allowdropevent); trash_can.addeventlistener('dragenter', function() { this.parentelement.setattribute('drag-state', 'enter'); }); trash_can.addeventlistener('dragleave', function(e) { this.parentelement.setattribute('drag-state', 'none'); }); trash_can.addeventlistener('drop', deletesample); uicolorpicker.subscribe('picker', function(color) { if (active) active.updat...
...And 2 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
ontainer, 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 below how this looks. try editing the items or adding additional items in order to test the initial behavior of flexbox. changing flex-direction adding the flex-direction property to the flex container allows us to change the direction in which our flex items display. setting flex-direction: row-reverse will keep the items displaying along the row, however the start 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...
...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. set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit. find out more about wrapping flex items in the guide mastering wrapping of flex items. the flex-flow shorthand you can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand. the first value specified is flex-direction and the sec...
...or could not shrink small enough to fit. find out more about wrapping flex items in the guide mastering wrapping of flex items. the flex-flow shorthand you can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand. the first value specified is flex-direction and the second value is flex-wrap. in the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap. properties applied to flex items to have more control over flex items we can target them directly. we do this by way of three properties: flex-grow flex-shrink flex-basis we will take a brief look at these properties in this overview, and you can gain a fuller unde...
...And 2 more matches

clamp() - CSS: Cascading Style Sheets
the clamp() css function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. it takes three parameters: a minimum value, a preferred value, and a maximum allowed value. the clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. clamp(min, val, max) is resolved as max(min, min(val, max)) the source for this interactive example is stored in a github repository. ...
...it has the same effect as the code in fluid typography but in one line, and without the use of media queries. ...
... font-size or above a maximum font-size. it has the same effect as the code in fluid typography but in one line, and without the use of media queries. syntax the clamp() function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value, maximum value. the minimum value is the smallest (most negative) value. this is the lower bound in the range of allowed values. if the preferred value is less than this value, the minimum value will be used. the preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values. the maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound. the...
...And 2 more matches

filter - CSS: Cascading Style Sheets
%"> <fegaussianblur in="sourcegraphic" stddeviation="5"/> </filter> </svg> brightness() the brightness() function applies a linear multiplier to the input image, making it appear more or less bright. a value of 0% will create an image that is completely black. a value of 100% leaves the input unchanged. other values are linear multipliers on the effect. values of an amount over 100% are allowed, providing brighter results. the lacuna value for interpolation is 1. filter: brightness(2) <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="brightness"> <fecomponenttransfer> <fefuncr type="linear" slope="[amount]"/> <fefuncg type="linear" slope="[amount]"/> <fefuncb type="linear" slope="[amount]"/> </fecomponenttransf...
...table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } contrast() the contrast() function adjusts the contrast of the input image. a value of 0% will create an image that is completely gray. a value of 100% leaves the input unchanged. values of an amount over 100% are allowed, providing results with more contrast. the lacuna value for interpolation is 1. filter: contrast(200%) <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="contrast"> <fecomponenttransfer> <fefuncr type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> <fefuncg type="linear" slope="[amount]" intercept="-(0.5 * [amount]...
...o; } #img3 { height:100%; } drop-shadow() the drop-shadow() function applies a drop shadow effect to the input image. a drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. the function accepts a parameter of type <shadow> (defined in css3 backgrounds), with the exception that the inset keyword is not allowed. this function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance. the parameters of the <shadow> parameter are as follows: <offset-x> <offset-y> (required) these are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. negative values place the...
...And 2 more matches

Constraint validation - Developer guides
h what is done on the client side. intrinsic and basic constraints in html5, basic constraints are declared in two ways: by choosing the most semantically appropriate value for the type attribute of the <input> element, e.g., choosing the email type automatically creates a constraint that checks whether the value is a valid e-mail address. by setting values on validation-related attributes, allowing basic constraints to be described in a simple way, without the need for javascript. semantic input types the intrinsic constraints for the type attribute are: input type constraint description associated violation <input type="url"> the value must be an absolute url, as defined in the url living standard. typemismatch constraint violation <input t...
...n api either on a single form element or at the form level, on the <form> element itself. the constraint validation is done in the following ways: by a call to the checkvalidity() or reportvalidity() method of a form-associated dom interface, (htmlinputelement, htmlselectelement, htmlbuttonelement, htmloutputelement or htmltextareaelement), which evaluates the constraints only on this element, allowing a script to get this information. the checkvalidity() method returns a boolean indicating whether the element's value passes its constraints. (this is typically done by the user-agent when determining which of the css pseudo-classes, :valid or :invalid, applies.) in contrast, the reportvalidity() method reports any constraint failures to the user. by a call to the checkvalidity() or reportval...
...ted, and then to use the method field.setcustomvalidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user. constraint combining several fields: postal code validation the postal code format varies from one country to another. not only do most countries allow an optional prefix with the country code (like d- in germany, f- in france or switzerland), but some countries have postal codes with only a fixed number of digits; others, like the uk, have more complex structures, allowing letters at some specific positions. note: this is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. as an example, we w...
...And 2 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
e. if you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, this can be useful when creating media elements whose source will be set at a later time, under user control. see our autoplay guide for additional information about how to properly use autoplay. controls if this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. crossorigin this enumerated attribute indicates whether to use cors to fetch the related audio file. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cross-origin request without a credential. in other words, it sends the or...
...le. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cross-origin request without a credential. in other words, it sends the origin: http header without a cookie, x.509 certificate, or performing http basic authentication. if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted. use-credentials sends a cross-origin request with a credential. in other words, it sends the origin: http header with a cookie, a certificate, or performing http basic authentication. ...
... when not present, the resource is fetched without a cors request (i.e. without sending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated keyword anonymous was used. ...
...And 2 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
rowser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input type="text"> controls. the control is intended to simply represent a local date and time, not necessarily the user's local date and time. in other words, an implementation should allow any valid combination of year, month, day, hour, and minute - even if such a combination is invalid in the user's local time zone (such as times within a daylight saving time spring-forward transition gap). some mobile browsers (particularly on ios) do not currently implement this correctly. because of the limited browser support for datetime-local, and the variations in how the inputs work, it ...
...lement that validates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't rely on this behavior since you can't easily predict it. for those of you not using a supporting browser, the chrome/opera datetime-local control looks like the below screenshot. clicking the down arrow on the right hand side brings up a date picker to allow you to choose a date; you have to enter the time manually. the edge datetime-local control looks like the below; clicking the date and the time parts of the value bring up two separate pickers for you, so you can easily set both the date and the time. this is somewhat like having date and time widgets both created for you and merged into one. value a domstring representing a d...
...bute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for datetime-local inputs, the value of step is given in seconds, with a scaling factor of 1000 (since the underlying...
...And 2 more matches

<input type="file"> - HTML: Hypertext Markup Language
(empty). the string is prefixed with c:\fakepath\, to prevent malicious software from guessing the user's file structure. additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing image or video data files a filelist listing the chosen files multiple a boolean which, if present, indicates that the user may choose more than one file accept the accept attribute value is a string that defines the file types the file input should accept. this string is a comma-separated list of unique file typ...
...ture was previously a boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input. files a filelist object that lists every selected file. this list has no more than one member unless the multiple attribute is specified. multiple when the multiple boolean attribute is specified, the file input allows the user to select more than one file. non-standard attributes in addition to the attributes listed above, the following non-standard attributes are available on some browsers. you should try to avoid using them when possible, since doing so will limit the ability of your code to function in browsers that don't implement them. attribute description webkitdirectory ...
...n-standard attributes in addition to the attributes listed above, the following non-standard attributes are available on some browsers. you should try to avoid using them when possible, since doing so will limit the ability of your code to function in browsers that don't implement them. attribute description webkitdirectory a boolean indicating whether or not to only allow the user to choose a directory (or directories, if multiple is also present) webkitdirectory the boolean webkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. see htmlinputelement.webkitdirectory for additional details and examples. note: though originally implemented only for webkit-based b...
...And 2 more matches

Global attributes - HTML: Hypertext Markup Language
pplied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters should default to uppercase class a space-separated list of the classes of the element. classes allows css and javascript to select and access specific elements via the class selectors or functions like the method document.getelementsbyclassname(). contenteditable an enumerated attribute indicating if the element should be editable by the user. if so, the browser modifies its widget to allow editing. the attribute must take one of the following values: true or the empty string, which indica...
...all such custom data are available via the htmlelement interface of the element the attribute is set on. the htmlelement.dataset property gives access to them. dir an enumerated attribute indicating the directionality of the element's text. ...
...hich must be unique in the whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css). inputmode provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. used primarily on <input> elements, but is usable on any element while in contenteditable mode. is allows you to specify that a standard html element should behave like a registered custom built-in element (see using custom elements for more details). note: the item* attributes are part of the whatwg html microdata feature. itemid the unique, global identifier of an item. itemprop used to add properties to an item. every html element may have an itemprop attribute specified, where an itemp...
...And 2 more matches

HTTP conditional requests - HTTP
validation is used when byte to byte identity is expected, for example when resuming a download. weak validation is used when the user-agent only needs to determine if the two resources have the same content. this is even if they are minor differences; like different ads, or a footer with a different date. the kind of validation is independent of the validator used. both last-modified and etag allow both types of validation, though the complexity to implement it on the server side may vary. http uses strong validation by default, and it specifies when weak validation can be used. strong validation strong validation consists of guaranteeing that the resource is, byte to byte, identical to the one it is compared too. this is mandatory for some conditional headers, and the default for the oth...
... like if the request wasn't conditional and the client uses this new resource (and caches it). besides the setting of the validators on the server side, this mechanism is transparent: all browsers manage a cache and send such conditional requests without any special work to be done by web developers. integrity of a partial download partial downloading of files is a functionality of http that allows to resume previous operations, saving bandwidth and time, by keeping the already obtained information: a server supporting partial downloads broadcasts this by sending the accept-ranges header. once this happens, the client can resume a download by sending a ranges header with the missing ranges: the principle is simple, but there is one potential problem: if the downloaded resource has be...
...nario: if-range: this solution is more efficient, but slightly less flexible, as only one etag can be used in the condition. rarely is such additional flexibility needed. avoiding the lost update problem with optimistic locking a common operation in web applications is to update a remote document. this is very common in any file system or source control applications, but any application that allows to store remote resources needs such a mechanism. common web sites, like wikis and other cms, have such a need. with the put method you are able to implement this. the client first reads the original files, modifies them, and finally pushes them to the server: unfortunately, things get a little inaccurate as soon as we take into account concurrency. while a client is locally modifying its ne...
...And 2 more matches

CSP: child-src - HTTP
ted browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-compliant requests are treated as fatal network errors by the user agent. csp version 2 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the child-src policy: content-security-policy: child-src <source>; content-security-policy: child-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wil...
...on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. ...
...And 2 more matches

CSP: font-src - HTTP
the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the font-src policy: content-security-policy: font-src <source>; content-security-policy: font-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating ...
...on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. ...
...And 2 more matches

CSP: frame-ancestors - HTTP
tent-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. setting this directive to 'none' is similar to x-frame-options: deny (which is also supported in older browsers). csp version 2 directive type navigation directive default-src fallback no. not setting this allows anything. this directive is not supported in the <meta> element. syntax one or more sources can be set for the frame-ancestors policy: content-security-policy: frame-ancestors <source>; content-security-policy: frame-ancestors <source> <source>; sources <source> can be one of the following: the frame-ancestors directive’s syntax is similar to a source list of other direc...
... not supported in the <meta> element. syntax one or more sources can be set for the frame-ancestors policy: content-security-policy: frame-ancestors <source>; content-security-policy: frame-ancestors <source> <source>; sources <source> can be one of the following: the frame-ancestors directive’s syntax is similar to a source list of other directives (e.g. default-src), but doesn't allow 'unsafe-eval' or 'unsafe-inline' for example. it will also not fall back to a default-src setting. only the sources listed below are allowed: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number, separated by spaces. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again,...
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme. mail.example.com:443: matches all attempts to access port 443 on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. ...
...And 2 more matches

CSP: frame-src - HTTP
icy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>. csp version 1 directive type fetch directive fallback if this directive is absent, the user agent will look for the child-src directive (which falls back to the default-src directive). syntax one or more sources can be allowed for the frame-src policy: content-security-policy: frame-src <source>; content-security-policy: frame-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wil...
...on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. ...
...And 2 more matches

CSP: manifest-src - HTTP
the http content-security-policy: manifest-src directive specifies which manifest can be applied to the resource. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the manifest-src policy: content-security-policy: manifest-src <source>; content-security-policy: manifest-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, in...
...on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. ...
...And 2 more matches

CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video> elements. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the media-src policy: content-security-policy: media-src <source>; content-security-policy: media-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as t...
...on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. ...
...And 2 more matches

CSP: plugin-types - HTTP
tantiation of an <embed>, <object> or <applet> element will fail if: the element to load does not declare a valid mime type, the declared type does not match one of specified types in the plugin-types directive, the fetched resource does not match the declared type. csp version 2 directive type document directive default-src fallback no. not setting this allows anything. syntax one or more mime types can be set for the plugin-types policy: content-security-policy: plugin-types <type>/<subtype>; content-security-policy: plugin-types <type>/<subtype> <type>/<subtype>; <type>/<subtype> a valid mime type. examples disallowing plugins to disallow all plugins, the object-src directive should be set to 'none' which will disallow plugins. the...
...s can be set for the plugin-types policy: content-security-policy: plugin-types <type>/<subtype>; content-security-policy: plugin-types <type>/<subtype> <type>/<subtype>; <type>/<subtype> a valid mime type. examples disallowing plugins to disallow all plugins, the object-src directive should be set to 'none' which will disallow plugins. the plugin-types directive is only used if you are allowing plugins with object-src at all. ...
...-policy: plugin-types <type>/<subtype> <type>/<subtype>; <type>/<subtype> a valid mime type. examples disallowing plugins to disallow all plugins, the object-src directive should be set to 'none' which will disallow plugins. the plugin-types directive is only used if you are allowing plugins with object-src at all. ...
...And 2 more matches

CSP: worker-src - HTTP
ype fetch directive fallback if this directive is absent, the user agent will first look for the child-src directive, then the script-src directive, then finally for the default-src directive, when governing worker execution. chrome 59 and higher skips the child-src directive. edge 17 skips the script-src directive (bug). syntax one or more sources can be allowed for the worker-src policy: content-security-policy: worker-src <source>; content-security-policy: worker-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a ...
...on mail.example.com. https://store.example.com: matches all attempts to access store.example.com using https:. *.example.com: matches all attempts to load from any subdomain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin fr...
...source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. ...
...And 2 more matches

Feature-Policy: encrypted-media - HTTP
the http feature-policy header encrypted-media directive controls whether the current document is allowed to use the encrypted media extensions api (eme). when this policy is enabled, the promise returned by navigator.requestmediakeysystemaccess() will reject with a domexception. syntax feature-policy: encrypted-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...And 2 more matches

Feature-Policy: midi - HTTP
the http feature-policy header midi directive controls whether the current document is allowed to use the web midi api. when this policy is enabled, the promise returned by navigator.requestmidiaccess() will reject with a domexception. syntax feature-policy: midi <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...And 2 more matches

Feature-Policy: payment - HTTP
the http feature-policy header field's payment directive controls whether the current document is allowed to use the payment request api. when this policy is disabled, the paymentrequest() constructor will throw a syntaxerror. syntax feature-policy: payment <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...And 2 more matches

Feature-Policy: unsized-media - HTTP
the http feature-policy header unsized-media directive controls whether the current document is allowed to change the size of media elements after the initial layout is complete. this restriction solves "layout instability" problem caused by providing default dimensions for images whose size is not specified in advance so that image doesn't change size after loading. syntax feature-policy: unsized-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an i...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...And 2 more matches

Feature-Policy: wake-lock - HTTP
note: this api is still actively being developed and available only behind a flag on select browsers and platforms. the http feature-policy header wake-lock directive controls whether the current document is allowed to use wake lock api to indicate that device should not enter power-saving mode. note: latest drafts of screen wake lock api defines screen-wake-lock directive. syntax feature-policy: wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...And 2 more matches

Details of the object model - JavaScript
this chapter attempts to clarify the situation. this chapter assumes that you are already somewhat familiar with javascript and that you have used javascript functions to create simple objects. class-based vs. ...
...age, such as javascript, does not make this distinction: it simply has objects. a prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object. any object can specify its own properties, either when you create it or at run time. in addition, any object can be associated as the prototype for another object, allowing the second object to share the first object's properties. defining a class in class-based languages, you define a class in a separate class definition. in that definition you can specify special methods, called constructors, to create instances of the class. a constructor method can specify initial values for the instance's properties and perform other processing appropriate at creation time...
... the properties of the superclass and additionally can add new properties or modify the inherited ones. for example, assume the employee class includes only the name and dept properties, and manager is a subclass of employee that adds the reports property. in this case, an instance of the manager class would have all three properties: name, dept, and reports. javascript implements inheritance by allowing you to associate a prototypical object with any constructor function. so, you can create exactly the employee — manager example, but you use slightly different terminology. first you define the employee constructor function, specifying the name and dept properties. next, you define the manager constructor function, calling the employee constructor and specifying the reports property. finally...
...And 2 more matches

Template literals (Template strings) - JavaScript
you can use multi-line strings and string interpolation features with them. they were called "template strings" in prior editions of the es2015 specification. syntax `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag`string text ${expression} string text` description template literals are enclosed by the backtick (` `) (grave accent) character instead of double or single quotes. template literals can contain placeholders. these are indicated by the dollar sign and curly braces (${expression}). the expressions in the placeholders and the text between the backticks (` `) get passed to a function. ...
...iterals, you are able to make use of the syntactic sugar, making substitutions like this more readable: let a = 5; let b = 10; console.log(`fifteen is ${a + b} and not ${2 * a + b}.`); // "fifteen is 15 and // not 20." nesting templates in certain cases, nesting a template is the easiest (and perhaps more readable) way to have configurable strings. within a backticked template, it is simple to allow inner backticks simply by using them inside a placeholder ${ } within the template. for instance, if condition a is true, then return this templated literal. in es5: let classes = 'header'; classes += (islargescreen() ? '' : item.iscollapsed ? ' icon-expander' : ' icon-collapser'); in es2015 with template literals and without nesting: const classes = `header ${ islargescreen() ? '' : ...
... with template literals and without nesting: const classes = `header ${ islargescreen() ? '' : (item.iscollapsed ? 'icon-expander' : 'icon-collapser') }`; in es2015 with nested template literals: const classes = `header ${ islargescreen() ? '' : `icon-${item.iscollapsed ? 'expander' : 'collapser'}` }`; tagged templates a more advanced form of template literals are tagged templates. tags allow you to parse template literals with a function. the first argument of a tag function contains an array of string values. the remaining arguments are related to the expressions. the tag function can then perform whatever operations on these arguments you wish, and return the manipulated string. (alternatively, it can return something completely different, as described in one of the following exam...
...And 2 more matches

Trailing commas - JavaScript
trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to javascript code. if you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. this makes version-control diffs cleaner and editing code might be less troublesome. javascript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ecmascript 5) and most recently (ecmascript 2017) to function parameters. json, however, disallows trailing commas. syntax , examples trailing commas in literals arrays javascript ignores trailing commas in arrays: var arr = [ 1, 2, 3, ]; arr; // [1, 2, 3] arr.length; // 3 if more than one trai...
...led sparse (a dense array has no holes). when iterating arrays for example with array.prototype.foreach() or array.prototype.map(), array holes are skipped. var arr = [1, 2, 3,,,]; arr.length; // 5 objects starting with ecmascript 5, trailing commas in object literals are legal as well: var object = { foo: "bar", baz: "qwerty", age: 42, }; trailing commas in functions ecmascript 2017 allows trailing commas in function parameter lists. parameter definitions the following function definition pairs are legal and equivalent to each other. trailing commas don't affect the length property of function declarations or their arguments object. function f(p) {} function f(p,) {} (p) => {}; (p,) => {}; the trailing comma also works with method definitions for classes or objects: class c...
...} } var obj = { one(a,) {}, two(a, b,) {}, }; function calls the following function invocation pairs are legal and equivalent to each other. f(p); f(p,); math.max(10, 20); math.max(10, 20,); illegal trailing commas function parameter definitions or function invocations only containing a comma will throw a syntaxerror. ...
...And 2 more matches

Web audio codec guide - Web media technologies
o data, and are commonly used to provide audio data for subwoofers, for example. when you see the number of audio channels written in the form x.y (such as 2.1 or 5.1), the number after the decimal point, y, is the number of lfe channels. for example, mp3 supports one lfe channel, while aac supports up to 16. in addition to providing audio for specific speakers in a sound system, some codecs may allow audio channels to be used to provide alternative audio, such as vocals in different languages or descriptive audio for visually impaired people. audio frequency bandwidth the audio frequency bandwidth of a codec indicates the range of audio frequencies that can be represented using the codec. some codecs operate specifically by eliminating audio that falls outside a given frequency range. there...
...practice 64 kbps is always used g.722 annex b super wide-band: 64 kbps, 80 kbps, and 96 kbps g.722 annex d stereo wide-band: 64 kbps and 80 kbps g.722 annex d stereo super wide-band: 80 kbps, 96 kbps, 112 kbps, and 128 kbps variable bit rate (vbr) support no supported sample formats 14-bit integer supported sample rates 16 khz (adpcm is specified to allow 8 khz, 11.025 khz, 22.05 khz, 44.1 khz, but g.722 uses 16 khz) recommended minimum bit rate for stereo sound 128 kbps at 44.1 khz sample rate compression lossy maximum audio channels 2 audio frequency bandwidth 50 hz - 7 khz latency 4 ms browser compatibility feature chrome edge ...
..., webm, mpeg-ts, mp4 rtp / webrtc compatible yes licensing fully open and free of any licensing requirements [1] the specified sample rates are effective sample rates. opus uses an algorithm based on audio bandwidths rather than sample rates. see rfc 6716, section 2 for details. ...
...And 2 more matches

Digital audio concepts - Web media technologies
lossless encoder parameters lossless encoders have a lot less room to manipulate the audio to improve the compression rate, given the need to be able to reproduce the original audio, which limits the number of options available to configure these encoders. the options tend to revolve around choosing the method by which the encoder performs the encoding and how much time and processor power it's allowed to consume in order to do so. these parameters vary depending on the codec, but can include: specifying specific algorithms to use during particular phases of the encoding process parameters for those algorithms to use, such as how much predictive depth to use when trying to model the audio the number of passes to make while analyzing the audio, or the number of times given algorithms sho...
...ithms), and others offer a simple "quality" parameter you can set, which automatically adjusts various properties of the algorithm. bit rate there are two mutually-exclusive ways to control the quality of the compressed audio using the bit rate. the first involves targeting an average bit rate for the encoded data, while the second involves specifying a constant quality value to target while allowing the bit rate to vary. average bit rate the first method for controlling the quality of the output file is to specify the average bit rate (abr) to target when encoding the audio. the encoder will attempt to produce an encoded sound file that, when playing it back, uses, on average, the specified number of bits for each second of audio. this controls quality from the perspective of the encode...
...ts for each second of audio. this controls quality from the perspective of the encoded audio size; the higher the bit rate, the higher the resulting audio quality will be. the quality of the audio will fluctuate over time as needed in order to meet the targeted bit rate. somewhat similar to abr is cbr (constant bit rate). where abr attempts to keep the bit rate on average at a given level, while allowing some fluctuation, cbr uses an actually fixed bit rate for the duration of the audio. cbr is primarily used in codecs designed for voice-only purposes, where the frequency range and variation tends to be minimal, allowing cbr encoding to work without unworkable fluctuations in audio quality. variable bit rate variable bit rate (vbr) encoding works by accepting as an input into the encoder a c...
...And 2 more matches

The "codecs" parameter in common media types - Web media technologies
es support a variety of codecs, and those codecs may have any number of profiles, levels, and other configuration factors. for this reason, you can add the codecs parameter to the media type. to do so, append a semicolon (;) followed by codecs= and then the string describing the format of the contents of the file. some media types only let you specify the names of the codecs to use, while others allow you to specify various constraints on those codecs as well. you can specify multiple codecs by separating them with commas. audio/ogg; codecs=vorbis an ogg file containing a vorbis audio track. video/webm; codecs="vp8, vorbis" a webm file containing vp8 video and/or vorbis audio. video/mp4; codecs="avc1.4d002a" an mpeg-4 file containing avc (h.264) video, main profile, level 4.2. as is ...
...lt value is 01 (itu-r bt.709). mc the two-digit matrix_coefficients constant selects the matrix coefficients used to convert the red, blue, and green channels into luma and chroma signals. for example, the standard coefficients used for bt.709 are indicated using the value 01. the default value is 01 (itu-r bt.709). f a one-digit flag indicating whether the color should be allowed to use the full range of possible values (1), or should be constrained to those values considered legal for the specified color configuration (that is, the studio swing representation). the default is 0 (use the studio swing representation). all fields from m (monochrome flag) onward are optional; you may stop including fields at any point (but can't arbitrarily leave out fields). the de...
...substreams that offer alternative forms of the same video for use in various constrained environments. these may include any combination of reduced resolution, reduced frame rate, or increased compression levels. 53 00 scalable constrained baseline profile primarily used for real-time communication applications. not yet supported by webrtc, but an extension to the webrtc api to allow svc is in development. 53 04 scalable high profile meant mostly for use in broadcast and streaming applications. the base (or highest quality) layer must conform to the avc high profile. 56 00 scalable constrained high profile a subset of the scalable high profile designed mainly for real-time communticions. 56 04 scalable high intra profile ...
...And 2 more matches

Progressive web app structure - Progressive web apps (PWAs)
e. server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content. it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived performance — loading a page requires a new round trip to the server. client-side rendering (csr) allows the website to be updated in the browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning. the website is slower on an initial visit, but can be faster to navigate. mixing ssr with csr can lead to the best results — you can render a website on the server, cache its contents, and then update th...
...ent visits before then loading all the contents of the app. that way, the next time someone visits the app from the device, the ui loads from the cache immediately and any new content is requested from the server (if it isn’t available in the cache already). this structure is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page. ...
...ly, instead of a loading spinner or a blank page. it also allows the website to be accessible offline if the network connection is not available. we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's focus on the structure itself. why should i use it? this architecture allows a website to benefit the most from all the pwa features — it caches the app shell and manages the dynamic content in a way that greatly improves the performance. in addition to the basic shell, you can add other features such as add to home screen or push notifications, safe in the knowledge that the app will still work ok if they are not supported by the user's browser — this is the beauty ...
...And 2 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
e. server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content. it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived performance — loading a page requires a new round trip to the server. client-side rendering (csr) allows the website to be updated in the browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning. the website is slower on an initial visit, but can be faster to navigate. the best results tend to come when you use both client-side and server-side rendering; you can render a web site on the server, cac...
...ts before then loading the remainder of the app's contents. that way, the next time someone visits the app from the device, the ui loads from the cache immediately and any new content is requested from the server (if it isn’t available in the cache already). this structure is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page. ...
... a loading spinner or a blank page. it also allows the website to be accessible offline if the network connection is not available. we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's focus on the structure itself. benefits of the app shell pattern this architecture allows a web site to benefit the most from all the pwa features — it caches the app shell and manages the dynamic content in a way that greatly improves the performance. in addition to the basic shell, you can add other features such as add to home screen or push notifications, safe in the knowledge that the app will still work ok if they are not supported by the user's browser — this is the beauty...
...And 2 more matches

Introduction to using XPath in JavaScript - XPath
the xpathresult object. ...
...e numerical result if the stringvalue property is requested, so the following code will not work: var paragraphcount = document.evaluate('count(//p)', document, null, xpathresult.any_type, null ); alert( 'this document contains ' + paragraphcount.stringvalue + ' paragraph elements' ); instead, it will return an exception with the code ns_dom_type_error. ...
... once we have iterated over all of the individual matched nodes, iteratenext() will return null. ...
...And 2 more matches

Content Processes - Archive of obsolete content
this article, it's probably best to read it as if content and add-on processes actually exist. to communicate between add-on and content processes, the sdk uses something called content scripts. these are explained in the first section. content scripts communicate with add-on code using something called event emitters. these are explained in the next section. content workers combine these ideas, allowing you to inject a content script into a content process, and automatically set up a communication channel between them. these are explained in the third section. in the next section, we will look at how content scripts interact with the dom in a content process. there are several caveats here, all of them related to security, that might cause things to not behave in the way you might expect. t...
... referred to as a pipe. content workers a content worker is an object that is used to inject content scripts into a content process, and to provide a pipe between each content script and the main add-on script. the idea is to use a single content worker for each content process. the constructor for the content worker takes an object containing one or more named options. ...
...each content script and the main add-on script. the idea is to use a single content worker for each content process. the constructor for the content worker takes an object containing one or more named options. among other things, this allows us to specify one or more content scripts to be loaded. when a content script is first loaded, the content worker automatically imports a messaging api that allows it to emit messages over a pipe. on the add-on side, this pipe is exposed via the the port property on the worker. in addition to the port property, workers also support the web worker api, which allows scripts to send messages to each other using the postmessage function. this function uses the same pipe internally, and causes a 'message' event to be emitted on the other side. as explained ear...
... function. this function uses the same pipe internally, and causes a 'message' event to be emitted on the other side. as explained earlier, firefox doesn't yet use separate processes for tabs 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...

panel - Archive of obsolete content
turn this off if necessary, to prevent accessibility issue. optional, default to true. contenturl string,url the url of the content to load in the panel. that is, they can't refer to remote scripts. the urls are usually constructed using self.data.url(). from firefox 34, you can use "./my-file.html" as an alias for self.data.url("my-file.html"). allow object an optional object describing permissions for the content. it should contain a single key named script whose value is a boolean that indicates whether or not to execute script in the content. script defaults to true. contentscriptfile string,array a url or an array of urls. the urls point to scripts to load into the panel. the scripts must be package...
...nloading any content that was loaded in it. once destroyed, the panel can no longer be used. if you just want to hide the panel and might show it later, use hide instead. postmessage(message) sends a message to the content scripts. parameters message : value the message to send. must be stringifiable to json. show(options) displays the panel. if the options argument is given, it will be shallow merged with the options provided in the constructor: the options passed in the show method takes precedence. passing options here is useful for making temporary changes without touching the default values. parameters options : object optional options: name type width number the width of the panel in pixels. optional. height number ...
.... parameters type : string the type of event to listen for. listener : function the listener function that handles the event. removelistener(type, listener) unregisters an event listener from the panel. parameters type : string the type of event for which listener was registered. listener : function the listener function that was registered. properties port eventemitter object that allows you to: send events to the content script using the port.emit function receive events from the content script using the port.on function see the guide to communicating using port for details. isshowing tells if the panel is currently shown or not. this property is read-only. height the height of the panel in pixels. width the width of the panel in pixels. focus whether or not focu...
...read-only. height the height of the panel in pixels. width the width of the panel in pixels. focus whether or not focus will be taken away when the panel is shown. this property is read-only. contenturl the url of content loaded into the panel. this can point to local content loaded from your add-on's "data" directory or remote content. setting it updates the panel's content immediately. allow an object describing permissions for the content. it contains a single key named script whose value is a boolean that indicates whether or not to execute script in the content. contentscriptfile a local file url or an array of local file urls of content scripts to load. content scripts specified by this property are loaded before those specified by the contentscript property. contentscript a...

Enhanced Extension Installation - Archive of obsolete content
ed fully, rather than awaiting the next restart, since themes do not supply xpcom components, preferences defaults etc. for extensions, on the next startup, the startup system notices the presence of the .autoreg file and starts the extension manager with a "dirty" flag, telling it to finish any install operations that may be pending. the extension manager loads the xml/rdf datasources (this is allowable and necessary because a major change has happened) and gets a list of all items that need to be installed (tracked using a tobeinstalled flag on the item in the datasource). it locates the staged copy of the xpi file, extracts its contents (logging file additions as it goes into {guid}/uninstall/uninstall), loads the install manifest file and copies all metadata into the appropriate datasourc...
...ization and sets the tobeuninstalled flag so that the item's metadata is removed from the datasource. uninstall and staggered install locations if item foo 1.1 is installed in the user's profile directory install location, and foo 1.0 is installed in the application directory install location, when the user uninstalls foo 1.1, foo 1.0 should become visible due to install location ordering. this allows the user to shield items installed at lower locations by installing items at higher locations. when an item is uninstalled, the extension manager checks the startup cache to see if there is another copy of the item installed at a lower install location. if there is one, then the item is uninstalled and an entry is added to the pending operations list that indicates the item at the lower install...
...tartup. we ask each install location if it is functioning (for a directory install location such as app-profile or app-global the location is functioning if it the directory exists. if any location is not functioning, or any of the manifests listed above does not exist, all manifests are removed and the system rebuilds everything from scratch. this should prevent against random file deletions and allow developers to easily reset their state by deleting one of the required system files. since we can now install by simply detecting the presence of a {guid} folder under the app-profile and app-global install locations, we no longer need installed-extensions.txt for registration of pre-configured items such as the default theme. the firefox build system will just create the {guid} folder for the d...
...tring locationkey); void uninstallitem(in string id); void enableitem(in string id); void disableitem(in string id); uninstall logs are no longer written, since the item folder is removed completely on uninstall. benjamin smedberg's recent chrome registry changes made it unnecessary to have log entries for chrome registration, so the uninstall log was only being used for file additions. this allows for the removal of the installlogreader/writer objects in the extension manager. it is possible to order install locations using the priority property on an install location object. this determines whether or not an extension from one install location can "trump" the same extension installed at a different install location. user action requested notifications are now sent with the em-action-re...

Extension Versioning, Update and Compatibility - Archive of obsolete content
add-on versioning add-ons should specify their versions using the toolkit version format. as a rough overview this is a version string split by periods, some examples: 2.0 1.0b1 3.0pre1 5.0.1.2 note: before firefox 1.5 the more basic firefox version format was used: major.minor.release.build[+] where only digits were allowed. the toolkit version format supports the firefox version format but allows greater flexibility. how applications determine compatibility when installing add-ons applications look at the targetapplication entries in the add-on's install.rdf. an entry must exist with an id matching the id of the application. additionally the minversion and maxversion of this entry must be a range that includes the version of the running application. if the application has ...
...s updateurl. if the install.rdf contains any targetplatform entries then the platform of the currently running application must be listed or the installation will be rejected. firefox 3 note in applications based on gecko 1.9 you can also use a targetapplication entry with an id toolkit@mozilla.org and minversion and maxversion that match the toolkit version of the running application. this allows you to say that your add-on will install into any toolkit based application. overriding compatibility checking for testing purposes you can tell the application to somewhat ignore compatibility checks when installing add-ons. simply create the boolean preference extensions.checkcompatibility and set it to false. note: before firefox 1.5 the preference app.extensions.version could be used t...
...lication. overriding compatibility checking for testing purposes you can tell the application to somewhat ignore compatibility checks when installing add-ons. simply create the boolean preference extensions.checkcompatibility and set it to false. note: before firefox 1.5 the preference app.extensions.version could be used to override the version that the application believed itself to be to allow normally incompatible extensions to install. choosing minversion and maxversion minversion and maxversion should specify the range of versions of the application you have tested with. in particular you should never specify a maxversion that is larger than the currently available version of the application since you do not know what api and ui changes are just around the corner. with compatibili...
...ded and any security issues that have been resolved. in order to do this you must add an updateinfourl entry to the update manifest (see the example above). the page at this url will be retrieved and displayed to the user. since it is being displayed outside of a normal webpage context it is heavily sanitized, which means there are few formatting options available and scripting and images aren't allowed. the information page retrieved must currently be totally valid xhtml, including being delivered with the mime type application/xhtml+xml (important: see problems section) you may include %app_locale% in your updateinfourl if you want to have locale information included in the url -- this allows you to customize the text based on the user's locale. you may also use the other substitution stri...

Install Manifests - Archive of obsolete content
ersion>) up to and including the maximum version (<em:maxversion>). however, while <em:maxversion> is a required property, it is ignored unless you also set <em:strictcompatibility> in the main <description> of your install.rdf (i.e. not in <em:targetapplication>). these version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of firefox an extension has been tested with. id, minversion, and maxversion are all required. note: extensions compatible with firefox 3.5 should specify a maxversion of 3.5.*, so that they are automatically compatible with security and stability updates. for firefox 3.0, a maxversion of 3.0.* should be used. extensions compatible only with fire...
... may specify more if the add-on targets multiple applications that support the add-on manager (e.g. firefox and thunderbird). examples <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--firefox--> <em:minversion>1.5</em:minversion> <em:maxversion>3.0.*</em:maxversion> </description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minversion and maxversion. type an integer value representing the type of add-on. 2 extensions 4 themes 8 locale 32 multiple item package 64 spell check dictionary 128 ...
...l> note: for the above example to work you will also have to add a skin package line to your chrome.manifest file. see chrome registration#skin. alternatively you can place your icon in the directory specified in your content package line. gecko 1.9.2 note starting in gecko 1.9.2 (firefox 3.6), you can also simply include your icon, named icon.png, in the base directory of the add-on. this allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconurl entry. icon64url a chrome:// url to a 64x64 pixel icon to display in the add-on's details view . if this property is not specified, the smaller icon above will be used. <em:icon64url>chrome://myext/skin/icon64.png</em:icon64url> note: for the above example to work you will also ha...
...url> note: for the above example to work you will also have to add a skin package line to your chrome.manifest file. see chrome registration#skin. alternatively you can place your icon in the directory specified in your content package line. gecko 2.0 note starting in gecko 2.0 (firefox 4.0), you can also simply include your icon, named icon64.png, in the base directory of the add-on. this allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an icon64url entry. localized allows you to localize the add-on's name, description, contributors and other metadata. the localized description must specify at least one em:locale which indicates which locales to use this information for. examples this declares a set of add-on metadata to be d...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
hether there is a different license mixed in the source. depending on the license, mixing them may be prohibited. for example, source code with a plain gpl or mpl license cannot be linked to or amended with other source code using any other kind of license. this is because the mpl and gpl include provisions contradicting this. however, source code that is dual-licensed with either the mpl or gpl allows additions or linkages with gpl source code. oss licensing today and in the future finally, let’s look at the current state of affairs in oss licensing and some of the issues it faces. non-licensing factors when we consider the application and upkeep of a license, there are some non-license factors to consider as well. when giving feedback on a project if you want to contribute modified s...
...mozilla foundation, does not permit modifications of its name or trademarked icon. for this reason, the debian project, which distributes free software as a volunteer effort, has a browser based on firefox, but with a different name and logo. document licenses as open-source software grows in popularity, people have begun thinking about applying its principles to content other than software, to allow anyone to duplicate, distribute, and modify it freely. because oss licenses aren’t directly applicable to these other media, a number of other licenses for documents and other resources have appeared, such as the following: gnu free documentation license (gfdl) creative commons the gfdl is a license for documents and was created by the fsf, the same people behind the gpl and lgpl. wikipe...
...le to these other media, a number of other licenses for documents and other resources have appeared, such as the following: gnu free documentation license (gfdl) creative commons the gfdl is a license for documents and was created by the fsf, the same people behind the gpl and lgpl. wikipedia uses this license. the debian project, however, considers its terms too harsh, and that it does not allow for the free distribution of documents. creative commons is a flexible copyright licensing scheme that applies not just to documents but other creative works, including music, pictures, video, etc. it has the following characteristics: gives creators flexibility when selecting and applying terms; terms of use stated in easy-to-understand language; licensing conditions conform with current c...
...ot just to documents but other creative works, including music, pictures, video, etc. it has the following characteristics: gives creators flexibility when selecting and applying terms; terms of use stated in easy-to-understand language; licensing conditions conform with current copyright laws; also has an rdf schema for attaching metadata. it is particularly convenient in the way that it allows creators to decide whether to permit commercial uses or not, whether to enforce copyleft or not, etc. this is easy to use when you are releasing new documents. the future of gpl despite being buffeted by circumstances, open source is becoming more and more solidly established. but the computer ecosystem is changing in fundamental ways, with software patents, drm, internationally applied licens...

Adding Events and Commands - Archive of obsolete content
event propagation. in a nutshell, events propagate from the root of the dom tree all the way down to the target element and then all the way up back to the root, in the capture and bubble phases, respectively. you can capture and cancel events during any of these phases, provided that they aren't canceled before they reach the point where you intended to capture them. the addeventlistener method allows you to control the phase where you want to handle an event, with the last argument of the function. in general, you should avoid adding event handlers in the capturing phase, or canceling events. this can lead to unexpected behavior for the user since most events have a default behavior associated to them. custom events this is a very powerful tool that you should know, even if it isn't that ...
...andle an event, with the last argument of the function. in general, you should avoid adding event handlers in the capturing phase, or canceling events. this can lead to unexpected behavior for the user since most events have a default behavior associated to them. custom events this is a very powerful tool that you should know, even if it isn't that frequently used. the dom createevent function allows you to create custom events that you can dispatch and capture. custom events serve as a good communication mechanism, specially when dealing with a somewhat common problem: communication between window xul and web page content. it isn't hard for xul code to control the content on pages being loaded or displayed, as we will see later on, but it can be hard for your extension xul code to receive ...
...attribute values set or removed as well. you can override pre-existing values, such as the label attribute value in the example. let onlinebroadcaster = document.getelementbyid("xulschoolhello-online-broadcaster"); onlinebroadcaster.setattribute("label", "something"); you can also have finer-grained control to this behavior by adding the observes element as a child to your observer node. this allows you to choose which attributes you want it to observe. broadcasters allow you to easily maintain consistency among numerous elements without having to add much code. they also save you the trouble of having to know if a given element is present in the dom or not. for example, if you have a customizable toolbar, you can't be sure if a given button is present or not, so it's easier to use a broad...
...="xulschoolhello-commandset"> <command id="xulschoolhello-hello-command" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> <!-- more commands. --> </commandset> <!-- more code here... --> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" command="xulschoolhello-hello-command" /> commands allow you to keep your javascript calls in a single place, avoiding code repetition and possible bugs. your ui can easily scale this way. you can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of xul code in the process. commands and broadcasters also facilitate working with complex form windows and dialog...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
« previousnext » adding a new toolbar adding new toolbars to firefox is easy, but adding them the wrong way is very easy as well. toolbars in firefox are very customizable. some users don't like extra toolbars, or they want to rearrange toolbar buttons to their liking, possibly merging multiple toolbars in the process. firefox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. to add your buttons, all you need to do is overlay the palette in your main browser overlay. <ov...
... </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window. the toolbox is the collection of toolbars in firefox, including the main menu bar. let's look at the attributes we used: the toolbarname is the name that will appear on the view > toolbars menulist. this menu allows hiding and showing any toolbar. the customizable attribute determines if the user can customize the toolbar. you should normally set this to true, unless you have strong reasons not to want users changing your toolbar. the mode attribute is set to icons, which is the usual value. this can be changed in the customize dialog by the user. the context attribute should also be set if you want a cu...
...ser. that's it for the basics. with this knowledge you should be able to create simple toolbars and toolbar buttons you can add to firefox. now we'll look deeper into the details of toolbars so that you can make great toolbars. toolbar buttons there are several types of buttons and elements you can add to a toolbar depending on your needs. the toolbarbutton element has the type attribute that allows you to change the behavior of the button in many ways. the menu and menu-button types allow you to create buttons that open popup menus beneath them. see the back/forward buttons in the main firefox toolbar for an example. menu toolbar buttons are handy when you want to include many options in your toolbar and you don't want it to be too cluttered. the other types, checkbox and radio are useful ...
... 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 button to the main toolbar ...

Adding windows and dialogs - Archive of obsolete content
thing. never open modal windows at startup. resizable. indicates the user can resize the window or not. in general, windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content. to open a new dialog, use the function window.opendialog, an extension of the open function. it allows you to send a set of optional parameters that can be used to communicate with the dialog. let somevalue = 2; let returnvalue = { accepted : false , result : "" }; window.opendialog( "chrome://xulschoolhello/content/somedialog.xul", "xulschoolhello-some-dialog", "chrome,centerscreen", somevalue, returnvalue); // you can send as many extra parameters as you need. // if (returnvalue.acce...
... ok to use this function if you're just debugging some problem and want to see if the program reaches a specific line of code, or to inspect the value of a variable, but your final extension should not have alert calls anywhere. if you use window.alert, the alert window will have the title [javascript application], indicating that the source of the message is not well defined. ...
...this normally should be set to the current window. you can pass a null value and the service will pick the currently active window. ...
...service(ci.nsipromptservice); if (prompts.confirm(window, "confirm title", "would you like to continue?")) { // do something. } else { // do something else } the method returns a boolean value indicating the user's response. others unprivileged javascript can also use the window.prompt function to receive text input from the user. the prompt service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "never ask this again"-type dialogs. the confirmex and prompt methods are the most customizable, allowing a great deal of options that cover most common dialog cases. using the prompt service will save you a lot of xul coding, and you'll be at ease knowing that you're using mozilla's ...

The Box Model - Archive of obsolete content
nded to keep style code in the skin section of the chrome. as their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much. all css properties involving lengths should be handled with caution. we recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. a common exception to this rule is when your css is directly related to images, where you'll usually handle measurements in pixels (px). also, just like in html, you can control the dimensions of inflexible elements using the width and height css properties and att...
...nt should be used mainly for text in xul forms, such as the ones you see in the firefox options / preferences window. here's a typical usage of the label element: <label control="xulschoolhello-greeting-textbox" value="&xulschoolhello.typegreeting.label;" /> <textbox id="xulschoolhello-greeting-textbox" /> the label says something like "type a greeting message", and the textbox next to it allows the user to type the message. the control attribute links the label to the textbox. if the user clicks on the label, the textbox will be focused. also, if the user has a screen reader, the label will be read when the focus is placed on the textbox. the description element is used for the rest of the cases, where the text is only meant as additional information and is not related to input elemen...
...n 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. this makes localization much harder, or even impossible in some cases. there are other more complicated text wrapping cases where a description won't be good enough. for instance, templates don't allow you to set the internal text in a description element in a way that it wraps properly. one way to work around this is using a textbox element instead. this blog post is a good guide on the subject, and you should keep it in mind if you need to do some advanced text handling. another way to handle excessive text length is to use the crop attribute. if the line of text is longer than its container...
...o set the internal text in a description element in a way that it wraps properly. one way to work around this is using a textbox element instead. this blog post is a good guide on the subject, and you should keep it in mind if you need to do some advanced text handling. another way to handle excessive text length is to use the crop attribute. if the line of text is longer than its container will allow, the text will be cut, showing "..." in the place where it was cut. you can choose where to cut the text, but cropping at the end is the most common practice. similarly as with wrapping, cropping will only occur is there is no room for the text to grow, so you'll need to restrict the width using css. text links xul makes it very easy for you to create a label that is also a link. all you need i...

XPCOM Objects - Archive of obsolete content
te the two. we often mention other "mozilla based applications". well, those are applications that, simply put, take the underlying platform with perhaps a few changes and additions, and then write their own chrome layer. this lower layer is called xulrunner, and it is a very powerful platform, providing a very robust development base for web-enabled, cross-platform applications. the fact that it allows to easily create os-independent applications is a big selling point for xulrunner. xpcom is the way in which the two layers (xulrunner and chrome) communicate. most of the objects and functions in the lower layers are hidden from the chrome; those that need to be publicized are exposed through xpcom components and interfaces. you can think of xpcom as a reference to all the capabilities availab...
...his, false); this._prefservice.queryinterface(ci.nsiprefbranch); this is a common piece of code you'll see when initializing components or jsm that rely on preferences. we use the preferences service to get and set preference values, such as the preference value we're getting on the fourth line of code. these methods are in the nsiprefbranch interface. the getservice and createinstance methods allow you to get the component already set to an interface. in many cases you only need to use one interface, and you won't have to worry about queryinterface. but in this case we need to change the interface to nsiprefbranch2, which is the one that includes the method that adds a preference observer. then we change it back, because after that we only need to get and set preferences, and those methods ...
...robably break, we'll cover this later on.) in the components directory, the file xsihellocounter.idl has the following contents: #include "nsisupports.idl" /** * counter for the hello world extension. keeps track of how many times the * hello world message has been shown. */ [scriptable, uuid(bd46f689-6c1d-47d0-bc07-bb52b546b8b5)] interface xsihellocounter : nsisupports { /* the maximum allowed count. */ const short max_count = 100; /* the current count. */ readonly attribute short count; /** * increments the display count and returns the new count. * @return the incremented count. */ short increment(); }; the bits about nsisupports are common to most xpcom interface definitions. nsisupports is the base interface for all interfaces, so it should always be inclu...
...ntermodule; } this piece of code is the first one that firefox looks for in all implementation files in the components directory. it simply returns the object that precedes it. var countermodule = { // registerself, unregisterself, getclassobject, canunload }; the only thing you may need to change here is when you need to use the category manager. the category manager is a service that allows you to register your component under categories that are either pre-existing or you make up. the service also allows you to get all components registered in a category and invoke methods on them. one common use for this service is registering a component as a content policy. with it you can detect and filter url loads. this is covered further ahead in another section of the tutorial. the add an...

Tabbed browser - Archive of obsolete content
t in the onload handler will be a 'tab' xul element). see tabbrowser for getbrowserfortab(). note that the code above does not work inside of the electrolysis (e10s) enabled tabs. opening a url in the correct window/tab there are methods available in chrome://browser/content/utilityoverlay.js that make it easy to open url in tabs such as openuilinkin and openuilink. ...
...the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. xul: <menuitem oncommand="myextension.foo(even...
...lization var container = gbrowser.tabcontainer; container.addeventlistener("tabpinned", exampletabpinned, false); container.addeventlistener("tabunpinned", exampletabunpinned, false); // when no longer needed container.removeeventlistener("tabpinned", exampletabpinned, false); container.removeeventlistener("tabunpinned", exampletabunpinned, false); detecting tab selection the following code allows you to detect when a new tab is selected in the browser: function exampletabselected(event) { var browser = gbrowser.selectedbrowser; // browser is the xul element of the browser that's just been selected } // during initialisation var container = gbrowser.tabcontainer; container.addeventlistener("tabselect", exampletabselected, false); // when no longer needed container.removeeventlisten...
...this code will work in the scope of the browser window (e.g. you're working from an overlay to the browser window). gbrowser.contentdocument; or content.document if you're working from a window or dialog that was opened by the browser window, you can use this code to get the document displayed in the selected tab in the browser wind...

Plug-n-Hack - Archive of obsolete content
to their browser if any of these steps are carried out incorrectly then the browser will typically fail to connect to any website – debugging such problems can be frustrating and time-consuming. without integration between security tools and browsers, a user must often switch between the tool and their browser several times to perform a simple task, such as intercepting an http(s) request. pnh allows security tools to declare the functionality that they support which is suitable for invoking directly from the browser. a browser that supports pnh can then allow the user to invoke such functionality without having to switch to and from the tool. while some of the pnh capabilities do have a fixed meaning, particularly around proxy configuration, most of the capabilities are completely generic, ...
...s security tools to declare the functionality that they support which is suitable for invoking directly from the browser. a browser that supports pnh can then allow the user to invoke such functionality without having to switch to and from the tool. while some of the pnh capabilities do have a fixed meaning, particularly around proxy configuration, most of the capabilities are completely generic, allowing tools to expose whatever functionality they want. implementing the above features in firefox and the tools that we work on and support gives our team an advantage, however we believe that opening up such capabilities to all browsers and all security tools is much more useful for security researchers and application developers and testers. as a result we have designed and developed the pnh prot...
...rchers and application developers and testers. as a result we have designed and developed the pnh protocol to be both browser and tool independent. the current protocol and firefox implementation are released under the mozilla public license 2.0 which means it can be incorporated in commercial tools without charge. ...
... the pnh protocol to be both browser and tool independent. the current protocol and firefox implementation are released under the mozilla public license 2.0 which means it can be incorporated in commercial tools without charge. ...

Venkman Introduction - Archive of obsolete content
features, procedures, and tips described here will make you a more confident web developer and debugger. venkman is both a graphic and a console debugger. features such as breakpoint management, call stack inspection, and variable/object inspection are available from the user interface and from console commands, letting you work in the way you are most accustomed to. the interactive console also allows for execution of arbitrary javascript code. venkman's keyboard shortcuts are the same as leading visual debugging environments, and gdb users should be familiar with venkman's /break, /step, /next, /finish, /frame, and /where commands. on windows, the javascript debugger compares favorably with visual interdev and other large web development tools. on other platforms, including mac os and unix,...
...mber will have a breakpoint set. if no loaded files match the file pattern or line number, an error message is printed to the console and the command fails. the fbreak command is identical, with the exception that if no files match the pattern or line, a "future breakpoint" is recorded. the next time a file is loaded that matches the pattern and line, a breakpoint will be set. in this way, fbreak allows one to set breakpoints in files that are not yet loaded, as well as set breakpoints that are triggered when a file is loaded. the interactive session view another basic view in venkman is the actual interactive session view, which allows you to interact with the debugger from a command line. commands are entered in the text box, and responses are appended to the end of the output. type /com...
...ommands available. the /help command can be used to get additional information about a specific command. you can type /help next, for example, to see how to use the next command. the input area supports command history and tab-completion for command names. command history remembers the last 20 commands entered. the up and down arrows can be used to revisit these previous commands. ...
... to remove a view from venkman, simply click the close button at the top right of that view. ...

loadOneTab - Archive of obsolete content
there's also no owner parameter as the owner tab is specified automatically. ...
...there's also no owner parameter as the owner tab is specified automatically. ...
...there's also no owner parameter as the owner tab is specified automatically. parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab. ...
...ab is specified automatically. parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab. and if null or not specified, this parameter will default to the browser.tabs.loadinbackground preference. firefox 3.6 note the second form of this method was added in firefox 3.6; it adds the relatedtocurrent parameter, and allows the parameters to be specified by name, in any order. ...

Trees - Archive of obsolete content
« previousnext » xul provides a way to create tabular or hierarchical lists using a tree. the tree one of the more complex elements in xul is the tree. a tree may be used to display rows of text in columns. it can be used with rows either in a flat list or arranged into a hierarchy. a tree also allows the user to rearrange, resize and hide individual columns. some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any type of content, whereas trees may onl...
...pecify the rows in the listbox. in a tree, all of the data to be displayed is supplied by a separate object, called a tree view. when it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. the tree is smart enough to only ask for information from the view for those rows that need to be displayed. this allows the view to be optimized such that it only needs to load the data for displayed content. for instance, a tree might have thousands of rows, yet most of them will be scrolled off the border of the tree, hidden from view. this means that the tree is scalable to any number of rows without any performance problems. of course, this is independant of the performance of the view object itself. a tree ...
...ree view is an object which implements the nsitreeview interface. this interface contains thirty properties and functions which you may implement. these functions will be called by the tree as necessary to retrieve data and state about the tree. for instance, the getcelltext() function will be called to get the label for a particular cell in the tree. an advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed. this allows more flexibility when using trees. naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. fortunately, xul provides a couple of built-in view implementations w...
...es sense to make the tree grow to fit. however, you may specify a specific number of rows to appear in a tree by setting the rows attribute on the tree element. this attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. the total number of rows is supplied by the tree view. if there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. if you don't specify the rows attribute, the default value is 0, which means that none of the rows will appear. in this case, you would make the tree flexible. if your tree is flexible, it doesn't need a rows attribute since it will grow to fit the available space. the content tree view having said that the data to be displayed in a tree comes from a view and n...

The Implementation of the Application Object Model - Archive of obsolete content
two-fold. the first section of the document describes the motivation and reasoning behind using rdf as the foundation of xul. this section makes a technical argument both for having xul in the first place and for using rdf as the underlying implementation of xul's content model. the second section describes the xul/rdf architecture itself and outlines enhancements to the xul language in order to allow the markup language to reference local data and to indicate how and when it would like to be annotatable with local data. the case for the xul/rdf approach what is xul? xul (pronounced zool) used to be a ravening demon intent upon taking over the earth in ghost busters. in recent years, xul dropped the z from its name and replaced it with an x, and upon doing so, transformed into something f...
... source that is the equivalent of a local annotation to the xul file. in this case, rdf will do one of two things. if the xul stream came from a remote site, then rdf has no choice but to make a local annotation on the graph. if the xul stream came from a local file, then rdf can either locally annotate the graph (just as before), or it can serialize the xul and write over the original file (thus allowing local changes to a local file to be reflected right in the xul). referencing local data: the localdata attribute a tag that references local rdf data does so by using the localdata attribute, which gives the uri of the local data that should be merged in with the xul content tree. examples of tags that can reference local data are menu, menuitem, menubar, toolbox, toolbar, treebody, and tre...
...will be. talk to john mcmullen about 5.0 preferences and figure out where localdata will need to be used (likely on every form element control) talk to steve elmer. it's likely that this might be the desirable solution for buttons that observe preferences (like the home button) denoting persistence of local annotations to the aom: the persistent attribute a content tree in xul that wishes to allow persistent local annotations to be made to all the nodes in the subtree (including the node itself) must specify this capability using the persistent attribute. the persistent attribute has values of true and false, with true specifying that local annotations that are persistent are desired. the default assumption if this attribute is not present is that local annotations are not allowed. one sub...
... must specify this capability using the persistent attribute. the persistent attribute has values of true and false, with true specifying that local annotations that are persistent are desired. the default assumption if this attribute is not present is that local annotations are not allowed. one subtree nested inside another subtree can specify a different value for the persistent attribute, thus allowing the xul writer to specify a default for the whole window, but to still selectively override it for certain subtrees. note that even if the persistent attribute is set to false, that changes can still be made to a window's content tree. they simply won't be remembered across sessions. preventing the persistence of attributes: the discardable attribute individual attributes can be specified a...

browser - Archive of obsolete content
following arguments. droppedlinkhandler(event, uri, name) -- firefox 51 or older droppedlinkhandler(event, links) -- firefox 52 or newer event -- drop event, or null if no event is available uri -- uri string of the dropped link name -- name string of the dropped link links -- array of the dropped items with nsidroppedlinkitem interface homepage type: url this attribute allows you to set a homepage for the browser element. it does not have any correlation with the user's browser homepage; instead it is a convenient property to hold a home page. you can switch to this home page using the gohome method. showcaret type: boolean whether or not to cause a typing caret to be visible in the content area. default is false. src type: uri the...
...t), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. content a browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one browser among ma...
...this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri. ...
... given referrer and character set. the first argument should be a string, not a nsiuri object. to get a string from an nsiuri, use nsiuri.spec or nsiuri.asciispec loaduriwithflags( uri, flags, referrer, charset, postdata ) return type: no return value load a url into the document, with the specified load flags, the given referrer, character set, and post data. in addition to the flags allowed for the reloadwithflags method, the following flags are also valid: load_flags_is_refresh: this flag is used when the url is loaded because of a meta tag refresh or redirect. load_flags_is_link: this flag is used when the url is loaded because a user clicked on a link. the http referer header is set accordingly. load_flags_bypass_history: do not add the url to the session history. loa...

iframe - Archive of obsolete content
t), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. content a browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one browser among ma...
...this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri. ...
...to be used for loading privileged content using a chrome:// uri. don't use for content from web, as this may cause serious security problems! transparenttype: one of the values belowset the background of an iframe as transparent.transparentthis results in the iframe's background being transparent. ...
...r loading privileged content using a chrome:// uri. don't use for content from web, as this may cause serious security problems! transparenttype: one of the values belowset the background of an iframe as transparent.transparentthis results in the iframe's background being transparent. ...

keyset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element for key elements. the keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
... xul reference home [ examples | attributes | properties | methods | related ] a container element for key elements. the keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
...d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. properties ...
...with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...

listbox - Archive of obsolete content
you may specify the number of rows to display in the list using the rows attribute. additional rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. ...
...d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablek...
...article. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of rows in the element, use the getrowcount method. seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbo...
...never an item is selected, either by the user or by calling one of the select methods. if set to true, the select event is never fired. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require ...

listhead - Archive of obsolete content
d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. inherited...
... using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...h an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
... sortdirection, sortresource, sortresource2, 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. disabled type: boolean gets and sets the value of the disabled attribute. ...

listheader - Archive of obsolete content
d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label ...
...us and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...ems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...rdinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, 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. ...

menu - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element, much like a button, that is placed on a menubar. when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...t key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box dire...
...d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label t...
...the width of the popup will not be constrained to the size of the menu. pref the preferred width of the menu label or button will be the size needed for the popup contents. this is the default value for menulists. always both the preferred and minimum width of the menu label or button will be the same as that necessary for the menupopup. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require ...

menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side ...
...d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image ...
... this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require ...

rows - Archive of obsolete content
mples | attributes | properties | methods | related ] defines the rows of a grid. child row elements define the individual rows to appear in the grid. each child of a rows element should be a row element. the rows element may be nested inside another rows element. the children of these nested rows are counted as normal rows as if they were part of the parent. however, nesting rows elements allows groups of rows to have a separate appearance such as a different border, or separate scrolling may be defined for these rows. non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for an example. attributes inherited from...
...ave a separate appearance such as a different border, or separate scrolling may be defined for these rows. non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for an example. ...
...e appearance such as a different border, or separate scrolling may be defined for these rows. non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for an example. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

scrollbox - Archive of obsolete content
for the most part, the horizontal and vertical scrollbars will independently handle too-tall and too-wide cases, but each scroll bar takes up additional width and so the appearance of one scroll bar can trigger the other one if it's close to the edge anyway. use overflow:scroll if you want the scroll bars on all the time. <vbox f...
...llintoview. prior to gecko 19, scrollintoview() didn't exist in xul. do this instead: var xpcominterface =scrollbox_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...prior to gecko 19, scrollintoview() didn't exist in xul. do this instead: var xpcominterface =scrollbox_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

window - Archive of obsolete content
riented box. as it is a box, all box attributes can be used. by default, the window will have a platform-specific frame around it. to set an icon for the window, create a platform-specific icon file <windowid>.ico and/or <windowid>.xpm and place or install these files into the <mozilla-directory>/chrome/icons/default/ directory. the <windowid> is the value of the id attribute on the window. this allows you to have a different icon for each window. without including the css file at "chrome://global/skin/", the window will not be stylized and will be invisible and glitchy when opened as a dialog. note: starting in gecko 1.9.2, you can detect when a window is activated or deactivated by watching for the "activate" and "deactivate" events. see window activation events. more information is ava...
... activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. chromemargin type: margin string controls the amount of chrome that should be visible on each side of the window. the s...
...tended to be loaded in a tab, to disable the find bar for the tab with this document. this is used to prevent the find bar from being displayed when it's not supported by the content (such as in the add-ons manager tab). drawintitlebar type: boolean if this attribute is true, the top of the window's content area will begin at the top edge of the title bar, instead of below the title bar. this allows the window to draw in the title bar. this is supported only from window elements, and is ignored on platforms that don't support drawing into the title bar. fullscreenbutton type: boolean set this attribute to true to display a button in the window chrome to allow the user to switch the window into full screen mode. supported on mac os x 10.7 lion and later and on windows. the window receiv...
...nctions use this attribute to group windows of the same type together. ...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
ese. runat=”client” – code contained in this block is restricted to execution client-side, which is also what happens if no runat attribute is specified. runat=”server” – code contained in this block is restricted to execution server-side. runat=”both” – code may be invoked on the client or server side. runat=”server-proxy” – allows for the exposure of server-side javascript functions to the browser. jaxer manages ajax calls behind the scenes to accomplish this. while most of the runat attribute values above are self explanatory, the server-proxy concept is best explained through example. consider the code in listing 4. listing 4 - demonstration of server and client context <script runat="serve...
...an't see me!"; } </script> <script runat="client"> alert( exposed() ); alert( notexposed() ); </script> there are two blocks of scripts defined, one with runat set to server and the other set to client. this creates a strict separation of the two environments. as it stands, the code in the client block would throw an error since the server-side javascript is not within scope. if you intend to allow the execution of server-side javascript from the client-side, you can correct the code in listing 1 by doing one of three things. change the runat attribute value of server to server-proxy. add a statement inside the server-side script block to expose a particular server-side function to the browser. this statement is of the form <functionname>.proxy = true. ensure the server-si...
... application is running under jaxer build 0.9.7.2472 and also incorporates the extjs version 2.1 javascript framework for user interface controls. for more information how to obtain and install these products, refer to the resources section. single page applications the first feature the application demonstrates is the concept of a single page application. since jaxer allows you to define which code is reserved for the server-side, which code stays on the client-side, and which code is shared between the two, it's very possible to produce a single page application which could also include any number of external assets such as a popular third party framework. listing 6 shows the beginning of our application which takes advantage of some of these concepts. ...
...it. this code is simple in that it updates the innerhtml of the logging div with the contents of a text file. the contents of this file are obtained through the file i/o capabilities exposed by jaxer which is what we'll examine next. file i/o jaxer ships with a comprehensive filesystem i/o capability that is very useful. there are numerous methods in this namespace which allow for a simple, yet powerful approach to file management. the example application uses this capability to log comments submitted by the form to a plain text file named dump.txt. listing 8 shows the two functions used to handle the comment submission process. listing 8 - submitting comment data <script> function formhandler() { // get the form values var name = txt_name.

XForms Custom Controls - Archive of obsolete content
la.org/projects/xforms/2005/type. for example, if a control is bound to a node of type xsd:integer then the typelist attribute will be "http://www.w3.org/2001/xmlschema#integer http://www.w3.org/2001/xmlschema#decimal". this is because xsd:integer is inherited from the xsd:decimal data type. we recommend that you use this attribute to create the css binding rule for your custom control. this will allow you to bind your custom control for the data type that you are targeting and any type derived from that target type. so if you want an input bound to an instance node of type integer (and all types derived from integer), you would use: @namespace xf url(http://www.w3.org/2002/xforms); @namespace moztype url(http://www.mozilla.org/projects/xforms/2005/type); xf|input[moztype|typelist~="http://www...
...ase contact the mozilla xforms developers before you start. hopefully we can help you avoid a lot of frustration and despair :). overview the mozilla xforms controls are largely implemented using xbl and the bindings are applied to the individual xforms control tags via css. so you can always refer to our source code to get some great examples of how xforms controls can be written. this will also allow you to be up to date with our current approaches (often the result of hard-learned lessons) and that will hopefully help you to more easily write your own controls. to get started, you really only need to know the language where you'd like to use xforms (like xhtml or xul), some xbl and javascript, and the xpcom interfaces we are exposing for your use. details interfaces this section describes in...
...hrough one of a variety of ways (i.e. through xf:setfocus action) and that the control needs to ensure that the proper widget is given focus. with rare exception, your control should only need to implement the nsixformsuiwidget interface. but certain xforms controls need to implement additional interfaces. such elements include upload and case. nsixformsaccessors the nsixformsaccessors interface allows access to the value and the state of the instance node that the control is bound to (see extensions/xforms/nsixformsaccessors.idl). currently interface is: interface nsixformsaccessors : nsisupports { /** * return value of instance node. */ domstring getvalue(); /** * set value of instance node. */ void setvalue(in domstring value); /** * return true if the instance no...
...xforms controls (except minimal/default select1 that is hosted in select1.xml file) range.xml - contains the base bindings for the range xforms control. xforms.xml also defines the few base bindings that are common for all xforms controls. these are: xformswidget-general - defines utility properties and methods common for all xforms controls xformswidget-accessors - defines the methods that are allow the bindings to work with bound instance nodes and the xforms element itself. xformswidget-base - implements nsixformsuiwidgets interfaces. you are free to choose what type of binding you will extend to provide the foundation for your custom control. this will very likely be one of the implementation bindings or one of the base bindings. example a collection of custom control examples can be fou...

Mozilla XForms Specials - Archive of obsolete content
path functions are not supported, you will have to specify all parameters when calling a function. this affects functions like hmac() or digest(). instead of using digest('abc', 'sha-1') explicitly use the third parameter (the results are equal): digest('abc', 'sha-1', 'base64') (limitation tracked in bug 477857) extensions enumerating instances the standardized nsixformsmodelelement does not allow one to enumerate over all possible instances, but only to retrieve instances by their name. in the mozilla xforms extension we added a getinstancedocuments() function to the model which returns all the model's instance documents. this is documented in nsixformsnsmodelelement. getting to instance element from a data node in the xforms 1.0 specification there is no way to get to the instance elemen...
...mozilla xforms extension we added a getinstancedocuments() function to the model which returns all the model's instance documents. this is documented in nsixformsnsmodelelement. getting to instance element from a data node in the xforms 1.0 specification there is no way to get to the instance element from an instance data node. we have added a function via the getfeature() call on each node, that allows the form author to do that. that is, if instancenode is a node in an instance document, then: instancenode.getfeature("org.mozilla.xforms.instanceowner", "1.0") will return the <instance> element (in the main document) that the node belongs to. getting to the instance document from the instance element in the xforms 1.0 specification you have to go through the model element to get to the instan...
... the xforms 1.0 specification you have to go through the model element to get to the instance document. it seems a bit awkward if you have the instance element, so we have added a getinstancedocument() function directly on the instance element as a shortcut. this is documented in nsixformsnsinstanceelement. custom control interface we have added a lot of functionality to our user interface, which allows the form authors to create custom controls. it involves exposing some (script) functionality on all our controls, like output, input, etc. and allowing the ui to be represented in xbl. more information can be found in xforms:custom controls. labelposition for xforms:input elements bound to a boolean node we support an attribute labelposition in the namespace http://www.mozilla.org/projects/xfor.
...for details, see the input control documentation. misc cross domain submission not exactly either a limitation, or an extension, but it is worth mentioning here. ...

Anatomy of a video game - Game development
o call methods right as they are needed and idle (or do their other tasks) in the gaps. it is an excellent idea to attach your code to the moments that are appropriate for them. think about whether your function really needs to be called on a strict interval of time, every frame, or only after something else happens. being more specific with the browser about when your function needs to be called allows the browser to optimize when it is called. also, it will probably make your job easier. some code needs to be run frame-by-frame so why attach that function to anything other than the browser's redraw schedule? on the web, window.requestanimationframe() will be the foundation of most well-programmed per-frame main loops. a callback function must be passed in to it when it is called. that callb...
...ain() function, defined in the first statement. because main() is called once in the second statement and every call of it places itself in the queue of things to do next frame, main() is synchronized to your framerate. of course this loop is not perfect. before we discuss ways to change it, let us discuss what it already does well. timing the main loop to when the browser paints to the display allows you to run your loop as frequently as the browser wants to paint. you are given control over each frame of animation. it is also very simple because main() is the only function getting looped. a first person shooter (or a similar game) presents a new scene once every frame. you cannot really get more smooth and responsive than that. but do not immediately assume animations require frame-by-fram...
...on the other hand, counts the number of milliseconds since navigationstart (when the previous document is unloaded). this value is returned as a decimal number accurate to a thousandth of a millisecond. it is known as a domhighrestimestamp but, for all intents and purposes, consider it a floating point number. note: systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. they should provide 0.001ms accuracy if they are capable of it, however. this value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. to acquire one of these timestamps, you can call win...
...e about what the user sees. the draw method can view the last update and when it happened. since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. it does not matter whether this is more frequent than the official update loop (or even less frequent). the update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. there are many ways to separate the update method in web standards: draw on requestanimationframe and update on a window.setinterval or window.settimeout. this uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.) draw on requestan...

Game promotion - Game development
nd a theme if you are stuck for ideas. website and blog you should definitely create your own website containing all the information about your games, so people can see what you've worked on. the more information you can include the better — you should include screenshots, description, trailer, press kit, requirements, available platforms, support details and more. you'll get bonus points for allowing your users to directly play your games online — at least in demo form. also, you should do some work on seo to allow people to find your games more easily. you should also blog about everything related to your gamedev activities. write about your development process, nasty bugs you encounter, funny stories, lessons learned, and the ups and downs of being a game developer. continually publis...
...grow your fanbase by talking to them, sharing tips, offering discounts, giving away prizes in competitions, or just complaining at the weather or buggy browser you have to deal with. act cool, be generous, be yourself and be there for others, and you'll get treated with respect. game portals using game portals is mostly concerned with monetization, but if you're not planning to sell licenses to allow people to purchase your game and are intending to implement adverts or in-app purchases instead, promoting your game across free portals can be effective. you can send your games for publication on portals like crazygames.com, gamedistribution.com, lagged.com, pacogames.com ,games4html5.com or html5games.com, and there are about 20-30 other notable game portals with and without api. those port...
... are intending to implement adverts or in-app purchases instead, promoting your game across free portals can be effective. you can send your games for publication on portals like crazygames.com, gamedistribution.com, lagged.com, pacogames.com ,games4html5.com or html5games.com, and there are about 20-30 other notable game portals with and without api. those portals that have their own api will allow you to authorize users, save their progress and process in-app purchases. you can also sell a full version of the game from inside your browser demo version, which will be a great move considering high competition, some developers even manage to make full browser versions. most portals offer revenue share deals or will buy non exclusive license. free portals offer traffic, but only the best ones...
...ns directly — besides the promotion part you can also test new builds of your game on regular people and fix any bugs (or incorporate any feedback) they uncover. you can't imagine what people may come up with when playing your game, and what obvious issues you've missed while spending hours polishing it. promo codes if you're selling the game, then create the ability to distribute promo codes allowing people to access your game for free (or at least a demo or time-limited version), and send them all over the place — to press, youtubers, as competition prizes, etc. if the game reaches certain people you'll get a free advert to thousands of players. it can boost interest in your game more than anything else if you get lucky. fostering the community you can help community grow and promote ...

Tiles and tilemaps overview - Game development
be a collision grid, a path-finding grid, etc., depending on the type of game. note: for the visual grid, a special value (usually a negative number, 0 or null) is needed to represent empty tiles. square tiles square-based tilemaps are the most simple implementation. a more generic case would be rectangular-based tilemaps — instead of square — but they are far less common. square tiles allow for two perspectives: top-down (like many rpg's or strategy games like warcraft 2 or final fantasy's world view.) side-view (like platformers such as super mario bros.) static tilemaps a tilemap can either fit into the visible screen area screen or be larger. in the first case, the tilemap is static — it doesn't need to be scrolled to be fully shown. this case is very common in arcade ga...
...le = map.gettile(column, row); var x = column * map.tilesize; var y = row * map.tilesize; drawtile(tile, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps. scrolling tilemaps scrolling tilemaps only show a small portion of the world at a time. they can follow a character — like in platformers or rpgs — or allow the player to control the camera — like in strategy or simulation games. positioning and camera in all scrolling games, we need a translation between world coordinates (the position where sprites or other elements are located in the level or game world) and screen coordinates (the actual position where those elements are rendered on the screen). the world coordinates can be expressed in terms...
...l, however, and can take a toll on performance. only tiles that are at visible should be rendered ideally — see the performance section for more ideas on improving rendering performance. you can read more about implementing scrolling tilemaps and see some example implementations in square tilemaps implementation: scrolling maps. layers the visual grid is often made up of several layers. this allows us to have a richer game world with less tiles, since the same image can be used with different backgrounds. for instance, a rock that could appear on top of several terrain types (like grass, sand or brick) could be included on it's own separate tile which is then rendered on a new layer, instead of several rock tiles, each with a different background terrain. if characters or other game sprit...
...nce the same image can be used with different backgrounds. for instance, a rock that could appear on top of several terrain types (like grass, sand or brick) could be included on it's own separate tile which is then rendered on a new layer, instead of several rock tiles, each with a different background terrain. if characters or other game sprites are drawn in the middle of the layer stack, this allows for interesting effects such as having characters walking behind trees or buildings. the following screenshot shows an example of both points: a character appearing behind a tile (the knight appearing behind the top of a tree) and a tile (the bush) being rendered over different terrain types. the logic grid since tilemaps are an actual grid of visual tiles, it is common to create a mapping ...

Responsive design - Learn web development
rview: css layout next in the early days of web design, pages were built to target a particular screen size. if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css bui...
...sponsive sites easier. the rest of this article will point you to the various web platform features you might want to use when creating a responsive site. media queries responsive design was only able to emerge due to the media query. the media queries level 3 specification became a candidate recommendation in 2009, meaning that it was deemed ready for implementation in browsers. media queries allow us to run a series of tests (e.g. whether the user's screen is greater than a certain width, or a certain resolution) and apply css selectively to style the page appropriately for the user's needs. for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 800 pixels wide. the css ...
...as described in the layout topic flexbox: flexible sizing of flex items. .container { display: flex; } .item { flex: 1; } note: as an example, we have rebuilt the simple responsive layout above, this time using flexbox. you can see how we no longer need to use strange percentage values to calculate the size of the columns: example, source code. css grid in css grid layout the fr unit allows the distribution of available space across grid tracks. the next example creates a grid container with three tracks sized 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...
... you will want to use. initial-scale: sets the initial zoom of the page, which we set to 1. height: sets a specific height for the viewport. minimum-scale: sets the minimum zoom level. maximum-scale: sets the maximum zoom level. user-scalable: prevents zooming if set to no. you should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems. note: there is a css @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. when both are used the meta tag overrides @viewport. summary responsive design refers to a site or application design that responds to the environment in which it is viewed.

JavaScript basics - Learn web development
the core javascript language, unlocking a vast amount of functionality with minimum effort. these include: browser application programming interfaces (apis) built into web browsers, providing functionality such as dynamically creating html and setting css styles; collecting and manipulating a video stream from a user's webcam, or generating 3d graphics and audio samples. third-party apis that allow developers to incorporate functionality in sites from other content providers, such as twitter or facebook. third-party frameworks and libraries that you can apply to html to accelerate the work of building sites and applications. it's outside the scope of this article—as a light introduction to javascript—to present the details of how the core javascript language is different from the too...
...string. to signify that the value is a string, enclose it in single quote marks. let myvariable = 'bob'; number this is a number. numbers don't have quotes around them. let myvariable = 10; boolean this is a true/false value. the words true and false are special keywords that don't need quote marks. let myvariable = true; array this is a structure that allows you to store multiple values in a single reference. let myvariable = [1,'bob','steve',10]; refer to each member of the array like this: myvariable[0], myvariable[1], etc. object this can be anything. everything in javascript is an object, and can be stored in a variable. keep this in mind as you learn. let myvariable = document.queryselector('h1'); all of the above ...
...heading.textcontent = 'mozilla is cool, ' + myname; } the setusername() function contains a prompt() function, which displays a dialog box, similar to alert(). this prompt() function does more than alert(), asking the user to enter data, and storing it in a variable after the user clicks ok. in this case, we are asking the user to enter a name. next, the code calls on an api localstorage, which allows us to store data in the browser and retrieve it later. we use localstorage's setitem() function to create and store a data item called 'name', setting its value to the myname variable which contains the user's entry for the name. finally, we set the textcontent of the heading to a string, plus the user's newly stored name. add the if ... else block (below). we could call this initialization cod...
...ether the name data exists. if not, the setusername() function runs to create it. if it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using getitem() and set the textcontent of the heading to a string, plus the user's name, as we did inside setusername(). put this onclick event handler (below) on the button. when clicked, setusername() runs. this allows the user to enter a different name by pressing the button. mybutton.onclick = function() { setusername(); } a user name of null? when you run the example and get the dialog box that prompts you to enter your user name, try pressing the cancel button. you should end up with a title that reads mozilla is cool, null. this happens because—when you cancel the prompt—the value is set as ...

Responsive images - Learn web development
elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. let's run through the contents of each now: srcset defines the set of images we will allow the browser to choose between, and what size each image is. each set of image information is separated from the previous one by a comma. for each one, we write: an image filename (elva-fairy-480w.jpg) a space the image's intrinsic width in pixels (480w) — note that this uses the w unit, not px as you might expect. this is the image's real size, which can be found by inspecting the image fi...
...ng web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design). ...
...t different image display sizes. for example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. when viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. it would probably be better to show a smaller, 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 br...
...s kind of thing very often. in all cases, you must provide an <img> element, with src and alt, right before </picture>, otherwise no images will appear. this provides a default case that will apply when none of the media conditions return true (you could actually remove the second <source> element in this example), and a fallback for browsers that don't support the <picture> element. this code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below: note: you should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute. why can't we just do this using css or javascript? when the browser starts to load a page, it starts to download (preload) any images bef...

Video and audio content - Learn web development
nt, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. ovps even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. we'll be discussing this kind of service a bit more in the next article. the <video> element the <video> element allows you to embed a video very easily. a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed. it wor...
...ontrols attribute to include the browser's own control interface, or build your interface using the appropriate javascript api. at a minimum, the interface must include a way to start and stop the media, and to adjust the volume. the paragraph inside the <video> tags this is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. this can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using. the embedded video will look something like this: you can try the example live here (see also the source code.) using multiple source formats to improve compatibilit...
...video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video> this will result in a video that has subtitles displayed, kind of like this: for more details, please read adding captions and subtitles to html5 video. you can find the example that goes along with this article on github, written by ian devlin (see the source code too.) this example uses some javascript to allow users to choose between different subtitles. note that to turn the subtitles on, you need to press the "cc" button and select an option — english, deutsch, or español. note: text tracks also help you with seo, since search engines especially thrive on text. text tracks even allow search engines to link directly to a spot partway through the video. active learning: embedding your own audio ...
..., or español. note: text tracks also help you with seo, since search engines especially thrive on text. text tracks even allow search engines to link directly to a spot partway through the video. active learning: embedding your own audio and video for this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. you may have to do some conversion to end up with a webm and mp4 in the case of video, and an mp3 and ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as miro video converter and audacity. we'd like you to have a g...

General asynchronous programming concepts - Learn web development
s available. there's no sense sitting there waiting for something when you could let the other task chug along on another processor core and let you know when it's done. this lets you get other work done in the meantime, which is the basis of asynchronous programming. it is up to the programming environment you are using (web browsers, in the case of web development) to provide you with apis that allow you to run such tasks asynchronously. blocking code asynchronous techniques are very useful, particularly in web programming. when a web app runs in a browser and it executes an intensive chunk of code without returning control to the browser, the browser can appear to be frozen. this is called blocking; the browser is blocked from continuing to handle user input and perform other tasks until t...
... b thread 2: task c --> task d javascript is single-threaded javascript is traditionally single-threaded. even with multiple cores, you could only get it to run tasks on a single thread, called the main thread. our example from above is run like this: main thread: render circles to canvas --> display alert() after some time, javascript gained some tools to help with such problems. web workers allow you to send some of the javascript processing off to a separate thread, called a worker so that you can run multiple javascript chunks simultaneously. you'd generally use a worker to run expensive processes off the main thread so that user interaction is not blocked. main thread: task a --> task c worker thread: expensive task b with this in mind, have a look at simple-sync-worker.html (see i...
... --> task b --> |task d| worker thread: task c -----------> | | in this case, let's say task d makes use of the results of both task b and task c. if we can guarantee that these results will both be available at the same time, then we might be ok, but this is unlikely. if task d tries to run when one of its inputs is not yet available, it will throw an error. to fix such problems, browsers allow us to run certain operations asynchronously. features like promises allow you to set an operation running (e.g. the fetching of an image from the server), and then wait until the result has returned before running another operation: main thread: task a task b promise: |__async operation__| since the operation is happening somewhere else, the main thread is not blocked...
... task b promise: |__async operation__| since the operation is happening somewhere else, the main thread is not blocked while the async operation is being processed. we'll start to look at how we can write asynchronous code in the next article. exciting stuff, huh? keep reading! conclusion modern software design increasingly revolves around using asynchronous programming, to allow programs to do more than one thing at a time. as you use newer and more powerful apis, you'll find more cases where the only way to do things is asynchronously. it used to be hard to write asynchronous code. it still takes getting used to, but it's gotten a lot easier. in the rest of this module, we'll explore further why asynchronous code matters and how to design code that avoids some of the pr...

Client-side web APIs - Learn web development
il has had a huge impact on the performance and behavior of sites. in this article, we'll explain the concept, and look at technologies that make it possible, such as xmlhttprequest and the fetch api. third party apis the apis we've covered so far are built into the browser, but not all apis are. many large websites and services such as google maps, twitter, facebook, paypal, etc. provide apis allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom google maps on your site, or using facebook login to log in your users). this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the latter. drawing graphics the browser contains some very powerful graphics programming...
... at the difference between browser apis and 3rd party apis and shows some typical uses of the latter. drawing graphics the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl). ...
...this article explains the very basics of how these work. ...
...for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc. this article shows you how to do common tasks such as creating custom playback controls. client-side storage modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. this article explains the very basics of how these work. ...

Client-Server Overview - Learn web development
ength: 41823). at the end of the message we see the body content — which contains the actual html returned by the request. ...
...ttp-equiv="x-ua-compatible" content="ie=edge"> <script>(function(d) { d.classname = d.classname.replace(/\bno-js/, ''); })(document.documentelement);</script> ... the remainder of the response header includes information about the response (e.g. when it was generated), the server, and how it expects the browser to handle the page (e.g. the x-frame-options: deny line tells the browser not to allow this page to be embedded in an <iframe> in another site). post request/response example an http post is made when you submit a form containing information to be saved on the server. the request the text below shows the http request made when a user submits new profile details on this site. the format of the request is almost the same as the get request example shown previously, though the fir...
...e example of a product site, the server would store product "data" in a database rather than individual html files. when receiving an http get request for a product, the server determines the product id, fetches the data from the database, and then constructs the html page for the response by inserting the data into an html template. this has major advantages over a static site: using a database allows the product information to be stored efficiently in an easily extensible, modifiable, and searchable way. using html templates makes it very easy to change the html structure, because this only needs to be done in one place, in a single template, and not across potentially thousands of static pages. anatomy of a dynamic request this section provides a step-by-step overview of the "dynamic" ht...
...tterns = [ # example: /best/ url(r'^$', views.index), # example: /best/junior/ url(r'^junior/$', views.junior), ] note: the first parameters in the url() functions may look a bit odd (e.g. r'^junior/$') because they use a pattern matching technique called "regular expressions" (regex, or re). you don't need to know how regular expressions work at this point, other than that they allow us to match patterns in the url (rather than the hard coded values above) and use them as parameters in our view functions. as an example, a really simple regex might say "match a single uppercase letter, followed by between 4 and 7 lower case letters." the web framework also makes it easy for a view function to fetch information from the database. the structure of our data is defined in models...

React interactivity: Events and state - Learn web development
in this article we'll do this, digging into events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
...> to spontaneously create its own props, but we can ask it to track some of its own data for us. data such as this, which a component itself owns, is called state. state is another powerful tool for react because components not only own state, but can update it later. it's not possible to update the props a component receives; only to read them. ...
... usestate() creates a piece of state for a component, and its only parameter determines the initial value of that state. it returns two things: the state, and a function that can be used to update the state later. this is a lot to take in at once, so let's try it out. ...
... tasks as state import usestate into app.js, so that we can store our tasks in state — update your react import line to the following: import react, { usestate } from "react"; we want to pass props.tasks into the usestate() hook – this will preserve its initial state. add the following right at the top of your app() function definition: const [...

Getting started with Svelte - Learn web development
, execute, and keep hanging around in memory. highly interactive pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive. onboarding people with basic web development knowledge: svelte has a shallow learning curve. web developers with basic html, css, and javascript knowledge can easily grasp svelte specifics in a short time and start building web applications. moreover, with the help of sapper (a framework based on svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. and then there's also svel...
...ng, code splitting, file-based routing and offline support. and then there's also svelte native, which lets you build native mobile applications. how does svelte work? being a compiler, svelte can extend html, css, and javascript, generating optimal javascript code without any runtime overhead. to achieve this, svelte extends vanilla web technologies in the following ways: it extends html by allowing javascript expressions in markup and providing directives to use conditions and loops, in a fashion similar to handlebars. it extends css by adding a scoping mechanism, allowing each component to define their own styles without the risk of clashing with other component's styles. it extends javascript by reinterpreting specific directives of the language to achieve true reactivity and ease co...
...an insert valid javascript expression inside single curly brackets ({}). in this case we are embedding the value of the name prop right after the hello text. <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively. the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase;...
...ithout cloning the git repo, you can use the degit tool like this — npx degit opensas/mdn-svelte-tutorial. you can also download a specific folder with npx degit opensas/mdn-svelte-tutorial/01-getting-started. degit won't create a local git repo, it will just download the files of the specified folder. using the svelte repl a repl (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a repl. svelte's repl is much more than that. it's an online tool that allows you to create complete apps, save them online, and share with others. it's the easiest way to start playing with svelte from any machine, without having to install anything. it is also widely used by svelte community. if you ...

Accessibility API cross-reference
level is expressed with the aria-level attribute. heading <h1> ... <h6> <h1> ... <h6>. <h> is also available but its use is not recommended because of lack of suitable tools - and the heading level is undefined click on this thing and then click on the item for tooltip style help helpballoon n/a n/a n/a editable field that allows user to assign a key combination hotkeyfield n/a n/a n/a graphic that indicates something, such as an arrow indicator n/a n/a n/a abstract role - a generic type of widget that allows user input. input n/a hypertext link that can be on image or text link n/a link <a...
...ntended for specifying search criteria. searchbox a renderable structural containment unit in a document or application. section (abstract role) <section> <sect> a structure that labels or summarizes the topic of its related section. sectionhead (abstract role) a form widget that allows the user to make selections from a set of choices. select (abstract role) a line that splits 2 areas from each other separator (either in menu or splits panes) separator (in menu only) separator separator <hr> adjust in increments from min to max values slider slider slider slider <input type=r...
... this is the default button or menu item default n/a n/a identifies the element that provides an error message for the object. n/a n/a aria-errormessage an item that has been expanded, such as a tree item or accordion expanded expanded expanded aria-expanded=true indicates this object allows progressive disclosure of its children. n/a expandable expandable implied by the presence of the aria-expanded attribute, regardless of value can extend selection extselectable n/a n/a not clipped to boundary of parent, does not auto-move with parent floating n/a n/a identifies the ne...
...very poor support in user agents and ats, and no sufficient techniques available n/a n/a aria-flowto indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. supported for anything that's not a menu i...

Gecko info for Windows accessibility vendors
t msaa) xul-based clients make full use of the gecko architecture, not only for html content, as well as for menus, dialogs and the entire user interface via an xml language called xul (extensible user-interface language). none of the user interface contains standard windows controls -- not even the menus! this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). firefox (please use version 1.1 alpha builds or later) thunderbird (please use version 1.1 alpha builds or later) mozilla seamonkey (please use 1.8 alpha builds or later) how to find the content window and load the document screen readers need to find the content window so that they know where to start grabbing the msaa tree, i...
... document for the default modality of the screen reader. if it is a role_application, role_dialog or role_alert then stay in focus tracking mode -- there is no need to parse the document. in addition, if it is a role_alert, a screen reader should treat it as a message box -- that is, to read the entire contents. these roles can occur on content because of the new accessible dhtml technology which allows the author to specify the type of document or container. once you know that you have a document, go up the ancestor chain of windows until you see a mozillacontentwindowclass or a mozillauiwindowclass. if it is a content window, you may use accessibleobjectfromwindow() to get the root iaccessible for the content, and begin traversing the tree from there. gecko also helps determine when to lo...
...the document, in response to user changes in the form controls themselves. both controlled_by and controller_for are set in markup from the single dynamic content accessibility dynamic content aaa:controls attribute. the inverse controlled_by relation is automatically calculated. the domenum { navrelation_flows_to = 0x1006 }; enum { navrelation_flows_from = 0x1007 }; these two relations allow the reading flow to break out of the normal dom flow. both flows_to and flows_from are set in markup from the single dynamic content accessibility aaa:flowsto relation -- the inverse flow_from relation is automatically calculated. these relations can affect the calculation for the next next or previous item of a certain type. here is an algorithm for iterating through the nodes, looking for a...
...upported dynamic content, where the page appearance changes because of javascript. this can be used to create the appearance of desktop-style widgets like menus, spreadsheets and tree views which html lacks. or, it can be used to completely change content on the fly, without loading a new page. previously it was not posible to make this accessible, but firefox 1.5 supports accessible dhtml, which allows authors to make advanced widgets and web applications accessible. mathml: an xml dialect used to display full math notation on web pages. we do not currently have plans to support msaa for mathml - we will likely suggest use of the external dom for this, because msaa simply does not have the right semantics in it to support mathematics. mathml support is currently built into firefox. svg : s...

Software accessibility: Where are we today?
swer to this problem, many small accessibility hardware and software vendors created products and software which helped people who could not perform one of the four basic tasks to use common computer applications. ...
...tware which helped people who could not perform one of the four basic tasks to use common computer applications. ...
...amples of these assistive devices and software include: screen reading software, which speaks text displayed on the screen using hardware or software text-to-speech, and which allows a blind person to use the keyboard to simulate mouse actions alternate input devices, which allow people with physical disabilities to use alternatives to a keyboard and mouse voice recognition software, which allows a person to simulate typing on a keyboard or selecting with a mouse by speaking into the computer screen magnification software, which allows a low-vision computer user to more easily read portions of the screen comprehension software, which allows a dyslexic or learning disabled computer user to see and hear text as it is manipulated on the computer screen in fact, the entire adaptive tech...
...s technology could be useful to mainstream users, on portable information appliances, or to access information when the eyes are busy elsewhere. magnification enlarges the screen's contents: for those with low vision, it may suffice to use a larger font, a built-in high contrast theme, or even just an an extra large screen. otherwise, screen magnification programs may be used, which allow zooming in to portions of the screen, while following the mouse or the current focus. screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high contrast, or green on blue for low contrast. the optacon provides access to printed words, graphics and on-screen information by means ...

Android-specific test suites
e.net/index.html and https://docs.gradle.org/2.14/userguide/checkstyle_plugin.html for more details. running android-checkstyle to run android-checkstyle, first build firefox for android with your changes; then run ./mach android checkstyle this will run the tests and report the results to stdout, as well as produce an html report. disabling one failing test in general, it's not sensible to allow java code that doesn't observe the existing coding style; in this respect, this job is equivalent to the eslint jobs that check the javascript coding style throughout the tree. however, the existing configuration can be tweaked and the set of files checked can be modified. contact information android-checkstyle is currently owned by :mcomella and :nalexander. file tickets in the firefox for and...
...heck the javascript coding style throughout the tree. however, the existing configuration can be tweaked and the set of files checked can be modified. contact information android-checkstyle is currently owned by :mcomella and :nalexander. file tickets in the firefox for android product in bugzilla. android-findbugs ensures that the code avoids common java coding errors. using this suite will allow the code to be analyzed to spot any design flaws or potential bugs. if an issue is found within the code, a warning will be identified and put into the correct category that the suite controls — this could be malicious, correctness, or just bad practice. see http://findbugs.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/findbugs_plugin.html for more details. running and...
...urceforge.net/index.html and https://docs.gradle.org/2.14/userguide/findbugs_plugin.html for more details. running android-findbugs to run android-findbugs, first build firefox for android with your changes; then run ./mach android findbugs this will run the tests and report the results to stdout, as well as produce an html report. disabling one failing test in general, it's not sensible to allow new java code to land that findbugs detects issues with. however, the existing configuration can be tweaked and the set of files checked can be modified. contact information android-checkstyle is currently owned by :mcomella and :nalexander. file tickets in the firefox for android product in bugzilla. android-lint ensure that the code avoids common android coding errors. lint is a code scann...
...or more details. running android-lint to run android-lint, first build firefox for android with your changes; then run ./mach android lint this will lint the code and report the results to stdout, as well as produce an html report. while developing, lint warnings should appear within android studio, although this is not infallible. disabling one failing test in general, it's not sensible to allow new java code to land that lint detects issues with. however, the existing configuration can be tweaked and some options can be modified. contact information android-lint is currently owned by :sebastian and :nalexander. file tickets in the firefox for android product in bugzilla. ...

Makefile - variables
iles to remove. garbage_dirs a "clean target" macro containing a list of directories to remove. global_deps a list of common dependencies (makefile.in, autoconf.mk) that will force rebuilding. libobjs have_dtrace sun microsystem's dynamic tracing environment is available. local_includes allow use of moz_objdir in .mozconfig with older gnu gcc on beos. module module_name no_dist_install inhibit generating and copying exports/install targets into $(moz_objdir)/dist/install. .ns_printing objs obj_suffix filename suffix to use when writing object file...
... 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 gnu_cc define...
... exports a list of exported headers and source files for external use. has_extra_exports pref_js_exports javascript preferences file to export[1]. sdk_headers makefile generation description no_makefile_rule [pending] inhibit makefile.in deps that would allow $obj/makefile to be generated. no_submakefile_rule [pending/redundant?] inhibit makefile generation within subdirectories. no_ variable description no_profile_guided_optimize inhibit pgo builds no_dist_install note: values will be appended to the export variable when present. ...
... l10n.mk and localization variable description en_us_binary_url server url from which wget will ftp binaries. l10nbasedir moz_chrome_multilocale a list of locale names to process moz_chrome_file_format both, file, jar, omni, symlink packager_no_libs hack to allow one makefile to include another without pulling in libs:: target definitions. stagedist local staging directory for localization and packaging. todo: xpcom/xpinstall variables: https://developer.mozilla.org/en/adding_xpcom_components_to_mozilla_build_system ...

Eclipse CDT
ination (using the bindings column to sort by key combination helps with this) and remove them, or else you need to make your binding very specific by setting the "when" field to "c/c++ editor" instead of the more general "editing text". opening files you can quickly open a file by name using cmd-shift-r/ctrl-shift-r. although eclipse doesn't do fuzzy matching when you type a file name, it does allow you to use wildcards. to quickly switch between a source file and its header file, use ctrl-tab. to quickly switch to a recently viewed document use cmd-f6/ctrl-f6. if you want to change this awkward key binding, the command you need to rebind is "next editor". to show a filterable list of open documents (similar to the way emacs gives you a list of open buffers), use cmd-e/ctrl-e. if you cli...
...erent tabs, select the tab of the file that you want to edit, then from the menu bar select "window > new editor". this will open another tab containing the same file. now simply drag that tab to position it beside, above, or below the original. changes you make in one editor will be immediately reflected in the other. note that the search, call hierarchy, and other tabs have a "pin" button that allows you to open multiple tabs of these type. this is useful if you want to keep your existing search results open, for example, and have a new search open in a separate tab rather than overriding the contents of the existing search tab. code assistance note: indexing, by its very nature, is specific to a given compiler configuration. be aware that when eclipse gives results for any of the actions ...
...o search.) when this happens it frequently causes knock-on errors for the files that include that header (directly or indirectly), since they too now have things missing. people who have their object directory outside their source directory need to take special note of this issue. when the object directory is inside the source directory (and not filtered out by a resource filter), then eclipse's "allow heuristic resolution of includes" option (enabled by default) will generally allow the included headers to be found when eclipse processes source files, that don't have any build output parser data. however, when the object directory is outside the source directory, eclipse doesn't know about it - or the headers it contains - unless the user takes extra steps to tell it. this is the reason that t...
...that have their object directory outside their source directory to explicitly add {objdir}/dist/include to the project's "cdt user setting entries". fixing eclipse bug 381601 would considerably reduce the impact of the "unresolved inclusion" issue. (update 2017-03-28: the option index all header variants has been added in version 8.3.0, as explained in a comment of the mentioned bug. this option allows to have multiple definitions for the same header file, which might fix this issue. update 2017-11-04 by jwatt: ticking the "index all header variants" option caused eclipse to blow through the 12 gb of ram i'd given it while indexing before it ran out of memory and crashed.) there are parser errors it is expected that eclipse will show parser errors even for a known-good copy of the mozilla so...

Eclipse CDT Manual Setup
file the resolvable include paths, preprocessor defines, and pre-include files that were passed to the compiler. note the requirements that this method of build option discovery imposes on us. first, eclipse needs build console output for a complete build, so that it can find compiler options for as many source files as possible. the build must be explicitly instructed to output information that allows the directory, where the compiler is being invoked from to be identified (i.e., 'make' must be instructed to output "entering directory..."/"leaving directory..." lines). finally, the build must not be parallelized, since that would result in the interleaving of build output from different directories (breaking resolution of relative paths by interleaving the "entering directory..."/"leaving dir...
...ating the compiler options that eclipse associates with each source file. (not using eclipse to invoke your real builds does lose you some minor benefits that eclipse has to offer, but these are worth sacrificing for much improved code assistance. see the building from eclipse section below if you're interested in what you lose. ...
...rce file. (not using eclipse to invoke your real builds does lose you some minor benefits that eclipse has to offer, but these are worth sacrificing for much improved code assistance. see the building from eclipse section below if you're interested in what you lose. ...
...ot debugging) "searching for binaries" action from constantly interrupting everything. if you will be using eclipse for debugging, select "c/c++ general > paths and symbols" and select the "output location" tab. you should now add the folder containing your firefox binary (note on mac this is inside the .app - so "{your-obj-dir}/dist/nightlydebug.app/contents/macos/" - and since the ui will only allow you to select to the 'dist' folder, you'll need to type the end of the path in manually). how you add this depends on whether your object directory is inside or outside your source tree. if inside, use the "add folder" button; if outside, use the "link folder" button and tick the "link to folder in the file system" checkbox. once you've added this folder, delete the existing output folder that wa...

Using the Browser API
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the html browser api is an extension of the html <iframe> element that allows web apps to implement browsers or browser-like applications. it was originally used in firefox os to implement browser applications before that project was cancelled; since firefox 47 it is available to desktop chrome code and used in places like the firefox devtools. it consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level ...
... listen for changes to the embedded content's state, interited by the htmliframeelement interface. note: an iframe enhanced by the browser api is commonly referred to as a "browser iframe". we'll be using this term throughout the current article, and other parts of the documentation. demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load web pages, stop loading, move forward and back in history, and zoom in and out of the page. to run the demo, the best approach is to clone the github repo locally (or just download it directly if you don't do github), open webide, open the repo as a packaged app, then run it either on a simulator or a real device if you have one. in any case, you should at least download th...
...src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want. we then set the browser iframe's src attribute to equal the value of the url bar, which causes the new url to be loaded in the iframe. finally, we call blur() on the url bar to stop focusing it, so the keyboard moves off the screen, allowing us to get our full screen view back. there's another event listener added later on in the code that listens for the mozbrowserlocationchange event. when this fires, we set the value inside the url bar input to be equal to the event object detail property — this is so that the url displayed continues to match the website being shown when the user navigates back and forth through the history.
...ted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(searchactive) { browser.clearmatch(); searchactive = false; prev.disabled = true; next.disabled = true; searchbar.value = ''; } } }); note that whenever one of the search-related methods is invoked, a mozbrowserfindchange event is fired to allow you to react to search changes in a more precise way if desired: //browser.addeventlistener('mozbrowserfindchange', function(e) { // can react to find changes if required //}) reporting errors we've got one more piece of code to mention from our source: browser.addeventlistener('mozbrowsererror', function (e) { console.log("loading error: " + e.detail); }); this simple listener logs an er...

Scroll-linked effects
the "snaptarget" div. if it is, then it triggers an animation to "snap" the scroll position to the top of the div. as this animation is driven by javascript on the browser's main thread, it can be interrupted by other javascript running in other tabs or other windows. therefore, the animation can end up looking janky and not as smooth as intended. instead, using the css snap-points property will allow the browser to run the animation asynchronously, providing a smooth visual effect to the user. <body style="height: 5000px"> <style> body, /* blink currently has bug that requires declaration on `body` */ html { scroll-snap-type: y proximity; } .snaptarget { scroll-snap-align: start; position: relative; top: 200px; height: 200px; background-co...
... background-color: green; } </style> <div class="snaptarget"></div> </body> this version can work smoothly in the browser even if there is slow-running javascript on the browser's main thread. other effects in many cases, scroll-linked effects can be reimplemented using css and made to run on the compositor thread. however, in some cases the current apis offered by the browser do not allow this. in all cases, however, firefox will display a warning to the developer console (starting in version 46) if it detects the presence of a scroll-linked effect on a page. pages that use scrolling effects without listening for scroll events in javascript will not get this warning. see the asynchronous scrolling in firefox blog post for some more examples of effects that can be implemented using...
...ffects that can be implemented using css to avoid jank. future improvements going forward, we would like to support more effects in the compositor. in order to do so, we need you (yes, you!) to tell us more about the kinds of scroll-linked effects you are trying to implement, so that we can find good ways to support them in the compositor. ...
... scroll customization: introduces a new api for content to dictate how a scroll delta is applied and consumed. as of this writing, mozilla does not plan to support this proposal, but it is included for completeness. ...

About NSPR
and thread notification facilities (condition variables) implemented by nspr. additionally, nspr provides synchronization methods more suited for use by java. the java-like facilities include monitor reentrancy, implicit and tightly bound notification capabilities with the ability to associate the synchronization objects dynamically. i/o nspr's i/o is a slightly augmented bsd sockets model that allows arbitrary layering. it was originally intended to export synchronous i/o methods only, relying on threads to provide the concurrency needed for complex applications. that method of operation is preferred though it is possible to configure the network i/o channels as non-blocking in the traditional sense. network addresses part of nspr deals with manipulation of network addresses. nspr defines ...
...ed for complex applications. that method of operation is preferred though it is possible to configure the network i/o channels as non-blocking in the traditional sense. network addresses part of nspr deals with manipulation of network addresses. nspr defines a network address object that is internet protocol (ip) centric. while the object is not declared as opaque, the api provides methods that allow and encourage clients to treat the addresses as polymorphic items. the goal in this area is to provide a migration path between ipv4 and ipv6. to that end it is possible to perform translations of ascii strings (dns names) into nspr's network address structures, with no regard to whether the addressing technology is ipv4 or ipv6. time timing facilities are available in two forms: interval timin...
...er. 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 timers is slightly less than six hours. calendar times are 64-bit signed numbers with units of microseconds. the epoch for calendar times is midnight, january 1, 1970, greenwich mean time. negati...
...e wrap-around issue, only half that namespace may be utilized. therefore, the minimal usable interval available from the timers is slightly less than six hours. calendar times are 64-bit signed numbers with units of microseconds. the epoch for calendar times is midnight, january 1, 1970, greenwich mean time. negative times extend to times before 1970, and positive numbers forward. use of 64 bits allows a representation of times approximately in the range of -30000 to the year 30000. there is a structural representation (i.e., exploded view), routines to acquire the current time from the host system, and convert them to and from the 64-bit and structural representation. additionally there are routines to convert to and from most well-known forms of ascii into the 64-bit nspr representation. me...

Introduction to NSPR
nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
... nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
... a condition that signals changes in the state of the associated data. other threads may notify the condition when changes occur. condition variables are always monitored. the relevant operations on conditions are always performed from within the monitor. they are used to communicate changes in the state of the monitored data (though still preserving the monitored invariant). condition variables allow one or more threads to wait for a predetermined condition to exist, and they allow another thread to notify them when the condition occurs. condition variables themselves do not carry the semantics of the state change, but simply provide a mechanism for indicating that something has changed. it is the programmer's responsibility to associate a condition with the state of the data. a thread may b...
...rupt, causing a waiting thread to resume. in such cases the return from the wait operation indicates a failure and definitively indicates that the cause of the failure is an interrupt. a call to pr_waitcondvar may also resume because the interval specified on the wait call has expired. however, this fact cannot be unambiguously delivered, so no attempt is made to do so. if the logic of a program allows for timing of waits on conditions, then the clock must be treated as part of the monitored data and the amount of time elapsed re-asserted when the call returns. philosophically, timeouts should be treated as explicit notifications, and therefore require the testing of the monitored data upon resumption. nspr sample code the documents linked here present two sample programs, including detailed...

NSS_3.12.3_release_notes.html
ironment_variables environment variable value type description nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 hash algorithms inside signatures. this was allowed by default before nss 3.12.3. nss_hash_alg_support string specifies algorithms allowed to be used in certain applications, such as in signatures on certificates and crls. see do...
...n (any non-empty value to enable) tells nss to send ec key points across the pkcs#11 interface in the non-standard unencoded format that was used by default before nss 3.12.3. the new key point format is a der encoded asn.1 octet string. nss_use_shexp_in_cert_name boolean (any non-empty value to enable) tells nss to allow shell-style wildcard patterns in certificates to match ssl server host names. this behavior was the default before nss 3.12.3. the new behavior conforms to rfc 2818. new korean seed cipher: new macros for seed support: in blapit.h: nss_seed nss_seed_cbc seed_block_size seed_key_length ...
... stops after first update bug 380784: pk11mode in non fips mode failed. bug 394077: libpkix need to return revocation status of a cert bug 412468: modify certutil bug 417092: modify pkix_certselector api to return an error if cert was rejected. ...
...are separated by '+' bug 477186: infinite loop in cert_getcertchainfromcert bug 477777: selfserv crashed in client/server tests. bug 478171: consolidate the coreconf/xxx.mk files for windows bug 478563: add _msc_ver (the cl version) to coreconf. bug 478724: nss build fails on windows since 20090213.1 nightly build. ...

Bytecode Descriptions
ot give us. format: jof_ic other expressions globalthis stack: ⇒ this push the global this value. not to be confused with the globalthis property on the global. this must be used only in scopes where this refers to the global this. newtarget stack: ⇒ new.target push the value of new.target. the result is a constructor or undefined. this must be used only in scripts where new.target is allowed: non-arrow function scripts and other scripts that have a non-arrow function script on the scope chain. implements: getnewtarget. dynamicimport stack: moduleid ⇒ promise dynamic import of the module specified by the string value on the top of the stack. implements: import calls. importmeta stack: ⇒ import.meta push the import.meta object. this must be used only in module code. obje...
..._function ("x[symbol.iterator] is not a function"). the argc operand must be 0 for this variation. jsop::funapply hints to the vm that this is likely a call to the builtin method function.prototype.apply, an easy optimization target. jsop::funcall similarly hints to the vm that the callee is likely function.prototype.call. jsop::callignoresrv hints to the vm that the return value is ignored. this allows alternate faster implementations to be used that avoid unnecesary allocations. implements: evaluatecall steps 4, 5, and 7. format: jof_argc, jof_invoke, jof_typeset, jof_ic spreadcall stack: callee, this, args ⇒ rval like jsop::call, but the arguments are provided in an array rather than a span of stack slots. used to implement spread-call syntax: f(...args). args must be an array object co...
...percall operands: (uint16_t argc) stack: callee, isconstructing, args[0], ..., args[argc-1], newtarget ⇒ rval invoke callee as a constructor with args and newtarget, and push the return value. throw a typeerror if callee isn't a constructor. isconstructing must be the value pushed by jsop::isconstructing. jsop::supercall behaves exactly like jsop::new, but is used for supercall expressions, to allow jits to distinguish them from new expressions. implements: evaluateconstruct steps 7 and 8. format: jof_argc, jof_invoke, jof_construct, jof_typeset, jof_ic spreadnew, spreadsupercall stack: callee, isconstructing, args, newtarget ⇒ rval spread-call variant of jsop::new. invokes callee as a constructor with args and newtarget, and pushes the return value onto the stack. isconstructing must b...
...tarts unwinding the stack. implements: throwstatement evaluation, step 3. this is also used in for-of loops. if the body of the loop throws an exception, we catch it, close the iterator, then use jsop::throw to rethrow. throwmsg operands: (throwmsgkind msgnumber) create and throw an error object. sometimes we know at emit time that an operation always throws. for example, delete super.prop; is allowed in methods, but always throws a referenceerror. msgnumber must be one of the error codes listed in js/src/js.msg; it determines the .message and [[prototype]] of the new error object. the number of arguments in the error message must be 0. throwsetconst operands: (uint32_t nameindex) throws a runtime typeerror for invalid assignment to a const binding. format: jof_atom, jof_name try opera...

JSAPI reference
umber js_reporterrorflagsandnumberuc js_reporterrornumberucarray added in spidermonkey 24 js_reportoutofmemory js_reportallocationoverflow added in spidermonkey 1.8 js_geterrorreporter js_seterrorreporterobsolete since jsapi 52 js_errorfromexception js_geterrorprototype jsreport_is_exception jsreport_is_strict jsreport_is_warning jsreport_is_strict_mode_error the following functions allow c/c++ functions to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpendingexception js_setpendingexception js_clearpendingexception js_throwstopiteration added in spidermonkey 1.8 js_isstopiteration added in spidermonkey 31 typedef jsexceptionstate js_saveexceptionstate js_restoreexceptionstate js_dropexceptionstate the...
... since jsapi 32 a function that behaves like typeof: js_gettypename obsolete since jsapi 34 and functions that behave like the equality operators: js_strictlyequal js_looselyequal js_samevalue memory management these functions act like the standard c malloc family of functions, except that errors are reported using the spidermonkey error apis rather than errno. these functions also allow spidermonkey to account the number of bytes allocated: js_malloc js_free js_realloc js_strdup struct jsfreeop added in spidermonkey 17 js_freeop added in spidermonkey 17 js_getdefaultfreeop added in spidermonkey 17 javascript objects, strings, and floating-point numbers are garbage collected. these functions provide access to the garbage collector: js_gc js_maybegc js_getgcparamet...
..."define" is a lower-level version of "set" that provides access to extra settings and does not call setters. similarly, "lookup" is a lower-level version of "get" that offers extra options and does not call getters. struct jspropertydescriptor added in spidermonkey 1.8 property attributes jsprop_enumerate...
...rator obsolete since jsapi 36 js_nextproperty obsolete since jsapi 36 js_setpropertyattributes obsolete since jsapi 26 js_setucpropertyattributes obsolete since jsapi 26 the following functions behave like js_getproperty and js_getpropertybyid except when operating on e4x xml objects. js_getmethod obsolete since jsapi 23 js_getmethodbyid obsolete since jsapi 23 a spidermonkey extension allows a native function to return an lvalue—that is, a reference to a property of an object: js_setcallreturnvalue2 obsolete since javascript 1.8.5 id a jsid is an identifier for a property or method of an object. struct jsid js_idtovalue js_idtoprotokey added in spidermonkey 31 js_valuetoid js_stringtoid added in spidermonkey 38 js_indextoid added in spidermonkey 17 js_charstoid adde...

Querying Places
use nsinavhistoryservice.getnewquery() and nsinavhistoryservice.getnewqueryoptions() to retrieve empty objects. ...
...all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none. let options = placesutils.history.getnewqueryoptions(); // no query parameters will return everything let query = placesutils.history.getnewquery(); // execute the query let result = placesutils.history.executequery(query, options); result types nsinavhistoryqueryoptions has a resulttype property that allows configuration of the grouping and level of detail to be returned in the results. the different values for this property are listed below. these values are also properties of nsinavhistoryqueryoptions, and are accessed like this: components.interfaces.nsinavhistoryqueryoptions.results_as_visit. results_as_uri: this is the default, and returns one result node of type result_type_uri for each ur...
...ory = 0 const unsigned short query_type_bookmarks = 1 const unsigned short query_type_unified = 2 (not yet implemented -- see bug 378798) attribute unsigned short querytype complex queries you can pass one or more nsinavhistoryquery objects to executequeries(). within one query object, all parameters are anded together. the conditions for different query objects are then ored together. this allows for a simpler implementation and interface than a full logical operation with nested clauses while still being expressive. example of querying for any pages i've visited that contain the word "firefox" in the title/url or that i've visited today from mozilla.org. // first query object searches for "firefox" in title/url var query1 = placesutils.history.getnewquery(); query1.searchterms = "fire...
...sinavhistoryvisitresultnode, contains information about how the user navigated to this page. note: currently unimplemented, see bug 320831. nsinavhistorycontainerresultnode: general container node giving access to its children. derived from nsinavhistoryresultnode. bookmark folders are of this type. nsinavhistoryqueryresultnode: a type of container representing a query of the history system. it allows you to get the query options and parameters. example of detecting the type of a node switch(node.type) { case node.result_type_uri: dump("uri result " + node.uri + "\n"); break; case node.result_type_visit: var visit = node.queryinterface(ci.nsinavhistoryvisitresultnode); dump("visit result " + node.uri + " session = " + visit.sessionid + "\n"); break; case node.resu...

Avoiding leaks in JavaScript XPCOM components
ave nondeterministically or crash. with this strategy, a single pointer to the object is considered the "owner" of the object and the object is deleted through that pointer. it's difficult to use this strategy when there are multiple pointers to a given object and it's uncertain which one will need to last the longest. reference counting reference counting is a simple solution to the problem of allowing multiple owners to influence the lifetime of an object. in this strategy, the object has a member that is the number of other objects that "own" it. when this count goes to zero, the object destroys itself. this is the strategy used by xpcom, partly because it can be used through a very simple api, addref and release. in c++, we use nscomptr to help manage ownership, and we use macros to impl...
...ory management models. javascript uses garbage collection. 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 t...
...ite 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 convention that dom nodes can have ar...
...hose properties can be freed until the document is no longer displayed. you might think that it's unusual to set arbitrary properties on dom nodes. and in many cases it is. but in one important case it's not: xbl. xbl fields are implemented as javascript properties on the bound element's wrapper, so they have all the hazards of javascript properties. (on wrapped objects other that dom nodes, we allow javascript programmers to set properties, but we don't do anything to protect them from garbage collection. this makes program behavior depend on when garbage collection happens, which means the api is nondeterministic, which is really bad. this situation may improve at some point in the future. the situation with javascript properties on dom nodes may also improve—see bug 283129—but it requi...

Finishing the Component
e weblock class to implement the nsicontentpolicy interface. the weblock class will then support four interfaces: nsisupports, nsiobserver, nsicontentpolicy, and iweblock. weblock interfaces interface name defined by status summary nsisupports xpcom frozen provides interface discovery, and object reference counting nsiobserver xpcom frozen allows messaging passing between objects nsicontentpolicy content not frozen interface for policy control mechanism iweblock web lock not frozen enables and disables weblock. also, provides access to the url that are whitelisted. implementing the nsicontentpolicy interface to implement the new interface, you must #include the unfrozen nsicontentpolicy, and yo...
...scheme isn't "http", "https", or "ftp", it immediately returns true, which continues the loading process unblocked. these three are the only kinds of uri that weblock will try to block. when it has one, it walks the linked list and creates a new nsiuri object for each string url in the list. from each object, shouldload() extracts the host and compares it to the uri. if they match, the component allows the load to continue by returning true. if these two strings do not match, then the component returns return false and blocks the load. uri caching caching the uri would make this method implementation much faster by avoiding the need to create and destroy so many objects. this points out an important drawback of xpcom, which is that you cannot create an object on the stack. creating this ma...
...re; nsembedcstring scheme; contentlocation->getscheme(scheme); if (strcmp("http", scheme.get()) != 0 && strcmp("https", scheme.get()) != 0 && strcmp("ftp", scheme.get()) != 0) { // this isn't a type of uri that we deal with *_retval = pr_true; return ns_ok; } nsembedcstring hosttoload; contentlocation->gethost(hosttoload); // assume failure. do not allow this nsiuri to load. *_retval = pr_false; nsresult rv; nscomptr<nsiservicemanager> servman; rv = ns_getservicemanager(getter_addrefs(servman)); if (ns_failed(rv)) return rv; nscomptr<nsiioservice> mioservice; // get a pointer to the ioservice rv = servman->getservicebycontractid("@mozilla.org/network/io-service;1", ns_get_iid(nsiioserv...
...h = pr_false; while (node) { nscomptr<nsiuri> uri; nsembedcstring urlstring(node->urlstring); rv = mioservice->newuri(urlstring, nsnull, nsnull, getter_addrefs(uri)); // if anything bad happens, just abort if (ns_failed(rv)) return rv; nsembedcstring host; uri->gethost(host); if (strcmp(hosttoload.get(), host.get()) == 0) { // match found. allow this nsiuri to load *_retval = pr_true; return ns_ok; } node = node->next; } return ns_ok; } at this point, all of the backend work is complete. you can of course improve this backend in many ways, but this example presents the basic creation of what is commonly referred to as a "browser helper object" like weblock. the next chapter looks at how to tie this into the fron...

nsIContentSecurityPolicy
calls to this may trigger violation reports when queried, so this value should not be cached. read only. isi...
...calls to this may trigger violation reports when queried, so this value should not be cached. read only. isinitialized boolean set to true when the ...
...calls to this may trigger violation reports when queried, so this value should not be cached. read only. ...
...calls to this may trigger violation reports when queried, so this value should not be cached. read only. isinitialized boolean set to true when the content security policy has been read in and parsed and is ready to enforce. ...

nsIEffectiveTLDService
uri is empty. ns_error_insufficient_domain_levels this exception is thrown if there were insufficient subdomain levels in the hostname to satisfy the requested aadditionalparts value. ns_error_host_is_ip_address this exception is thrown if auri is a numeric ipv4 or ipv6 address. ns_error_unexpected or other error returned by nsiidnservice.normalize() when the hostname contains characters disallowed in uris. getbasedomainfromhost() returns the base domain of a host string. otherwise identical to getbasedomain(). note: it is strongly recommended that you use getbasedomain() if a suitable nsiuri is available. only use this method if this is not the case. acstring getbasedomainfromhost( in autf8string ahost, in pruint32 aadditionalparts optional ); parameters ahost the host st...
...parts to be returned in addition to the public suffix. return value an acstring containing the base domain (public suffix plus the requested number of additional parts). exceptions thrown ns_error_invalid_arg this exception is thrown if ahost is empty. ns_error_unexpected this exception originates in the normalize() method in nsiidnservice and is thrown when ahost contains characters disallowed in uris. ns_error_insufficient_domain_levels this exception is thrown if there were insufficient subdomain levels in the hostname to satisfy the requested aadditionalparts value. ns_error_host_is_ip_address this exception is thrown if ahost is a numeric ipv4 or ipv6 address. remarks note: prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), this method worked if you passed ...
... the uri to be analyzed. return value an acstring containing the public suffix. exceptions thrown ns_error_invalid_arg this exception is thrown if the hostname in auri is empty. ns_error_host_is_ip_address this exception is thrown if auri is a numeric ipv4 or ipv6 address. ns_error_unexpected or other error returned by nsiidnservice.normalize() when the hostname contains characters disallowed in uris. getpublicsuffixfromhost() returns the public suffix of a host string. otherwise identical to getpublicsuffix(). note: it is strongly recommended to use getbasedomain() if a suitable nsiuri is available. only use this method if this is not the case. acstring getpublicsuffixfromhost( in autf8string ahost ); parameters ahost the host string to be analyzed. return value an ...
...acstring getpublicsuffixfromhost( in autf8string ahost ); parameters ahost the host string to be analyzed. return value an acstring containing the public suffix. exceptions thrown ns_error_invalid_arg this exception is thrown if ahost is empty. ns_error_unexpected this exception originates in the normalize() method in nsiidnservice and is thrown when ahost contains characters disallowed in uris. ns_error_host_is_ip_address this exception is thrown if ahost is a numeric ipv4 or ipv6 address. remarks all returned strings are encoded in ascii/ace and normalized according to rfc 3454. ...

nsIFrameScriptLoader
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisupports this interface is used to load frame scripts. methods void loadframescript(in astring aurl, in boolean aallowdelayedload, [optional] in boolean aruninglobalscope) void removedelayedframescript(in astring aurl); jsval getdelayedframescripts(); loadframescript() load a script in the remote frame. frame scripts are loaded as soon as loadframescript() is called. if this function is called on a chromemessagebroadcaster (for example, a global frame message manager or a window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame...
...oon as loadframescript() is called. if this function is called on a chromemessagebroadcaster (for example, a global frame message manager or a window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame in the given window for the window message manager, or every frame in every window for the global message manager if aallowdelayedload is true, then the script will also be loaded into any applicable new frames opened after the loadframescript() call. otherwise it will only be loaded into frames that exist at the time of the call. if this function is called on a chromemessagesender: it will load the frame script only into this chromemessagesender's frame aallowdelayedload should always be true. it's possible tha...
... don't get reloaded when the user navigates. if you want a frame script to do something whenever a new document is loaded, you can listen for the document-element-inserted notification. parameters name type description aurl string url for the script to load. aurl must be the absolute url. data: urls are also supported. for example data:,dump("foo\n"); aallowdelayedload boolean if true, this flag means that the frame script will be loaded into any new frames opened after the loadframescript() call, until removedelayedframescript() is called for that script. aruninglobalscope boolean optional, defaults to false. by default, frame scripts each have their own scope, so they can declare global variables without causing confl...
...lare global variables without causing conflicts with any other frame scripts. if present and set to true, this flag switches off that behavior, meaning that the script's scope is shared with any other frame scripts in the same frame that have also set the flag. removedelayedframescript() removes aurl from the list of scripts which support delayed load. this cancels the effect of the aallowdelayedload flag, meaning that the loader will no longer load the script into new frames. if you used aallowdelayedload, you should call this as part of your cleanup (for example, when your add-on is disabled or uninstalled). parameters name type description aurl string url for the script to remove. getdelayedframescripts() returns all delayed scripts that w...

nsISelection2
uced gecko 1.8 obsolete gecko 8.0 inherits from: nsiselection last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) in gecko 8.0 this interface was merged into the nsiselectionprivate interface. ...
...read only. methods getrangesforinterval() retur...
...ute type description type short returns the type of the selection (see nsiselectioncontroller for available constants). read only. methods getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. resultcount returns th...
... input range rather than merely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalcomarray void getrangesforintervalcomarray( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. results returns the ranges that overlap (or touch) the input range. scrollintoview() sc...

nsIXPConnect
currentnativecallcontext nsaxpcnativecallcontextptr read only. deferreleasesuntilaftergarbagecollection prbool ...
... same as wrapnative(), but also returns the jsobject in aval. c++ callers can pass in null for the aholder argument, but in that case they must ensure that aval is rooted. aiid may be null, it means the same as passing in &ns_get_iid(nsisupports) but when passing in null certain shortcuts can be taken because we know without comparing iids that the caller is asking for an nsisupports wrapper. if aallowwrapper, then the returned value will be wrapped in the proper type of security wrapper on top of the xpcwrappednative (if needed). this method doesn't push ajscontext on the context stack, so the caller is required to push it if the top of the context stack is not equal to ajscontext. void wrapnativetojsval( in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in ns...
...oper type of security wrapper on top of the xpcwrappednative (if needed). this method doesn't push ajscontext on the context stack, so the caller is required to push it if the top of the context stack is not equal to ajscontext. ...
...tivetojsval( in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in nswrappercacheptr acache, in nsiidptr aiid, in boolean aallowwrapper, out jsval aval, out nsixpconnectjsobjectholder aholder ); parameters ajscontext missing description ascope missing description acomobj missing description acache missing description aiid missing description aallowwrapper missing description aval missing description aholder missing description ...

nsIXULTemplateBuilder
tribute on the root node is used to identify the source of data to be used. the ref attribute is used to specify the reference point for the query. the <queryset> element contains a single query and one or more <rule> elements. ...
...e query is needed -- in that case the <query> and <rule>s are allowed to be children of the <template> node. the contents of the query are processed by a separate component called a query processor. this query processor is expected to use this query to generate results when asked by the template builder. the template builder then generates output for each result based on the <rule> elements. this allows the query processor to be specific to a particular kind of input data or query syntax, while the template builder remains independent of the kind of data being used. due to this, the query processor will be supplied with the datasource and query which the template builder handles in an opaque way, while the query processor handles these more specifically. results implement the nsixultemplateresu...
...y. results implement the nsixultemplateresult interface and may be identified by an id which must be unique within a given set of query results. each query may be accompanied by one or more <rule> elements. these rules are evaluated by the template builder for each result produced by the query. a rule consists of conditions that cause a rule to be either accepted or rejected. the condition syntax allows for common conditional handling; additional filtering may be applied by adding a custom filter to a rule with the builder's addrulefilter() method. if a result passes a rule's conditions, this is considered a match, and the content within the rule's <action> body is inserted as a sibling of the <template>, assuming the template builder creates real dom content. only one rule will match a result.
...ill typically be generated. the reference point nsixultemplateresult object for the first iteration is determined by calling the query processor's translateref() method using the value of the root node's ref attribute. this object may be retrieved later via the builder's rootresult property. for convenience, each reference point as well as all results implement the nsixultemplateresult interface, allowing the result objects from each iteration to be used directly as the reference points for the next iteration. when using multiple queries, each may generate results with the same id. more than one of these results may match one of the rules in their respective queries, however only the result for the earliest matching query in the template becomes the active match and generates output. the addres...

XPCOM
interfaces in xpcom are defined in a dialect of idl called xpidl. xpcom itself provides a set of core components and classes, e.g. file and memory management, threads, basic data structures (strings, arrays, variants), etc. the majority of xpcom components are not part of this core set and are provided by other parts of the platform (e.g. gecko or necko) or by an application or even by an extension. ...
...fic functionality, it is often useful to access the windows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in several mozilla products.aggregating the in-memory datasourcealready_addrefedalready_addrefed in association with nscomptr allows you to assign in a pointer without addrefing it.binary compatibilityif mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail. it is a possiblity that is introduced when upgrading to a new compiler without recompiling everything. effectively, it is a different platform.bundling multiple binary componentsbinary xpcom component...
...com newsgroup or another experienced nscomptr user, or find the answer by experimentation.using nsiclassinfoif you use a c++ class which implements nsiclassinfo from javascript, then you don't have to explicitly call queryinterface on the javascript object to access the object's interfaces.using nsidirectoryservicensdirectoryservice implements the nsiproperties interface. ...
...'binary' or 'native'.xpcom category image-sniffing-servicesin versions of firefox prior to firefox 3, extensions could add decoders for new image types. however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component developers and embedders can link against. it allows developers to link only against the frozen xpcom method symbols and maintain compatibility with multiple versions of xpcom.xpcom guidethese articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.xpcom ownership guidelines...naturally. if you create a temporary object, obvio...

Mail and RDF
you should learn about rdf before reading this document or you will be hopelessly confused. overview of mail rdf graph the root resource for all accounts, folders and messages is the rdf resource named msgaccounts:/. ...
...rver, and so forth. nsmsgmessagedatasource - answers queries about messages in folders. all rdf properties of a message currently come from the database that backs the containing folder. datasources and the ui mail does not link the ui to datasources in a "traditional" manner. instead of having a singleton datasource that is shared across all ui components, we have per-view datasources. this allows each template-based widget to maintain view/window-specific data with each datasource. for example...??? (sorting? what else do we store?) datasources are created when each window's javascript is loaded by declaring the datasource variables in the source javascript as global variables. in the document's onload= handler the datasources are attached to their respective widgets by setting the data...
...rvers update ui. an aside: rational behind the design after reviewing this design, it might seem unnecessary to have the double-levels of notification/registration. why can't folders directly notify the rdf content observers when things change? here is the rational behind this design: it keeps all rdf datasource-related code in one place and out of the messages and folders themselves. this allows the mail code to be mostly free of rdf. the actual dependancies on rdf are small, so it makes sense to keep rdf out of folders and messages. there should be a non-rdf mechanism for folder change notification. there are times (for example, from javascript/xul) where we want folder notifications that have nothing to do with rdf. requring these listeners to use rdf would be unnecessarily burdening...
...on. there are times (for example, from javascript/xul) where we want folder notifications that have nothing to do with rdf. requring these listeners to use rdf would be unnecessarily burdening them with an unnecessary api. the folders or the mail session would have to know about every rdf observer on each datasource. this means the folder would have to notify each of those observers. this design allows each datasource to manage its own observers, and lets each mail session manage a list of folder listeners without necessarily knowing that some of these listeners are rdf-related. please comment ! alec flett last modified: thu oct 7 11:33:42 pdt 1999 ...

DOM Inspector internals - Firefox Developer Tools
o the inspected document, and the other panel reacts to changes to the selection in the first panel. these are the document panel and the object panel, respectively. (internally, a panel may be loosely referred to as a "pane", but a panelset is always referred to as a "panelset".) a panel's purpose is to manage available viewers. at the top of each panel is a toolbar which contains a menu button allowing you to choose which viewer to display from the viewer list, a label displaying the name of the currently active viewer, and another menu button allowing you to issue viewer-specific commands. viewers are dynamically loaded; when the panel is made to switch from one viewer to another, the old viewer is destroyed, and the new viewer is loaded in its place. in this way, the panelset and panels f...
...d; when the panel is made to switch from one viewer to another, the old viewer is destroyed, and the new viewer is loaded in its place. in this way, the panelset and panels function like a frameset and frames. this comparison turns out to be quite apt, since each panel actually contains an anonymous browser, and individual viewers exist in separate documents loaded in the browser. this separation allows for viewers to be self-contained, with a viewer's xul defined in its own document and loaded in its own scope, without fear of collisions in the xul, css, or js. another convenient consequence of this is that if you use a properly set up development profile, then for the most part, the effects of development changes can be seen by simply switching away from the current viewer and back. knowing ...
...(above, seamonkey and firefox, respectively.) there are several overlays from the resources/contents/ directory that do not fall into the category of host-integration overlays. that's because dom inspector also uses shared overlays to build up its own ui. shared structure overlays taking a look at the contents of inspector...
... such as key- and commandsets, are not defined in inspector.xul. these are pulled in from a series of overlays, so that the xul defining dom inspector's ui can be organized into discrete units. inspector.xul itself is only a skeleton describing the basic structure and layout of the primary dom inspector window, leaving most of its contents to be added by the overlays. using modular overlays also allows for common xul to be shared across the various documents that make up the dom inspector's ui, although not all overlays are shared by multiple consumers. single-consumer overlays exist solely for organization. in some cases overlays are overlaid by other overlays. if we imagine a tree structure obtained by connecting overlays as children to the files they overlay, while ignoring any overlays ...

Set a breakpoint - Firefox Developer Tools
kpoint that can be set in the debugger; this article covers standard (unconditional) breakpoints and conditional breakpoints. breakpoints in brief breakpoints are very useful when debugging javascript — you basically set a point in your code where you would like execution of the code to pause. at this point you can do useful things like studying the value of different variables at that point, allowing you to work out why a problem is occurring. the source pane context menu in the source pane, you can handle setting breakpoints by bringing up the context menu over a line number. there are a few options available here: add breakpoint: add a standard unconditional breakpoint at this line number (see below). add condition: add a condition and create a conditional breakpoint (see below)...
...e line number for the line you want to break at in the source pane. highlighting the line you want to break at in the source pane and pressing ctrl + b (windows/linux) or cmd + b (macos). the line number is highlighted in blue: in addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it. these are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each relevant one. conditional breakpoints a conditional breakpoint is one where the code will pause execution when it is reached, only if a certain condition is met, such a variable having a certain value at the time. you can set a conditional breakpoint using the contex...
...g up the context menu over the line highlight and choose the remove breakpoint option. other context menu options worth mentioning are: disable breakpoint: turn it off, but don't remove it completely. disable breakpoints on line and remove breakpoints on line: remove or disable column breakpoints. if the breakpoint is an unconditional breakpoint, you'll get an option add condition, which allows you to turn it into a conditional breakpoint. if the breakpoint is a conditional breakpoint, you'll get an option edit condition, which allows you to change the previously set condition. inline variable preview new in firefox 71, the source pane now gives you an inline preview of the variables on each line of code you've stepped through: this is a very useful timesaver when stepping throu...
... useful timesaver when stepping through your code. previously you’d have to scroll through the scopes panel to find variable values, or hover over a variable in the source pane. now when execution pauses, you can view relevant variables immediately. note: there is also a new option in the context menu for the actual code in the source pane — hide inline preview/show inline preview — which allows you to turn the inline variables on/off. ...

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
note: the examples shown in the screenshots appearing in this article are jen simmons' futurismo and variations on a grid experiments, and a live named grid area example from rachel andrew. discovering css grids when an html element on your page has display: grid applied to it, a number of features are made available in the devtools to provide easy access to grid features. in the html pane in the html pane, elements laid out using a grid have a "grid" marker beside them. ...
...out view can be found underneath the layout tab on the right-hand pane of the page inspector. the above and below screenshots should give you further hints on how to get to this. grid options the grid section of the layout view looks like this: you'll see a number of options contained within: overlay grid: contains a checkbox for each grid present on the page, along with various options. allows overlay views to be toggled on and off. grid display settings: display line numbers: turn the line numbers shown for each grid overlay on and off (on by default). display area names: turn area names on and off, in the case of grids with named grid areas (on by default, where relevant). extend lines infinitely: by default, grid lines/tracks are only shown inside the element with disp...
... mini grid view: a smaller view of the currently overlaid grid. note: your grid preferences such as overlay color and display settings choices are persisted across page loads for each separate page. let's examine these features in more detail. ...
...this is useful for selecting different colors so you can easily tell your grids apart. inspecting a subgrid when the page contains a grid with a subgrid, the entry for the subgrid is indented under its parent in the overlay grid section. ...

AddressErrors - Web APIs
address could not be validated. the contents of the string provide a human-readable explanation of the validation failure, and ideally suggestions to correct the problem. usage notes keep in mind that some violation errors may be outside the ability of the user to fix. try to avoid asking the user to make corrections to things they can't change, and there may be situations in which you need to allow validation errors to be accepted anyway (for example, if you validate addresses against a postal service database and a new home has been built and its address is not yet in the database). examples snippet: limiting destination countries this first example is just a snippet showing an implementation of the event handler for the shippingaddresschange event which checks to be sure the chosen add...
... for a description of how this code works. complete example here we'll see a complete, working version of the example above (except of course that it's not connected to an actual payment handler, so no payments are actually processed). in the example, we're handling a donation to an organization that will be sending a "thank you" gift to the donor, so it requests shipping information along with allowing the donation payment itself. javascript payment request data first, we declare the variables supportedhandlers, which is compatible with paymentmethoddata, and defaultpaymentdetails, which is a paymentdetailsupdate object. let supportedhandlers = [ { supportedmethods: "basic-card", data: { supportednetworks: ["visa", "mastercard", "amex", "discover"], supportedtypes: ...
...e, that we want to ask for shipping information). after that, we set up the handler for the shippingaddresschange event so we can validate address information and call the request's show() method to start running the payment ui. handling address changes the handleaddresschange() method, called when shippingaddresschange events occur, is where we'll look to see if the country is one of those we allow as shipping destinations. function handleaddresschange(ev) { const validcountries = ["us", "ca", "gb", "jp", "cn", "mx"]; const genericaddresserror = "unable to ship to the given address. please check for any errors."; const invalidcountryerror = "at this time, we only ship to the united states, canada, great britain, japan, china, and germany."; let shippingaddress = ev.target.shippin...
...eset of the object's values taken from shippingaddresserrors, and, using "...defaultpaymentdetails" as the final entry in the object, the remeainder of the properties' values are taken from defaultpaymentdetails. the final step is to call the event's updatewith() method, passing along the updatedetails object. this lets the payment request api know to present the specified error or errors but to allow the user to keep trying to edit the address. setting up the donate now button this code creates a handler for the load event on the window which in turn adds the needed click event handler to the "donate now" button so that clicking it starts the payment process. window.addeventlistener("load", function(ev) { document.getelementbyid("pay").addeventlistener("click", process, false); }, false)...

AudioWorkletProcessor.process - Web APIs
r's corresponding audioworkletnode. in other words, every time a new block of audio is ready for your processor to manipulate, your process() function is invoked to do so. important: currently, audio data blocks are always 128 frames long—that is, they contain 128 32-bit floating-point samples for each of the inputs' channels. ...
...or each of the inputs' channels. however, plans are already in place to revise the specification to allow the size of the audio blocks to be changed depending on circumstances (for example, if the audio hardware or cpu utilization is more efficient with larger block sizes). therefore, you must always check the size of the sample array rather than assuming a particular size. this size may even be allowed to change over time, so you mustn't look at just the first block and assume the sample buffers will always be the same size. syntax var isactivelyprocessing = audioworkletprocessor.process(inputs, outputs, parameters); parameters inputs an array of inputs connected to the node, each item of which is, in turn, an array of channels. each channel is a float32array containing 128 samples...
... safe to shut down the node. the returned value lets your processor have influence over the lifetime policy of the audioworkletprocessor and the node that owns it. if the combination of the return value and the state of the node causes the browser to decide to stop the node, process() will not be called again. returning true forces the web audio api to keep the node alive, while returning false allows the browser to terminate the node if it is neither generating new audio data nor receiving data through its inputs that it is processing. the 3 most common types of audio node are: a source of output. an audioworkletprocessor implementing such a node should return true from the process method as long as it produces an output. the method should return false as soon as it's known that it will ...
... example, take the audiobuffersourcenode — the processor behind such a node should return true from the process method while the buffer is playing, and start returning false when the buffer playing has ended (there's no way to call play on the same audiobuffersourcenode again). a node that transforms its input. a processor implementing such a node should return false from the process method to allow the presence of active input nodes and references to the node to determine whether it can be garbage-collected. an example of a node with this behaviour is the gainnode. as soon as there are no inputs connected and references retained, gain can no longer be applied to anything, so it can be safely garbage-collected. a node that transforms its input, but has a so-called tail-time — this means t...

Background Tasks API - Web APIs
a good citizen of the web and help to prevent stalls in the execution of the event loop. in the past, there's been no way to do this reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers. window.requestidlecallback() makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag. if you stay within the limit given, you can make the user's experience much better. getting the most out of idle callbacks because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking ...
...ictable amount of time. for example, anything which might affect layout should be avoided. you should also avoid resolving or rejecting promises, since that would invoke the handler for that promise's resolution or rejection as soon as your callback returns. use timeouts when you need to, but only when you need to. using timeouts can ensure that your code runs in a timely manner, but it can also allow you to cause lag or animation stutters by mandating that the browser call you when there's not enough time left for you to run without disrupting performance. falling back to settimeout because the background tasks api is fairly new, your code may need to be able to work on browsers that don't yet support it. you can do so with a simple shim that uses settimeout() as a fallback option. this is...
... timeremaining: function() { return math.max(0, 50.0 - (date.now() - starttime)); } }); }, 1); }; window.cancelidlecallback = window.cancelidlecallback || function(id) { cleartimeout(id); }; managing the task queue next, let's look at the way we manage the tasks that need to be performed. we're going to do this by creating a fifo queue of tasks, which we'll run as time allows during the idle callback period. enqueueing tasks first, we need a function that enqueues tasks for future execution. that function, enqueuetask(), looks like this: function enqueuetask(taskhandler, taskdata) { tasklist.push({ handler: taskhandler, data: taskdata }); totaltaskcount++; if (!taskhandle) { taskhandle = requestidlecallback(runtaskqueue, { timeout: 1000 }); ...
...andler: taskhandler, data: taskdata }); totaltaskcount++; if (!taskhandle) { taskhandle = requestidlecallback(runtaskqueue, { timeout: 1000 }); } schedulestatusrefresh(); } enqueuetask() accepts as input two parameters: taskhandler is a function which will be called to handle the task. taskdata is an object which is passed into the task handler as an input parameter, to allow the task to receive custom data. to enqueue the task, we push an object onto the tasklist array; the object contains the taskhandler and taskdata values under the names handler and data, respectively, then increment totaltaskcount, which reflects the total number of tasks which have ever been enqueued (we don't decrement it when tasks are removed from the queue). next, we check to see if we al...

DisplayMediaStreamConstraints.video - Web APIs
a video track must always be included, a value of false results in a typeerror exception being thrown. more precise control over the format of the returned video track may be exercised by instead providing a mediatrackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream. syntax displaymediastreamconstraints.video = allowvideoflag; displaymediastreamconstraints.video = mediatrackconstraints; displaymediastreamconstraints = { video: allowvideoflag | mediatrackconstraints; } value the value may be either a boolean or a mediatrackconstraints object. if a boolean is specified, a value of true (the default) indicates that the stream returned by getdisplaymedia() should be in whatever format the user agent feels ...
...s specified as part of the displaymediastreamconstraints object's video property when using getdisplaymedia() to obtain a stream for screen sharing. cursor a constraindomstring which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. the value may be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor. always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared ...
...ea of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens. window the stream contains a single window ...
... the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens. window the stream contains a single window selected by the user for sharing. logicalsurface a constrainboolean value which may contain a single boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. these may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows. example specifications specification status ...

Introduction to the File and Directory Entries API - Web APIs
rectory entries api, see the reference landing page and its subpages. the specification is still being defined and is subject to change. overview the file and directory entries api includes both asynchronous and synchronous versions of the interfaces. the asynchronous api can be used in cases where you don't want an outstanding operation to block the ui. the synchronous api, on the other hand, allows for simpler programming model, but it must be used with webworkers. usefulness of the api the file and directory entries api is an important api for the following reasons: it lets apps have offline and storage features that involve large binary blobs. it can improve performance by letting an app pre-fetch assets in the background and cache locally. it lets users of your web app directly ...
...more efficient storage solution than a database. while firefox supports blob storage for indexeddb, chrome currently does not (chrome is still implementing support for blob storage in indexeddb). if you are targeting chrome for your app and you want to store blobs, the file and directory entries api and app cache are your only choices. however, appcache storage isn't locally mutable, and doesn't allow for fine-grained client-side management. in chrome, you can use the file and directory entries api with the quota management api, which lets you ask for more storage and manage your storage quota. sample use cases the following are just a few examples of how you can use the file and directory entries api: apps with persistent uploader when a file or directory is selected for upload, y...
...s user-generated or unique data. browsers impose storage quotas to prevent a web app from using up the entire disk, browsers might impose a quota for each app and allocate storage among web apps. how storage space is granted or allocated and how you can manage storage are idiosyncratic to the browser, so you need to check the respective documentation of the browser. google chrome, for example, allows temporary storage beyond the 5 mb required in the specifications and supports the quota management api. to learn more about the chrome-specific implementation, see managing html5 offline storage. the file and directory entries api has asynchronous and synchronous versions the file and directory entries api comes with asynchronous and synchronous versions. both versions of the api offer the sam...
......

In depth: Microtasks and the JavaScript runtime environment - Web APIs
would be handled by javascript was relatively low at that time. as time passed, of course, we know that computers have evolved into powerful multi-core systems, and javascript has become one of the most prolifically-used languages in the computing world. a vast number of the most popular applications are based at least in part on javascript code. to support this, it was necessary to find ways to allow for projects to escape the limitations of a single-threaded language. starting with the addition of timeouts and intervals as part of the web api (settimeout() and setinterval()), the javascript environment provided by web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth. to understand where queuemi...
...s and the context stack in this manner, many of the fundamentals of how a program operates can be managed, including local and global variables, function calls and returns, and so forth. a special note about recursive functions—that is, functions which call themselves, possibly over multiple levels of depth or recursion: each recursive call to the function creates a new execution context. this allows the javascript runtime to track the levels of recursion and the return of results through that recursion, but it also means that each time a function recurses, more memory is needed to create the new context. run, javascript, run to run javascript code, the runtime engine maintains a set of agents in which to execute javascript code. each agent is made up of a set of execution contexts, the ex...
...de, can cause the user to suffer a sluggish browser. when multiple programs and multiple code objects within those programs start to try to work at once, alongside a browser which also needs processor time—let alone time to render and draw the site and its own ui, handle user events, and so forth—everything becomes clogged up far too easily nowadays. ...
...however, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the results of any single request or task. ...

Key Values - Web APIs
k_key_iso_level5_lock (0xfe13) qt::key_altgr (0x01001103 qt::key_mode_switch (0x0100117e) "capslock" the caps lock key. toggles the capital character lock on and off for subsequent input. vk_capital (0x14) kvk_capslock (0x39) gdk_key_caps_lock (0xffe5) qt::key_capslock (0x01000024) keycode_caps_lock (115) "control" the control, ctrl, or ctl key. ...
...often handled in hardware so that events aren't generated for this key. ...
...the fnlock or f-lock (function lock) key.toggles the function key mode described by "fn" on and off. often handled in hardware so that events aren't generated for this key. "hyper" [4] the hyper key. gdk_key_hyper_l (0xffed) gdk_key_hyper_r (0xffee) qt::key_hyper_l (0x01000056) qt::key_hyper_r (0x01000057) "meta" [1] the meta key. allows issuing special command inputs. this is the windows logo key, or the command or ⌘ key on mac keyboards. vk_lwin (0x5b) vk_rwin (0x5c) kvk_command (0x37) kvk_rightcommand (0x36) gdk_key_meta_l (0xffe7) gdk_key_meta_r (0xffe8) qt::key_meta (0x01000022) keycode_meta_left (117) keycode_meta_right (118) "numlock" the numlock (number lock) key. toggles the...
...ws). vk_numlock (0x90) gdk_key_num_lock (0xff7f) qt::key_numlock (0x01000025) keycode_num_lock (143) "scrolllock" [2] the scroll lock key. toggles between scrolling and cursor movement modes. vk_scroll (0x91) gdk_key_scroll_lock (0xff14) qt::key_scrolllock (0x01000026) keycode_scroll_lock (116) "shift" the shift key. modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters. vk_shift (0x10) vk_lshift (0xa0) vk_rshift (0xa1) kvk_shift (0x38) kvk_rightshift (0x3c) gdk_key_shift_l (0xffe1) gdk_key_shift_r (0xffe2) qt::key_shift (0x01000020) keycode_shift_left (59) keycode_shift_right (60) "super" [4] the super key. ...

LockedFile - Web APIs
the position of the reading/writing pointer within the file. events handler lockedfile.oncomplete the complete event is triggered each time a read or write operation is successful. lockedfile.onabort the abort event is triggered each time the abort() method is called. lockedfile.onerror the error event is triggered each time something goes wrong. ...
...ed each time a read or write operation is successful. lockedfile.onabort the abort event is triggered each time the abort() method is called. lockedfile.onerror the error event is triggered each time something goes wrong. methods lockedfile.getmetadata() allows to retrieve the file metadata (size and date of the last modification). returns a filerequest. lockedfile.readasarraybuffer() allows to retrieve a part of the content of the file as an arraybuffer. returns a filerequest object. ...
...thod is called. lockedfile.onerror the error event is triggered each time something goes wrong. methods lockedfile.getmetadata() allows to retrieve the file metadata (size and date of the last modification). returns a filerequest. lockedfile.readasarraybuffer() allows to retrieve a part of the content of the file as an arraybuffer. returns a filerequest object. lockedfile.readastext() allows to retrieve a part of the content of the file as a string. returns a filerequest object. lockedfile.write() allows to write some data in the file starting at the location offset. returns a filerequest object. lockedfile.append() allows to write some data at the end of the file. returns a filerequest object. lockedfile.truncate() allows to truncate the file's content. returns a filerequest ...
... lockedfile.abort() makes the lockedfile inactive and cancels all ongoing operations. ...

Using the Permissions API - Web APIs
w3c permissions api, which provides a programmatic way to query the status of api permissions attributed to the current context. the trouble with asking for permission... let's face it, permissions on the web are a necessary evil, and they are not much fun to deal with as developers. historically, different apis handle their own permissions inconsistently — for example the notifications api allows for explicit checking of permission status and requesting permission, whereas the geolocation api doesn't (which causes problems if the user denied the initial permission request, as we'll see below). the permissions api provides the tools to allow developers to implement a better user experience as far as permissions are concerned. for example, it can query whether permission to use a particul...
...location and plot it out on a google map: you can run the example live, or view the source code on github. most of the code is simple and unremarkable — below we'll just be walking through the permissions api-related code, so check the code yourself if you want to study any of the other parts. accessing the permissions api the navigator.permissions property has been added to the browser to allow access to the global permissions object. this object will eventually include methods for querying, requesting, and revoking permissions, although currently it only contains permissions.query(); see below. querying permission state in our example, the permissions functionality is handled by one function — handlepermission(). this starts off by querying the permission status using permissions.q...
... has been disabled by default starting in firefox 51, since its design has been brought into question in the web applications security working group. it can be re-enabled by setting the preference dom.permissions.revoke.enable to true. responding to permission state changes you'll notice that there is an onchange event handler in the code above, attached to the permissionstatus object — this allows us to respond to any changes in the permission status for the api we are interested in. at the moment we are just reporting the change in state. conclusion and future work at the moment this doesn't offer much more than what we had already. if we choose to never share our location from the permission prompt (deny permission), then we can't get back to the permission prompt without using the br...
...amburger menu > settings > show advanced settings. in the privacy section, click content settings. in the resulting dialog, find the location section and select ask when a site tries to... . finally, click manage exceptions and remove the permissions you granted to the sites you are interested in. however, future additions to browser functionality should provide the request() method, which will allow us to programatically request permissions, any time we like. these should hopefully be available soon. ...

Push API - Web APIs
n subscribe to push notifications, using pushmanager.subscribe(). the resulting pushsubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data. the service worker will be started as necessary to handle incoming push messages, which are delivered to the serviceworkerglobalscope.onpush event handler. this allows apps to react to push messages being received, for example, by displaying a notification (using serviceworkerregistration.shownotification().) each subscription is unique to a service worker. the endpoint for the subscription is a unique capability url: knowledge of the endpoint is all that is necessary to send a message to your application. the endpoint url therefore needs to be kept secret, ...
...nd a message to your application. the endpoint url therefore needs to be kept secret, or other applications might be able to send push messages to your application. activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. different browsers have different schemes for handling this, there is currently no standard mechanism. ...
...this handles cases where a burst of push messages is received, and not all generate a visible notification. ...
...provides a way to receive notifications from third-party servers, as well as request urls for push notifications. this interface has replaced the functionality offered by the obsolete pushregistrationmanager interface. pushmessagedata provides access to push data sent by a server, and includes methods to manipulate the received data. pushsubscription provides a subcription's url endpoint, and allows unsubscription from a push service. service worker additions the following additions to the service worker api have been specified in the push api spec to provide an entry point for using push messages. they also monitor and respond to push and subscription change events. serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push su...

RTCConfiguration - Web APIs
the options include ice server and transport settings and identity information. ...
...; once the certificates have been set, this property is ignored in future calls to rtcpeerconnection.setconfiguration(). icecandidatepoolsize optional an unsigned 16-bit integer value which specifies the size of the prefetched ice candidate pool. the default value is 0 (meaning no candidate prefetching will occur). you may find in some cases that connections can be established more quickly by allowing the ice agent to start fetching ice candidates before you start trying to connect, so that they're already available for inspection when rtcpeerconnection.setlocaldescription() is called. changing the size of the ice candidate pool may trigger the beginning of ice gathering. iceservers optional an array of rtciceserver objects, each describing one server which may be used by the ice agent...
...e ice agent; these are typically stun and/or turn servers. if this isn't specified, the connection attempt will be made with no stun or turn server available, which limits the connection to local peers. icetransportpolicy optional the current ice transport policy; this must be one of the values from the rtcicetransportpolicy enumeration. if the policy isn't specified, all is assumed by default, allowing all candidates to be considered. a value of relay limits the candidates to those relayed through another server, such as a stun or turn server. peeridentity optional a domstring which specifies the target peer identity for the rtcpeerconnection. if this value is set (it defaults to null), the rtcpeerconnection will not connect to a remote peer unless it can successfully authenticate with the...
... using certificates when you wish to provide your own certificates for use by an rtcpeerconnection instead of having the rtcpeerconnection generate them automatically, you do so through calls to rtcpeerconnection.generatecertificate(). this attribute supports providing multiple certificates because even though a given dtls connection uses only one certificate, providing multiple certificates allows support for multiple encryption algorithms. the implementation of rtcpeerconnection will choose which certificate to use based on the algorithms it and the remote peer support, as determined during dtls handshake. if you don't provide certificates, new ones are generated automatically. one obvious benefit to providing your own is identity key continuity—if you use the same certificate for sub...

SVGAngle - Web APIs
ith a grad unit. properties unittype the type of the value as specified by one of the svg_angletype_* constants defined on this interface. value the value as a floating point value, in user units. setting this attribute will cause valueinspecifiedunits and valueasstring to be updated automatically to reflect this setting. ...
... valueasstring the value as a domstring value, in the units expressed by unittype. setting this attribute will cause value, valueinspecifiedunits, and unittype to be updated automatically to reflect this setting. ...
...ly. valueasstring the value as a domstring value, in the units expressed by unittype. setting this attribute will cause value, valueinspecifiedunits, and unittype to be updated automatically to reflect this setting. exceptions on setting: a domexception with code syntax_err is raised if the assigned string cannot be parsed as a valid <angle>. a domexception with code no_modification_allowed_err is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. methods newvaluespecifiedunits reset the value as a number with an associated unittype, thereby replacing the values for all of the attributes on the object. exceptions: a domexception with code not_supported_err is raised if unittype is svg_angletype_unknown or not a valid u...
...uespecifiedunits reset the value as a number with an associated unittype, thereby replacing the values for all of the attributes on the object. exceptions: a domexception with code not_supported_err is raised if unittype is svg_angletype_unknown or not a valid unit type constant (one of the other svg_angletype_* constants defined on this interface). a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. converttospecifiedunits preserve the same underlying stored value, but reset the stored unit identifier to the given unittype. object attributes unittype, valueinspecifiedunits, and valueasstring might be modified as a result of this method. specifications specification s...

SVGLength - Web APIs
nsigned short the type of the value as specified by one of the svg_lengthtype_* constants defined on this interface. value float the value as a floating point value, in user units. setting this attribute will cause valueinspecifiedunits and valueasstring to be updated automatically to reflect this setting. exceptions on setting: a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. valueinspecifiedunits float the value as a floating point value, in the units expressed by unittype. setting this attribute will cause value and valueasstring to be updated automatically to reflect this setting. exceptions on setting: a domexception with code n...
...d when the length corresponds to a read only attribute or when the object itself is read only. valueinspecifiedunits float the value as a floating point value, in the units expressed by unittype. setting this attribute will cause value and valueasstring to be updated automatically to reflect this setting. exceptions on setting: a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. valueasstring domstring the value as a string value, in the units expressed by unittype. setting this attribute will cause value, valueinspecifiedunits, and unittype to be updated automatically to reflect this setting. exceptions on setting: a domexc...
...ring the value as a string value, in the units expressed by unittype. setting this attribute will cause value, valueinspecifiedunits, and unittype to be updated automatically to reflect this setting. exceptions on setting: a domexception with code syntax_err is raised if the assigned string cannot be parsed as a valid <length>. a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. methods name & arguments return description newvaluespecifiedunits(in unsigned short unittype, in float valueinspecifiedunits) void reset the value as a number with an associated unittype, thereby replacing the values for all of the a...
... reset the value as a number with an associated unittype, thereby replacing the values for all of the attributes on the object. exceptions: a domexception with code not_supported_err is raised if unittype is svg_lengthtype_unknown or not a valid unit type constant (one of the other svg_lengthtype_* constants defined on this interface). a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. converttospecifiedunits(in unsigned short unittype) void preserve the same underlying stored value, but reset the stored unit identifier to the given unittype. object attributes unittype, valueinspecifiedunits, and valueasstring might be modified as a result of this...

Storage Access API - Web APIs
the storage access api provides a way for embedded, cross-origin content to gain unrestricted access to storage that it would normally only have access to in a first-party context (we refer to this as an origin’s first-party storage). the api provides methods that allow embedded resources to check whether they currently have access to their first-party storage, and to request access to their first-party storage from the user agent. concepts and usage most browsers implement a number of storage access policies that restrict access to cookies and site data for embedded, cross-origin resources. these restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party co...
...to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the document.requeststorageaccess() method, and check whether it already has access via the document.hasstorageaccess() method. in addition, sandboxed <iframe>s cannot be granted storage access by default for security reasons. the api therefore also adds the allow-storage-access-by-user-activation sandbox token. the embedding website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ... </i...
...rface: document.hasstorageaccess() returns a promise that resolves with a boolean value indicating whether the document has access to its first-party storage. document.requeststorageaccess() returns a promise that resolves if the access to first-party storage was granted, and rejects if access was denied. ...
... specifications the api is currently only at the proposal stage — the standardization process has yet to begin. ...

Streams API concepts - Web APIs
some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know. readable streams a readable stream is a data source represented in javascript by a readablestream object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from. ...
... contain chunks of different sizes and types. the chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. an internal queue keeps track of the chunks that have not yet been read (see the internal queues and queuing strategies section below). the chunks inside the stream are read by a reader — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. the reader plus the other processing code that goes along with it is called a consumer. there is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished). only one reader can read a stream at a time; when a reader is crea...
...er before you do anything else (although you can tee streams, see the teeing section below) note that there are two different types of readable stream. as well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as byob, or “bring your own buffer”) sources. these allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the readablestream() constructor page). important: byte streams are not implemented anywhere as yet, and questions have been raised as to whether th...
... stream at one time. if you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it. an internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink. there is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished). you can make use of writable streams using the writablestream() constructor. these currently have very limited availability in browsers. pipe chains the streams api makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a pipe chain...

Streams API - Web APIs
concepts and usage streaming involves breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit. this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded. but this has never been available to javascript before. ...
...treams readablestream represents a readable stream of data. it can be used to handle response streams of the fetch api, or developer-defined streams (e.g. a custom readablestream() constructor). readablestreamdefaultreader represents a default reader that can be used to read stream data supplied from a network (e.g. a fetch request). readablestreamdefaultcontroller represents a controller allowing control of a readablestream's state and internal queue. default controllers are for streams that are not byte streams. writable streams writablestream provides a standard abstraction for writing streaming data to a destination, known as a sink. this object comes with built-in backpressure and queuing. writablestreamdefaultwriter represents a default writable stream writer that can be u...
... byte streams. writable streams writablestream provides a standard abstraction for writing streaming data to a destination, known as a sink. this object comes with built-in backpressure and queuing. writablestreamdefaultwriter represents a default writable stream writer that can be used to write chunks of data to a writable stream. writablestreamdefaultcontroller represents a controller allowing control of a writablestream's state. when constructing a writablestream, the underlying sink is given a corresponding writablestreamdefaultcontroller instance to manipulate. related stream apis and operations bytelengthqueuingstrategy provides a built-in byte length queuing strategy that can be used when constructing streams. countqueuingstrategy provides a built-in chunk counting queu...
...s yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. this may change over time. readablestreambyobreader represents a byob ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom readablestream() constructor). readablebytestreamcontroller represents a controller allowing control of a readablestream's state and internal queue. byte stream controllers are for byte streams. readablestreambyobrequest represents a pull into request in a readablebytestreamcontroller. examples we have created a directory of examples to go along with the streams api documentation — see mdn/dom-examples/streams. the examples are as follows: simple stream pump: this example sh...

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
y over the scene, or might use various angles to show perspective. for 3d gps solutions, the camera is positioned to show the area around the user, with the majority of the display showing the area ahead of the user's path of motion. when using webgl to accelerate 2d graphics drawing, the camera is typically placed directly above the center of the scene with the distance and field of view set to allow the entire scene to be presented. when accelerating bitmapped graphics, the renderer would draw the 2d image into a webgl texture's buffer, then redraw the texture to refresh the screen. this essentially uses the texture as a backbuffer for performing multiple buffering in your 2d graphics application. cameras in gaming there are many kinds of games, and as such, there are several ways in whi...
...e in meters to a plane parallel to the display surface closer than which nothing gets drawn. any vertices which lie on the same side of that plane as the camera are not drawn. conversely, the far clipping plane is the distance in meters to a plane beyond which no vertices are drawn. to zoom using a scaling factor or percentage, you can map 1x (100% of normal size) to the largest value of fov you allow (which leads to the most content being visible), then map your maximum magnification to the maximum value of fov you support and map corresponding values in between. if you start each frame's rendering pass by computing the perspective matrix, you can then multply into that matrix all the other transforms you need to apply in order to result in the frame's desired geometry. for example: const t...
...x, axisquat); mat4.multiply(viewmatrix, viewmatrix, rotatematrix); this converts the euler angles for pitch, yaw, and roll into a quaternion representing all three rotations. this is then converted into a rotation transform matrix; then, finally, the view matrix is multiplied by the rotation transform to complete the rotations. representing 3d with webxr webxr takes 3d graphics a step further, allowing them to be presented using special visual hardware such as goggles or a headset to create 3d graphics that appear to actually exist in three dimensions, potentially within the context of the real world (in the case of augmented reality). in order to perceive depth, it's necessary to have two perspectives on the scene. by comparing the two views, it's possible to recognize the depth of objects...
...ght differences between the two perspectives to figure out depth and distance. rendering the scene an xr—shorthand that encompasses both virtual reality (vr) and augmented reality (ar)—headset presents 3d imagery to us by drawing two views of the scene, slightly offset from one another just like the views obtained by our two eyes. these views are then separately fed to each eye, in order to allow them to collect the data our brain needs in order to construct a 3d image in our minds. to do this, webxr asks your renderer to draw the scene twice for each frame of video—once for each eye. the two views are rendered into the same framebuffer, one on the left and one on the right. the xr device then uses screens and lenses to present the left half of the produced image to our left eye and th...

Fundamentals of WebXR - Web APIs
fortunately, webgl and the various webgl-based frameworks and libraries are available to make it much easier to deal with all of that. how is webxr different from webvr? webvr was generally considered to be an experimental api designed to help specification writers determine the best approaches to creating an api for virtual reality on the web. as browser developers built support for webvr and allowed developers to experiment, it became clear that in order to finish an api for virtual environments on the web, it would make more sense to start a new specification than to try to "fix" webvr. thus, webxr was created. the most obvious difference, at the highest level, is that webxr supports not just virtual reality applications, but also augmented reality, which blends virtual objects with the ...
... the image on a screen. these devices include phones, which show the resulting scene on the device's screen in a 2d presentation, as well as goggles that use a pair of cameras, one for each eye, to capture the scene in stereo in order to retain the world's depth, with the webxr scene then rendered for each eye with that eye's captured background in place. devices which use transparent glasses to allow the user to see the world, while overlaying the rendered image atop the scene. the user is, thus, directly viewing the real world instead of a series of digital photos of it. both types of device should be capable of also presenting vr sessions. webxr doesn't generally care which type of device you're using, and the rendering process is almost exactly the same as for vr, except you don't erase ...
...goggles' lenses, either partially or completely blocking the physical environment from being seen through the obscured portion of the lens. caves a cave automated virtual environment (cave) is an immersive vr environment in which the scene is projected or otherwise displayed on the walls (as well as possibly the ceiling and/or floor), thus completely surrounding the user with the simulation and allowing them to be immersed in the scene. the user wears 3d glasses that both add the 3d effect to the projected image, but provide a means for the system to render foreground objects into the world. the user's activity may be monitored using motion sensors that are worn or held by the user, or, increasingly commonly, using infrared cameras that detect the user's movements. speakers placed around the...
...built atop webgl to make it more convenient to use. a particular benefit to using a framework rather than directly using the webgl api is that libraries tend to implement virtual camera functionality. opengl (and thus webgl by extension) does not directly offer a camera view, using a library that simulates one on your behalf can make your job much, much easier, especially when building code that allows free movement through your virtual world. since webgl is used for rendering the 3d world into the webxr session, you should first be familiar with webgl's general usage, and with the basics of 3d graphics in general. general-purpose 3d frameworks these frameworks are good for general-purpose programming as well as for game development when you want to do the logic yourself. they're designed f...

Rendering and the WebXR frame animation callback - Web APIs
nts of the affected display area simply don't change for that pass through the frame loop. for that reason, the occasional dropped frame isn't usually particularly noticeable, but if it starts to happen a lot—especially if several frames are dropped in a very short span of time—it can become jarring or even leave your display unusable. fortunately, you can easily compute how much time you're allowed to use between frames as 1/refreshrate seconds. that is, by dividing 1 by the display's refresh rate. the resulting value is the amount of time available for each frame to be rendered in order to not drop the frame. for example, a 60 hz display has 1/60th of a second to render a single frame, or 0.0166667 seconds. and if the device's refresh rate is 120 hz, you only have 0.00883333 seconds to r...
...he center of the space horizontally), we first need to render the scene from, say, [-0.032, 2.0, 0.0] (32mm to the left of center) and then render it again at [0.032, 2.0, 0.0]. (32mm right of center) this way, we place the positions of the viewer's eyes at an average human pupillary distance of 64mm. that distance (or whatever pupillary distance the xr system is configured to use) is enouigh to allow our minds to see just enough difference due to retinal disparity (the difference in what each retina sees) and the parallax effect to allow our brains to calculate the distance to and depth of objects, thus enabling us to percieve three dimensions despite our retinas only being 2d surfaces. this is illustrated in the diagram below, in which we see how each eye perceives a die located directly in...
... gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); mydrawsceneintoview(view, deltatime); } } } the mydrawframe() function grabs the xrsession from the xrframe object specified by the frame parameter, then calls the session's requestanimationframe() method to immediately schedule the rendering of the next frame. this ensures we get into the queue right away, allowing the rest of the time spent in this iteration of the mydrawframe() function to count toward the timing of drawing the next frame. we then get the xrviewerpose object that describes the viewer's pose—their position and orientation—using the frame's getviewerpose() method, passing in the viewer's reference space from the viewerrefspace previously obtained while setting up the webxr session. ...
...wmyobject() by changing things up in this way, we only bind programs, uniforms, buffers, textures, and potentially other things once per frame instead of twice for each object found in the scene. this reduces overhead by a potentially very large margin. limiting the frame rate if you need to intentionally cap your frame rate in order to establish a baseline frame rate to try to maintain while allowing more time for other code to run, you can do so by skipping frames intentionally, on a timed basis. for example, to reduce the frame rate by 50%, just skip every other frame: let tick = 0; function drawframe(time, frame) { animationframerequestid = frame.session.requestanimationframe(drawframe); if (!(tick % 2)) { /* draw the scene */ } tick++; } this version of the frame callb...

Example and tutorial: Simple synth keyboard - Web APIs
this example makes use of the following web api interfaces: audiocontext, oscillatornode, periodicwave, and gainnode. because oscillatornode is based on audioscheduledsourcenode, this is to some extent an example for that as well. the video keyboard html there are three primary components to the display for our virtual keyboard. the first is the musical keyboard itself. ...
...nd another to select what periodic waveform to use when generating notes. the volume control first we create the <div> to contain the settings bar, so it can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. <div class="settingsbar"> <div class="left"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default ...
... is set to reference the global audiocontext object (or webkitaudiocontext if necessary). osclist is set up to be ready to contain a list of all currently-playing oscillators. it starts off empty, since there are none playing yet. mastergainnode is set to null; during the setup process, it will be configured to contain a gainnode which all playing oscillators will connect to and play through to allow the overall volume to be controlled using a single slider control. let keyboard = document.queryselector(".keyboard"); let wavepicker = document.queryselector("select[name='waveform']"); let volumecontrol = document.queryselector("input[name='volume']"); references to elements we'll need access to are obtained: keyboard is the container element into which the keys will be placed. wavepick...
...event handler for these events. function notepressed(event) { if (event.buttons & 1) { let dataset = event.target.dataset; if (!dataset["pressed"]) { osclist[dataset["octave"][dataset["note"]]] = playtone(dataset["frequency"]); dataset["pressed"] = "yes"; } } } we start by checking whether the primary mouse button is pressed, for two reasons. first, we want to only allow the primary mouse button to trigger notes playing. second, and more importantly, we are using this to handle mouseover for cases where the user is dragging from note to note, and we only want to start playing the note if the mouse is pressed when it enters the element. if the mouse button is in fact down, we get the pressed key's dataset attribute; this makes it easy to access the custom data at...

Window.print() - Web APIs
romeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprintchrome full support 1notes full support 1notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 5opera full support 6notes full support 6notes notes starting with opera 33, this method is blocked inside a...
... 12firefox full support 1ie full support 5opera full support 6notes full support 6notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1.1webview android full support 1notes full support 1notes notes starting with webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support ...
...notes notes starting with webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support 18notes full support 18notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android no support nonotes no support nonotes notes see bug 1247609.opera android full support 10.1notes full support 10.1notes notes starting with opera 33, this method is blocked inside an <iframe> un...
...o support nonotes no support nonotes notes see bug 1247609.opera android full support 10.1notes full support 10.1notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari ios full support 1samsung internet android full support 1.0notes full support 1.0notes notes starting with samsung internet 5.0, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.legend ...

Window.prompt() - Web APIs
it does not display a pro...
...e user, and always returns undefined. it is not clear whether this is a bug or intended behavior. ...
...e an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1webview android full support 1notes full support 1notes notes starting with webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support 18notes full support 18notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android full support 4opera android full suppo...
...e> unless its sandbox attribute has the value allow-modals.firefox android full support 4opera android full support 10.1notes full support 10.1notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari ios full support 1samsung internet android full support 1.0notes full support 1.0notes notes starting with samsung internet 5.0, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.legend ...

Using XMLHttpRequest - Web APIs
/ /* console.log("ajaxsubmit - the form is now serialized. ...
...sole.log("the page '" + this.filepath + "' has been changed on " + (new date(nmodif)).tolocalestring() + "!"); }); if you want to know if the current page has changed, please read the article about document.lastmodified. cross-site xmlhttprequest modern browsers support cross-site requests by implementing the cross-origin resource sharing (cors) standard. as long as the server is configured to allow requests from your web application's origin, xmlhttprequest will work. otherwise, an invalid_access_err exception is thrown. bypassing the cache a cross-browser compatible approach to bypassing the cache is appending a timestamp to the url, being sure to include a "?" or "&" as appropriate. for example: http://foo.com/bar.html -> http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz...
....html?foobar=baz&12345 as the local cache is indexed by url, this causes every request to be unique, thereby bypassing the cache. you can automatically adjust urls using the following code: var oreq = new xmlhttprequest(); oreq.open("get", url + ((/\?/).test(url) ? "&" : "?") + (new date()).gettime()); oreq.send(null); security firefox 3 note versions of firefox prior to firefox 3 allowed you to set the preference capability.policy.<policyname>.xmlhttprequest.open</policyname> to allaccess to give specific sites cross-site access. this is no longer supported. firefox 5 note versions of firefox prior to firefox 5 could use netscape.security.privilegemanager.enableprivilege("universalbrowserread"); to request cross-site access. this is no longer supported, even though i...
.... this is no longer supported. firefox 5 note versions of firefox prior to firefox 5 could use netscape.security.privilegemanager.enableprivilege("universalbrowserread"); to request cross-site access. this is no longer supported, even though it produces no warning and permission dialog is still presented. the recommended way to enable cross-site scripting is to use the access-control-allow-origin http header in the response to the xmlhttprequest. xmlhttprequests being stopped if you conclude with an xmlhttprequest receiving status=0 and statustext=null, this means the request was not allowed to be performed. it was unsent. a likely cause for this is when the xmlhttprequest origin (at the creation of the xmlhttprequest) has changed when the xmlhttprequest is subsequently open(). t...

Cognitive accessibility - Accessibility
cluding structure and relationships conveyed through the presentation, should be available in a form that can be perceived by all users to achieve this goal. for example, the information could be spoken aloud via a narration tool. making your content capable of being understood by the software is a good way to help ensure it can be used by alternate presentational modes. time it is important to allow users the time they require to complete tasks. guideline 2.2 states "provide users enough time to read and use content." a time limit is any process that happens without user initiation after a set time or on a periodic basis, such as being logged out after 30 minutes or having 15 minutes to make a purchase. people with cognitive disabilities may require more time to read content, or to perform ...
...basis, such as being logged out after 30 minutes or having 15 minutes to make a purchase. people with cognitive disabilities may require more time to read content, or to perform functions such as filling out forms. solutions include providing users enough additional time to complete tasks or eliminate time constraints altogether. timers options for adjusting time requirements include: allowing the user to turn off or adjust the time to at least 10 times the original limit before encountering it. alerting the user and providing a buffer of at least 20 seconds to extend the timeout duration by a factor of 10 with a simple action, such as hitting the space bar. provide a toggle on content that allows users to enable a longer session time limit, or no session time limit at all. exam...
...ocus. don't alter or remove the browser's default :focus styling, unless you're making focus even more obvious. link text conveys meaning the link's text should clearly and concisely communicate what the user should expect to be navigated to next if they choose to activate it. poorly phrased link text may confuse users as to its purpose or destination. some forms of assistive technology allow users to navigate by lists of all the links present on the page. links will be removed from the context of their surrounding non-link content, making the need for understandable link text even more important. an example of a poor experience is a page full of links whose text reads, "click here." without indicating where "here" will take you, the link's purpose is unclear. for screen readers, it ...
...nts when the text is read aloud, or when key processes and ideas are illustrated visually. declare the language of the page and any content not in that main language. the language of every page must be declared by using the lang attribute on the <html> element. include the lang attribute again on text that is in a language other than the main language of the document. proper use of lang allows some screen readers to announce the text properly when converting it into synthetic speech. it also helps people who use text-to-speech software. define unusual words and word usage some disabilities make it difficult to understand nonliteral word usage, such as idioms, colloquialisms, and specialized jargon. non-native language speakers may also struggle with these terms. if a word or phrase ...

@font-feature-values - CSS: Cascading Style Sheets
activated differently in opentype. this can help simplify your css when using multiple fonts. the @font-feature-values at-rule may be used either at the top level of your css or inside any css conditional-group at-rule. syntax feature value blocks @swash specifies a feature name that will work with the swash() functional notation of font-variant-alternates. a swash feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @annotation specifies a feature name that will work with the annotation() functional notation of font-variant-alternates. an annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @ornaments specifies a feature name that will work with the ornaments() functional notation of font-variant-...
...2 4 isn't. @annotation specifies a feature name that will work with the annotation() functional notation of font-variant-alternates. an annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @ornaments specifies a feature name that will work with the ornaments() functional notation of font-variant-alternates. an ornaments feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @stylistic specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with the styleset() functional notation of font-variant-altern...
... ident2: 2 4 isn't. @stylistic specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with the styleset() functional notation of font-variant-alternates. a stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the opentype values ss02, ss04, ss12, and ss01. note that values higher than 99 are valid, but don't map to any opentype values and are ignored. ...
...finition allows an unlimited number of values: ident1: 2 4 12 1 maps to the opentype values ss02, ss04, ss12, and ss01. note that values higher than 99 are valid, but don't map to any opentype values and are ignored. @character-variant specifies a feature name that will work with the character-variant() functional notation of font-variant-alternates. a character-variant feature value definition allows either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid. formal syntax @font-feature-values <family-name># { <feature-value-block-list> }where <family-name> = <string> | <custom-ident>+<feature-value-block-list> = <feature-value-block>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-...

Overview of CSS Shapes - CSS: Cascading Style Sheets
ottom 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. ...
...it takes a variety of values, all of which define different shapes, specified in the <basic-shape> datatype. we can start by looking at a very simple case. in the following example i have an image floated left. i have then applied the shape-outside property to it with a value of circle(50%). ...
...n() and make the shape as complex as you want. in our guide to basic shapes we explore each of the possible basic shapes and how to create them. ...
...hange 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 will get no shape. in this next example, we have an image...

<time-percentage> - CSS: Cascading Style Sheets
the <time-percentage> css data type represents a value that can be either a <time> or a <percentage>. syntax refer to the documentation for <time> and <percentage> for details of the individual syntaxes allowed by this type. examples use in calc() where a <time-percentage> is specified as an allowable type, this means that the percentage resolves to a time and therefore can be used in a calc() expression. ...
...s allowed by this type. examples use in calc() where a <time-percentage> is specified as an allowable type, this means that the percentage resolves to a time and therefore can be used in a calc() expression. valid percentages 50% +50% optional plus sign -50% negative percentages are not valid for all properties that accept percentages invalid percentages 50 % space not allowed between the space and the percentage sign valid times 12s positive integer -456ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended. ...
... specifications specification status comment css values and units module level 4the definition of '<time-percentage>' in that specification. ...
... non-integer 14ms the unit is case-insensitive, although capital letters are not recommended. +0s zero with a leading + and a unit -0ms zero with a leading - and a unit invalid times 0 although unitless zero is allowed for <length>s, it's invalid for <time>s. 12.0 this is a <number>, not a <time>, because it's missing a unit. 7 ms no space is allowed between the number and the unit. specifications specification status comment css values and units module level 4the definition of '<time-percentage>' in that specification. editor's draft css values and units module level 3the definition of '<time-percentage>' in that specification. candidate recommendation defines <time-percentage>. adds cal...

Cross-browser audio basics - Developer guides
details. loop the loop attribute will ensure that upon getting to the end of the audio clip, the audio clip will loop back to the beginning and start playing again. <audio loop> ... </audio> muted if you want the audio to start muted (no volume), add the muted attribute. <audio muted> ... </audio> note: this value is often ignored on mobile platforms. ...
... auto: download the whole audio file as soon as possible. this is generally not a good option unless you can guarantee your users will have a fast network connection. note: this value is often ignored on mobile platforms. <audio preload="auto"> ... ...
... the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed. preload can take 3 different values: none: don't download anything before the play button is pressed. metadata: download the audio metadata; this is usually the best option, as it allows you to access and display information such as audio length, and allow the browser to work out which audio file it should use. auto: download the whole audio file as soon as possible. this is generally not a good option unless you can guarantee your users will have a fast network connection. note: this value is often ignored on mobile platforms. <audio preload="auto"> ... </audio> controls we specify the controls attribute when we require the browser to pr...
...urrenttime property gets or sets the current time the audio should play at. this is useful in many ways, for example since play() does not take a parameter we need to set the point to play from separately if we don't want it to be 0. the value of currenttime is a number which represents the time in seconds. if (myaudio.currenttime > 5) { myaudio.currenttime = 3; } volume the volume property allows us to set the audio volume, as a number between 0 and 1. // set the volume at 50% myaudio.volume = 0.5; creating your own custom audio player the javascript media api allows you to create your own custom player. let's take a look at a very minimal example. we can combine html and javascript to create a very simple player with a play and a pause button. first, we'll set up the audio in the htm...

Audio and video manipulation - Developer guides
etfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code. ...
... setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code. common audio filters these are some of the common types of audio filter you can apply: low pass: allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. high pass: allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff. ...
...sues your video should be on the same domain as your code. common audio filters these are some of the common types of audio filter you can apply: low pass: allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. high pass: allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff. band pass: allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. low shelf: allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. ...
...nuates frequencies above the cutoff. high pass: allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff. band pass: allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. low shelf: allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. high shelf: allows all frequencies through, but adds a boost (or attenuation) to the higher frequencies. peaking: allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies. notch: allows all frequencies through, except for a set of frequencies. allpass: allows all frequencies through, but changes the phase relationship between the various frequencies. note: see biquadfiltern...

HTML attribute: accept - HTML: Hypertext Markup Language
the accept property is an attribute of the file <input> type. it was supported on the <form> element, but was removed in favor of file in html5. because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is acceptable. ...
...t selectable. <p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iamges. see the multiple attribute for more information. unique file type specifiers a unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. each unique file type specifier may take one of the following forms: a valid case-insensitive filename extension, starting with a period (".") c...
...file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live. regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file. including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. the user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down shift or control, and then clicking). if you only want the user to choose a single file per <input>, omit the multiple attribute. limiting acce...
... won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. for example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as jpeg or png. acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or mime types. some examples: accept="image/png" or accept=".png" — accepts png files. accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — accept png or jpeg files. accept="image/*" — accept any file with an image/* mime type. (many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/mswor...

<input type="month"> - HTML: Hypertext Markup Language
the value is a string whose value is in the format "yyyy-mm", where yyyy is the four-digit year and mm is the month number. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. ...
...ied. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for month inputs, the value of step is given in months, with a scaling factor of 1 (since the underlying numeric valu...
...{ padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it entirely. it's also possible for someone to simply bypass your html entirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth). handling browser support as menti...
...get the user to enter the month and year in separate controls (<select> elements being popular; see below for an implementation), or use javascript libraries such as the jquery date picker plugin. examples in this example, we create two sets of ui elements, each designed to let the user select a month and year. the first is a native month input, and the other is a pair of <select> elements that allow choosing a month and year independently, for compatibility with browsers that don't yet support <input type="month">. html the form that requests the month and year looks like this: <form> <div class="nativedatepicker"> <label for="month-visit">what month would you like to visit us?</label> <input type="month" id="month-visit" name="month-visit"> <span class="validity"></span> ...

<input type="search"> - HTML: Hypertext Markup Language
pproximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. spellcheck non-standard attributes the following non-standard attributes are available to search input fields. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect whether or not to allow autocorrect while editing this input field. safari only. incremental whether or not to send repeated search events to allow updating live search results while the user is still editing the value of the field. webkit and blink only (safari, chrome, opera, etc.). mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return...
...ble automatic correction and text substitutions. incremental the boolean attribute incremental is a webkit and blink extension (so supported by safari, opera, chrome, etc.) which, if present, tells the user agent to process the input as a live search. as the user edits the value of the field, the user agent sends search events to the htmlinputelement object representing the search box. this allows your code to update the search results in real time as the user edits the search. if incremental is not specified, the search event is only sent when the user explicitly initiates a search (such as by pressing the enter or return key while editing the field). the search event is rate-limited so that it is not sent more more frequently than an implementation-defined interval. mozactionhint ...
...="mysearch" name="q" placeholder="search the site..." size="30"> <button>search</button> </div> </form> the result is this wider input box: validation <input> elements of type search have the same validation features available to them as regular text inputs. it is less likely that you'd want to use validation features in general for search boxes. in many cases, users should just be allowed to search for anything, but there are a few cases to consider, such as searches against data of a known format. note: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it entirely. it's also possible for someone to s...
... position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on some browsers don't display icons placed directly after them very well. ...

<input type="tel"> - HTML: Hypertext Markup Language
es approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. non-standard attributes the following non-standard attributes are available to telephone number input fields. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect whether or not to allow autocorrect while editing this input field. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for android only. autocorrect a safari extension, the autocorrect attribute is a strin...
...laceholder reappears. here, we have an tel input with the placeholder 123-4567-8901. note how the placeholder disappears and reappears as you manipulate the contents of the edit field. <input id="telno" name="telno" type="tel" placeholder="123-4567-8901"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself. physical input element size the physical size of the input box can be controlled using the size attribute. with it, you can specify the number of characters the input box can display at a time. in this example, for instance, the tel edit box is 20 characters wide: <input id="telno" name="telno" type="tel" size="20"> element value length the size is separ...
...lways, you can provide a default value for an tel input box by setting its value attribute: <input id="telno" name="telno" type="tel" value="333-4444-4444"> offering suggested values taking it a step farther, you can provide a list of default phone number values from which the user can select. to do this, use the list attribute. this doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. this also offers hints to autocomplete. the list attribute specifies the id of a <datalist> element, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the telephone number entry box. <label for="telno">phone number: </label> <input id="telno" name="telno" type=...
...tom value. here's a screenshot of what that might look like: validation as we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. so what can we do? let's consider some options. important: html form validation is not a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it entirely. it's also possible for someone to simply bypass your html entirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is...

<input type="url"> - HTML: Hypertext Markup Language
nt implement it as a standard text input field with basic validation features. in its most basic form, a url input can be implemented like this: <input id="myurl" name="myurl" type="url"> notice that it's considered valid when empty and when a single validly-formatted url address is entered, but is otherwise not considered valid. by adding the required attribute, only properly-formed urls are allowed; the input is no longer considered valid when empty. there is nothing magical going on here. submitting this form would cause the following data to be sent to the server: myurl=http%3a%2f%2fwww.example.com. note how characters are escaped as necessary. placeholders sometimes it's helpful to offer an in-context hint as to what form the input data should take. this can be especially important ...
...ars. here, we have a url input with the placeholder http://www.example.com. note how the placeholder disappears and reappears as you manipulate the contents of the edit field. <input id="myurl" name="myurl" type="url" placeholder="http://www.example.com"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself. physical input element size the physical size of the input box can be controlled using the size attribute. with it, you can specify the number of characters the input box can display at a time. in this example, for instance, the url edit box is 30 characters wide: <input id="myurl" name="myurl" type="url" size="30"> element value length the size is separ...
...s as always, you can provide a default value for a url input box by setting its value attribute: <input id="myurl" name="myurl" type="url" value="http://www.example.com"> offering suggested values taking it a step farther, you can provide a list of default options from which the user can select by specifying the list attribute. this doesn't limit the user to those options, but does allow them to select commonly-used urls more quickly. this also offers hints to autocomplete. the list attribute specifies the id of a <datalist>, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the url entry box. <input id="myurl" name="myurl" type="url" list="defaulturls"> <datalist id="defaulturls"> <option valu...
...h automatically ensures that the contents meet the requirements to be a valid url. but there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any. important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it entirely. it's also possible for someone to simply bypass your html entirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. basic validati...

<input type="week"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. in non-supporting browsers, the control degrades gracefully to function identically to <input type="text">. ...
...if the value entered into the element exceeds this, the element fails constraint validation. if the value of the max attribute isn't a valid week string, then the element has no maximum value. this value ...
...ied. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for week inputs, the value of step is given in weeks, with a scaling factor of 604,800,000 (since the underlying nume...
... </div> </form> if you try to submit the form with no value, the browser displays an error. try playing with the example now: here's'a screenshot for those of you who aren't using a supporting browser: important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it entirely. it's also possible for someone to simply bypass your html entirely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth). handling browser support as menti...

Content negotiation - HTTP
ers always send this header and the server should be configured to abide to it and to use compression. the accept-language header the accept-language header is used to indicate the language preference of the user. it is a list of values with quality factors (like: "de, en;q=0.7"). a default value is often set according the language of the graphical interface of the user agent, but most browsers allow to set different language preferences. due to the configuration-based entropy increase, a modified value can be used to fingerprint the user, it is not recommended to change it and a web site cannot trust this value to reflect the actual wish of the user. site designers must not be over-zealous by using language detection via this header as it can lead to a poor user experience: they should a...
...n it, separated by ';'. the vary response header in opposition to the previous accept-* headers which are sent by the client, the vary http header is sent by the web server in its response. it indicates the list of headers used by the server during the server-driven content negotiation phase. the header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while preventing serving erroneous content to the user. the special value of '*' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content. the vary header was added in the version 1.1 of http and is necessary in order to allow caches to work appropriately. a cache, in order to work with server...
...r feature used in the negotiation. if you want to use screen size, resolution or other dimensions, a new http header must be created. sending of the headers must be done on every request. this is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. the more precise headers are sent, the more entropy is sent, allowing for more http fingerprinting and corresponding privacy concern. from the beginnings of http, the protocol allowed another negotiation type: agent-driven negotiation or reactive negotiation. in this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. the user is presented the resources and choose the one to use. ...
...besides falling back to the server-driven negotiation, this method is almost always used in conjunction with scripting, especially with javascript redirection: after having checked for the negotiation criteria, the script performs the redirection. ...

Feature-Policy: accelerometer - HTTP
the http feature-policy header accelerometer directive controls whether the current document is allowed to gather information about the acceleration of the device through the accelerometer interface. syntax feature-policy: accelerometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: ambient-light-sensor - HTTP
the http feature-policy header ambient-light-sensor directive controls whether the current document is allowed to gather information about the amount of light in the environment around the device through the ambientlightsensor interface. syntax feature-policy: ambient-light-sensor <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: autoplay - HTTP
the http feature-policy header autoplay directive controls whether the current document is allowed to autoplay media requested through the htmlmediaelement interface. when this policy is enabled and there were no user gestures, the promise returned by htmlmediaelement.play() will reject with a domexception. the autoplay attribute on <audio> and <video> elements will be ignored. for more details on autoplay and autoplay blocking, see the article autoplay guide for media and web audio apis. syntax feature-policy: autoplay <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': t...
...d autoplay blocking, see the article autoplay guide for media and web audio apis. syntax feature-policy: autoplay <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. ...
...ill be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: battery - HTTP
the http feature-policy header battery directive controls whether the current document is allowed to gather information about the acceleration of the device through the batterymanager interface obtained via navigator.getbattery(). syntax feature-policy: battery <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: camera - HTTP
the http feature-policy header camera directive controls whether the current document is allowed to use video input devices. when this policy is enabled, the promise returned by mediadevices.getusermedia() will reject with a notallowederror. syntax feature-policy: camera <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: document-domain - HTTP
the http feature-policy header document-domain directive controls whether the current document is allowed to set document.domain. when this policy is enabled, attempting to set document.domain will fail and cause a securityerror domexception to be be thrown. syntax feature-policy: document-domain <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: magnetometer - HTTP
the http feature-policy header magnetometer directive controls whether the current document is allowed to gather information about the orientation of the device through the magnetometer interface. syntax feature-policy: magnetometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: microphone - HTTP
the http feature-policy header microphone directive controls whether the current document is allowed to use audio input devices. when this policy is enabled, the promise returned by mediadevices.getusermedia() will reject with a notallowederror. syntax feature-policy: microphone <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

Feature-Policy: picture-in-picture - HTTP
the http feature-policy header picture-in-picture directive controls whether the current document is allowed to play a video in a picture-in-picture mode via the corresponding api. syntax feature-policy: picture-in-picture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'non...
...ill be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...
...sing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-level and nested browsing contexts. default policy as of june 2019, the spec draft and google chrome set default allow list to *. specifications specification status comment feature policy editor's draft initial definition. ...

Feature-Policy: publickey-credentials-get - HTTP
the http feature-policy header publickey-credentials-get directive controls whether the current document is allowed to access web authentcation api to create new public-key credentials, i.e, via navigator.credentials.get({publickey: ..., ...}). when this policy is enabled, any attempt to query public key credentials will result in an error. syntax feature-policy: publickey-credentials-get <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe a...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...
...in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-level and nested browsing contexts. default policy the default allowlist is 'self'. specifications specification status comment feature policy editor's draft initial definition. web authentication level 2 editor's draft. definition of publickey-credentials-get directive, default allowlist. ...

Feature-Policy: sync-xhr - HTTP
the http feature-policy header sync-xhr directive controls whether the current document is allowed to make synchronous xmlhttprequest requests. syntax feature-policy: sync-xhr <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and ne...
...ill be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...
... specification specification status comment feature policy editor's draft initial definition. ...

Feature-Policy: usb - HTTP
the http feature-policy header usb directive controls whether the current document is allowed to use the webusb api. syntax feature-policy: usb <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin...
...ill be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...
... ...

web-share - HTTP
the http feature-policy header web-share directive controls controls whether the current document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice. syntax feature-policy: web-share <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...origins should be separated by a space. ...
...t is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for ...
...ture is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. the values * (enable for all origins) or 'none' (disable for all origins) may only be used alone, while 'self' and 'src' may be used with one or more origins. features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-leve...

PATCH - HTTP
the resource in the same state. for example if an auto-incrementing counter field is an integral part of the resource, then a put will naturally overwrite it (since it overwrites everything), but not necessarily so for patch. patch (like put) may have side-effects on other resources. ...
...e state. for example if an auto-incrementing counter field is an integral part of the resource, then a put will naturally overwrite it (since it overwrites everything), but not necessarily so for patch. patch (like put) may have side-effects on other resources. ...
...source, then a put will naturally overwrite it (since it overwrites everything), but not necessarily so for patch. patch (like put) may have side-effects on other resources. to find out whether a server supports patch, a server can advertise its support by adding it to the list in the allow or access-control-allow-methods (for cors) response headers. ...
...t in the allow or access-control-allow-methods (for cors) response headers. another (implicit) indication that patch is allowed, is the presence of the accept-patch header, which specifies the patch document formats accepted by the server. request has body yes successful response has body yes safe no idempotent no cacheable no allowed in html forms no syntax patch /file.txt http/1.1 example request patch /file.txt http/1.1 host: www.example.com content-type: application/example if-match: "e0023aa4e" content-length: 100 [description of changes] response a successful response is indicated by any 2xx status code. in the example below a 204 response code is used, because the response does not carry a payload b...

Array.from() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax array.from(arraylike [, mapfn [, thisarg]]) parameters arraylike an array-like or iterable object to convert to an array. mapfn optional map function to call on every element of the array. thisarg optional value to use as this when executing mapfn. return value a new array instance. ...
...ptional map function to call on every element of the array. thisarg optional value to use as this when executing mapfn. return value a new array instance. description array.from() lets you create arrays from: array-like objects (objects with a length property and indexed elements); or iterable objects (objects such as map and set). array.from() has an optional parameter mapfn, which allows you to execute a map() function on each element of the array being created. more clearly, array.from(obj, mapfn, thisarg) has the same result as array.from(obj).map(mapfn, thisarg), except that it does not create an intermediate array. this is especially important for certain array subclasses, like typed arrays, since the intermediate array would necessarily have values truncated to fit into t...
....from(obj, mapfn, thisarg) has the same result as array.from(obj).map(mapfn, thisarg), except that it does not create an intermediate array. this is especially important for certain array subclasses, like typed arrays, since the intermediate array would necessarily have values truncated to fit into the appropriate type. the length property of the from() method is 1. in es2015, the class syntax allows sub-classing of both built-in and user-defined classes. as a result, static methods such as array.from() are "inherited" by subclasses of array, and create new instances of the subclass, not array. polyfill array.from() was added to the ecma-262 standard in the 6th edition (es2015). as such, it may not be present in other implementations of the standard. you can work around this by inserting...
...es. as a result, static methods such as array.from() are "inherited" by subclasses of array, and create new instances of the subclass, not array. polyfill array.from() was added to the ecma-262 standard in the 6th edition (es2015). as such, it may not be present in other implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of array.from() in implementations that don't natively support it. polyfill notes: this algorithm is exactly as specified in ecma-262 6th edition (assuming object and typeerror have their original values and that callback.call() evaluates to the original value of function.prototype.call()). in addition, since true iterables cannot be polyfilled, this implementation does not support gene...

JSON - JavaScript
en. numbers leading zeros are prohibited. a decimal point must be followed by at least one digit. nan and infinity are unsupported. any json text is a valid javascript expression... ...but only in javascript engines that have implemented the proposal to make all json text valid ecma-262. in engines that haven't implemented the proposal, u+2028 line separator and u+2029 paragraph separator are allowed in string literals and property keys in json; but their use in these features in javascript string literals is a syntaxerror. consider this example where json.parse() parses the string as json and eval executes the string as javascript: let code = '"\u2028\u2029"' json.parse(code) // evaluates to "\u2028\u2029" in all engines eval(code) // throws a syntaxerror in old engines other ...
...s and property keys in json; but their use in these features in javascript string literals is a syntaxerror. consider this example where json.parse() parses the string as json and eval executes the string as javascript: let code = '"\u2028\u2029"' json.parse(code) // evaluates to "\u2028\u2029" in all engines eval(code) // throws a syntaxerror in old engines other differences include allowing only double-quoted strings and having no provisions for undefined or comments. for those who wish to use a more human-friendly configuration format based on json, there is json5, used by the babel compiler, and the more commonly used yaml. full json syntax the full json syntax is as follows: json = null or true or false or jsonnumber or jsonstring or jsonobject or jsonar...
...a), and space (u+0020) characters are the only valid whitespace characters. static methods json.parse(text[, reviver]) parse the string text as json, optionally transform the produced value and its properties, and return the value. any violations of the json syntax, including those pertaining to the differences between javascript and json, cause a syntaxerror to be thrown. the reviver option allows for interpreting what the replacer has used to stand in for other datatypes. json.stringify(value[, replacer[, space]]) return a json string corresponding to the specified value, optionally including only certain properties or replacing property values in a user-defined manner. by default, all instances of undefined are replaced with null, and other unsupported native data types are censored. ...
...hat the replacer has used to stand in for other datatypes. json.stringify(value[, replacer[, space]]) return a json string corresponding to the specified value, optionally including only certain properties or replacing property values in a user-defined manner. by default, all instances of undefined are replaced with null, and other unsupported native data types are censored. the replacer option allows for specifying other behavior. examples example json { "browsers": { "firefox": { "name": "firefox", "pref_url": "about:config", "releases": { "1": { "release_date": "2004-11-09", "status": "retired", "engine": "gecko", "engine_version": "1.7" } } } } } specifications specification ...

Lexical grammar - JavaScript
var o = { a: 'foo', b: 'bar', c: 42 }; // shorthand notation. new in es2015 var a = 'foo', b = 'bar', c = 42; var o = {a, b, c}; // instead of var o = { a: a, b: b, ...
... var o = { a: 'foo', b: 'bar', c: 42 }; // shorthand notation. new in es2015 var a = 'foo', b = 'bar', c = 42; var o = {a, b, c}; // instead of var o = { a: a, b: b, c: c }; array literals see also array ...
... zero or more unicode code points enclosed in single or double quotes. unicode code points may also be represented by an escape sequence. all code points may appear literally in a string literal except for these closing quote code points: u+005c \ (backslash), u+000d <cr>, and u+000a <lf>. prior to the proposal to make all json text valid ecma-262, u+2028 <ls> and u+2029 <ps>, were also disallowed from appearing unescaped in string literals. any code points may appear in the form of an escape sequence. string literals evaluate to ecmascript string values. when generating these string values unicode code points are utf-16 encoded. 'foo' "bar" hexadecimal escape sequences hexadecimal escape sequences consist of \x followed by exactly two hexadecimal digits representing a code unit or c...
...h semicolons and are therefore affected by automatic semicolon insertion (asi): empty statement let, const, variable statement import, export, module declaration expression statement debugger continue, break, throw return the ecmascript specification mentions three rules of semicolon insertion. 1. a semicolon is inserted before, when a line terminator or "}" is encountered that is not allowed by the grammar. { 1 2 } 3 // is transformed by asi into { 1 2 ;} 3; 2. a semicolon is inserted at the end, when the end of the input stream of tokens is detected and the parser is unable to parse the single input stream as a complete program. here ++ is not treated as a postfix operator applying to variable b, because a line terminator occurs between b and ++. a = b ++c // is transformen...

<mtable> - MathML
inside a <mtable> only <mtr> and <mtd> elements may appear. these elements are similar to <table> , <tr> and <td> elements of html. note: the <mtable> element resets the displaystyle attribute to false. if you want to use this element as an inline-block, you might want to set <mtable displaystyle="true">...</mtable>. attributes align specifies the vertical alignment of the table with respect to its environment. possible values are: axis (default): the vertical center of the table aligns on the environment's axis (typically the minus sign). baseline: the vertical center of the table aligns on the environment's baseline. ...
...s on the environment's axis (typically the minus sign). baseline: the vertical center of the table aligns on the environment's baseline. bottom: the bottom of the table aligns on the environments baseline. center: see baseline. top: the top of the table aligns on the environments baseline. in addition, values of the align attribute can end with a rownumber (e.g. align="center 3"). this allows you to align the specified row of the table rather than the whole table. a negative integer value counts rows from the bottom of the table. starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the interpretation of negative values has been corrected (bug 601436). in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) the parsing has been updated to treat whitespace c...
.../ seamonkey 2.5) the interpretation of negative values has been corrected (bug 601436). in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) the parsing has been updated to treat whitespace correctly. alignmentscope unimplemented class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of the cells. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnalign="left right center"). possible values are: left, center (default) and right. columnlines specifies column borders. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnlines="none none solid"). possible values are: none (default), solid and dashed. columnspacing specifies the space between ...
...specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. unimplemented minlabelspacing a length value specifing the minimum space between a label and the adjacent cell in the row. rowalign specifies the vertical alignment of the cells. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowalign="top bottom axis"). possible values are: axis, baseline (default), bottom, center and top. rowlines specifies row borders. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowlines="none none solid"). possible values are: none (default), solid and dashed. unimplemented rowspacing specifies the space b...

Add to Home screen - Progressive web apps (PWAs)
why a2hs? a2hs is thought to be part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. ...
... why a2hs? a2hs is thought to be part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. ...
...rted in all mobile browsers, except ios webview. it's also supported in some chromium desktop browsers. firefox has had mobile support since v58 and is working on desktop support. see caniuse.com for exact details. how do you use it? we've written a very simple example web site (see our demo live, and also see the source code) that doesn't do much, but was developed with the necessary code to allow it to be added to a home screen, as well as a service worker to enable it to be used offline. the example displays a series of fox pictures. if you have firefox for android available, use it to navigate to our demo at https://mdn.github.io/pwa-examples/a2hs/. you'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "add to home screen" ...
...r experience on mobile oses, there is movement to make pwas installable on desktop platforms too. note: at the time of writing, the functionality described below was only supported in newer versions of chrome — by default on windows, and behind the #enable-desktop-pwas flag on macos. ...

The building blocks of responsive design - Progressive web apps (PWAs)
lly, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels. this has a lot of advantages in that the layout will adapt to different viewport dimensions. let's look at an example. we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery. you can then view previously-captured images and delete them. other articles will discuss the functionality in more detail, but here we're interested in the layout. note: you can find the snapshot app on github; check out the code and help improve it. you can also see snapshot running live. note th...
...ith a messy layout with different sized elements when using max-width: 100%, such as: media queries fluid grids are a great start, but you'll notice that at certain points (known as breakpoints) the layout starts to break down. at these points you'll want to change the layout to rectify the layout problem, and this can be done using media queries. note: media queries are a css3 feature that allow you to selectively apply css depending on the results of media feature tests — for more on the basics, read media queries. typical desktop layout in our example, we have a desktop layout, as we've already seen. this is created using the css rules included at the top of the stylesheet, before any media queries are encountered. mid-width layout we also have a mid-width layout, which is a...
... <img> html images are a more difficult proposition. there is no mechanism inherent in html images for serving different image files dependent on viewport size, and, due to a number of irksome browser behavior realities, solutions are more difficult to hack together than you would ...
...tions are definitely not ready for production yet — both are in a very early stage of standardization, and have no support across browsers. currently we have to rely on various polyfills and other solutions, none of which are perfect for all situations, so you need to decide which one is right for your particular situation. some available solutions are as follows: hisrc a jquery plugin that allows you to create small, medium, and large versions of an image, and then serves the appropriate one according to the browser's resolution and available network speed. mobify.js capturing a very clever technique from mozilla that allows you to capture the source of the page before it's parsed. this way, you can swap out image src values with javascript depending on browser features, circumventing ...

Progressive web apps (PWAs)
must be served over a secure network. being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. most of the features related to a pwa such as geolocation and even service workers are available only once the app has been loaded using https. service workers a service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. with service workers, web developers can create reliably fast web pages and offline experiences. manifest file a json file that controls how your app appears to the user and ensures that progressive web apps are discoverable. it describes the name of the app, the start url, icons, and all of the other...
...endent, progressive, re-engageable, responsive, and safe. to find out more about what these mean, read progressive web app advantages. to find out how to implement pwas, read through our pwa developer guide. ...
...below will be replaced soon --> add to home screenadd to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie. add a shortcut to their home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. ...
...take advantage of it.how to make pwas installablein this article, we learned about how we can make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "add to home screen" feature of their browser.how to make pwas re-engageable using notifications and pushhaving the ability to cache the contents of an app to work offline is a great feature. allowing the user to install the web app on their home screen is even better. but instead of relying only on user actions, we can do more, using push messages and notifications to automatically re-engage and deliver new content whenever it is available.introduction to progressive web appsthis article provides an introduction to progressive web apps (pwas), discussing what they are and the advantages th...

Web security
arameters, which can have a substantial impact on the security and reliability of data. this article provides an overview of tls and the kinds of decisions you need to make when securing your content. https https (hypertext transfer protocol secure) is an encrypted version of the http protocol. it uses ssl or tls to encrypt all communication between a client and a server. this secure connection allows clients to be sure that they are connected with the intended server, and to exchange sensitive data. http strict-transport-security the strict-transport-security: http header lets a website specify that it may only be accessed using https. certificate transparency certificate transparency is an open framework designed to protect against and monitor for certificate misissuances. newly issued ...
... how a document or script loaded from one origin can interact with a resource from another origin. it helps isolate potentially malicious documents, reducing possible attack vectors. subresource integrity subresource integrity (sri) is a security feature that enables browsers to verify that resources they fetch (for example, from a cdn) are delivered without unexpected manipulation. it works by allowing you to provide a cryptographic hash that a fetched resource must match. http access-control-allow-origin the access-control-allow-origin response header indicates whether the response can be shared with requesting code from the given origin. http x-content-type-options the x-content-type-options response http header is a marker used by the server to indicate that the mime types advertise...
...s is a way to opt out of mime type sniffing, or, in other words, to say that the mime types are deliberately configured. clickjacking protection in clickjacking, a user is fooled into clicking on a ui element that performs some action other than what the user expects. http x-frame-options the x-frame-options http response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>. sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites. csp: frame-ancestors the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. user information security ...
...nformation security insecure passwords serving login forms over http is especially dangerous because of the wide variety of attacks that can be used against them to extract a user’s password. network eavesdroppers could steal a user's password by sniffing the network, or by modifying the served page in transit. privacy and the :visited selector before about 2010, the css :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. security-related glossary terms block cipher mode of operation certificate authority challenge-response authentication cipher cipher suite ciphertext...

Using shadow DOM - Web Components
there are some bits of shadow dom terminology to be aware of: shadow host: the regular dom node that the shadow dom is attached to. shadow tree: the dom tree inside the shadow d...
...oot: the root node of the shadow tree. you can affect the nodes in the shadow dom in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow dom tree inside a <style> element. the difference is that none of the code inside a shadow dom can affect anything outside it, allowing for handy encapsulation. note that the shadow dom is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. think for example of a <video> element, with the default browser controls exposed. all you see in the dom is the <video> element, but it contains a series of buttons and other controls inside its shadow dom. the shadow do...
...that the shadow dom is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. think for example of a <video> element, with the default browser controls exposed. all you see in the dom is the <video> element, but it contains a series of buttons and other controls inside its shadow dom. the shadow dom spec has made it so that you are allowed to actually manipulate the shadow dom of your own custom elements. basic usage you can attach a shadow root to any element using the element.attachshadow() method. this takes as its parameter an options object that contains one option — mode — with a value of open or closed: let shadow = elementref.attachshadow({mode: 'open'}); let shadow = elementref.attachshadow({mode: 'closed'}); ope...
...with this optimization the performance of external and internal styles should be similar. ...

Web Components
concepts and usage as developers, we all know that reusing code as much as possible is a good idea. this has traditionally not been so easy for custom markup structures — think of the complex html (and associated style and script) you've sometimes had to write to render custom ui controls, and how using them multiple times can turn your page into a mess if you are not careful. ...
...ntrols, and how using them multiple times can turn your page into a mess if you are not careful. web components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions. custom elements: a set of javascript apis that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface. shadow dom: a set of javascript apis for attaching an encapsulated "shadow" dom tree to an element — which is rendered separately from the main document dom — and controlling associated functionality. in this way, you can keep an element's features private, so they can be scripted and...
...ment's dom. disconnectedcallback: invoked when the custom element is disconnected from the document's dom. adoptedcallback: invoked when the custom element is moved to a new document. attributechangedcallback: invoked when one of the custom element's attributes is added, removed, or changed. extensions for creating custom built-in elements the is global html attribute: allows you to specify that a standard html element should behave like a registered custom built-in element. the "is" option of the document.createelement() method: allows you to create an instance of a standard html element that behaves like a given registered custom built-in element. css pseudo-classes pseudo-classes relating specifically to custom elements: :defined: matches any element t...
...tmltemplateelement. <slot> a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together. the associated dom interface is htmlslotelement. the slot global html attribute assigns a slot in a shadow dom shadow tree to an element. slotable a mixin implemented by both element and text nodes, defining features that allow them to become the contents of an <slot> element. the mixin defines one attribute, slotable.assignedslot, which returns a reference to the slot the node is inserted in. element extensions extensions to the element interface related to slots: element.slot: returns the name of the shadow dom slot attached to the element. css pseudo-elements pseudo-elements relating specifically to sl...

page-worker - Archive of obsolete content
-script.js"></script> in the page header. in the "main.js" file: remove the contentscriptfile option in the page() constructor. globals constructors page(options) creates an uninitialized page worker instance. parameters options : object optional options: name type contenturl string the url of the content to load in the panel. allow object an object with keys to configure the permissions on the page worker. the boolean key script controls if scripts from the page are allowed to run. script defaults to true. include string, regexp, array of (string or regexp) this is useful when your page worker loads a page which will redirect to other pages. a match pattern str...
... events. parameters type : string the type of event to listen for. listener : function the listener function that handles the event. removelistener(type, listener) unregisters an event listener from the page worker. parameters type : string the type of event for which listener was registered. listener : function the listener function that was registered. ...
...it contains a single key named script whose value is a boolean that indicates whether or not to execute script in the content. script defaults to true. include a set of match patterns to define the urls which the page-worker's content script will be applied. ...

/loader - Archive of obsolete content
the example above overlays the base path '' with a different mapping for 'toolkit/' prefixed modules. modules the lo...
...the example above overlays the base path '' with a different mapping for 'toolkit/' prefixed modules. modules the loader may optionally be provided with a set of module exports. in the sdk we call these "pseudo modules". ...
...oader/options'); let loader = loader(options); this module is useful in very specific cases. for example the sdk uses this feature during test execution to create an identical environment with a different state to test how specific modules handle unloads. @loader/unload this pseudo module exposes an object that is unique per loader instance. it is used as a subject for observer notification to allow use of the observer service for defining hooks reacting on the unload 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']. getservice(ci.nsiobserverservice); let observer = { observe: function onunload(su...

jpm - Archive of obsolete content
profile. the profile value may be a profile name or the path to the profile. see using profiles for more information. -v --verbose verbose operation. --no-copy use with caution because jpm run|test changes many preferences, never use with your main profile. this only applies when --profile is used. disables the copying of the profile used, which allows one to reuse a profile. jpm test use this command to run an add-on's unit tests. the command: looks for a directory called "test" within the current directory (or --addon-dir). opens every file in there whose name starts with "test-". make note of the hyphen after "test" in the filename. jpm test include a file called "test-mycode.js", but will exclude files called "test_mycode.js" o...
...pl print test output in treeherder format --times number run tests number of times: jpm test --times 2 -v --verbose verbose operation. --no-copy use with caution because jpm run|test changes many preferences, never use with your main profile. this only applies when --profile is used. disables the copying of the profile used, which allows one to reuse a profile. jpm xpi this command packages the add-on as an xpi file, which is the install file format for mozilla add-ons. jpm xpi it looks for a file called package.json in the current directory (or --addon-dir) and creates the corresponding xpi file. it ignores any zips or xpis in the add-on's root, and any test files. it includes all other files. if you want to exclude e...
...ion to after creating an xpi. jpm watchpost --post-url http://localhost:8888/ see using post and watchpost for more information. -v --verbose verbose operation: jpm watchpost --post-url http://localhost:8888/ -v jpm sign this feature is only supported from jpm 1.0.4 onwards. this command retrieves a new xpi for your add-on signed by mozilla. this allows you to self-host your add-on so that users can install it without error when signed add-ons are required. you can sign an xpi you've already generated by passing the xpi file in the --xpi argument, like this: jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} --xpi <xpi file> alternatively, you can omit the --xpi argument, in which case jpm sign will generate an xpi from the current ...

HTML to DOM - Archive of obsolete content
("iframe"); // iframe (or browser on older firefox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; //...
...forget to modify the id and name! ...
..."false" height="0"> <iframe type="content" src="" name="donkey-browser" hidden="false" id="donkey-browser" height="0"/> </vbox> then, in your extension's "load" event handler: onload: function() { donkeybrowser = document.getelementbyid("donkey-browser"); if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to t...

Interaction between privileged and non-privileged pages - Archive of obsolete content
xtensionevent. var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event. the data from the web page (unprivileged code) will be the values of attribute1 and attribute2. to trigger the alert() in the listener and pass the data from the web page, write code such as this in the web page: var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world")...
...listener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); if you need to to pass lots of data, consider using cdata sections instead of the simple attributes on a custom element. note: if you're using html5's postmessage() to send a message from unprivileged code to privileged code, adding 'true' to the end of your event listener in your privileged chrome code will allow the message to be received. document.addeventlistener("message", function(e) { yourfunction(e); }, false, true); sending data from chrome to unprivileged document to "answer" the web page (e.g., return code), your extension can set an attribute or attach child elements on the event target element (<myextensiondataelement/> in this example). you can optionally clean up the created element, o...
... in the web page: document.addeventlistener("myanswerevent",function(e) { extensionanswer(e); },false); var element; function callextension() { var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt =...

Getting Started with Firefox Extensions - Archive of obsolete content
taken from the extensions page. as described in the quoted text, an extension is a small application that adds something new to one or more mozilla applications. ...
...extensions are add-ons, but add-ons can also be themes, plugins, or language packs. this tutorial is about extension development, but themes and language packs are developed in a very similar way. plugins are entirely different, and they will not be covered here. you can read more about plugins and their development in the plugins page. firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. the mozilla add-ons repository (amo) holds an extensive number of extensions with a wide variety of functions: content filtering (adblock plus, noscript), web application interaction (delicious bookmarks, ebay companion) and web development (dom inspector, fireb...
...ck on the link below. note: this extension is unsigned. starting with firefox 43, extensions need to be signed by mozilla before they can be installed in firefox. unsigned add-ons can still be installed in developer edition, nightly, and esr versions of firefox, after toggling the xpinstall.signatures.required preference in about:config. install hello world click the above link and then click "allow" in the pop-up bubble. you should see another pop-up telling you that you are installing an unverified add-on. click "install". after the extension is installed, you'll be asked to restart firefox. installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of npapi plugins, add-ons sdk extensions and bootstrapped extensions. this is an important poi...

Handling Preferences - Archive of obsolete content
ands of other preferences firefox handles that are not readily available to the user. these are hidden because they are too advanced or obscure for regular users to manage, and because the preferences window should be as easy to use as possible. to access all other preferences, enter "about:config" into the location bar. this xul page lists all the preferences defined in the firefox installation, allowing you to change them as you please. as the warning message states, you should be very careful when changing preferences. incorrect values can make firefox behave oddly or break altogether. you can type on the "filter" textbox to search for specific preferences. if you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its ...
...u should be very careful when changing preferences. incorrect values can make firefox behave oddly or break altogether. you can type on the "filter" textbox to search for specific preferences. if you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. right-clicking on the list reveals several options that allow you to modify preference values and add new ones. preferences with non-default values are highlighted in bold. all changes done in about:config are saved to the prefs.js file. the list in about:config is not complete. some firefox preferences have no default value, so they are left out unless you add them manually. an extensive specification of firefox preferences can be seen in this page. you d...
...e many preferences, you can organize them using the prefpane element. this creates a visually appealing tabbed view, just like the one in the firefox preferences window. the prefpane is just a container, and you can have as many as you want. the tabs at the top of the window will need icons, and just like with toolbar buttons there are subtle differences between operating systems. the prefwindow allows you to use the preferences and preference elements, which facilitate preference handling. the preferences element is just a container, and you should have one per window, or one per prefpane if you have those. the element and its children are completely invisible, and their purpose is to list the preferences to be used in the window/pane. <preferences> <preference id="xulschoolhello-message...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
e the interface conventions we've come to expect from web pages. the brains and primary driving force behind this compelling new design is douglas bowman, network design manager for terra lycos, who graciously agreed to an interview and in the process shed a lot of light on what goes into a standards-based redesign. wired news redesign in a nutshell driven by xhtml 1.0 transitional and css; allows centralized control over layout and appearance for thousands of pages; simple markup allows for rapid changes to templates; average page weight dropped by almost half; page layout accomplished with simple css positioning; vastly increased accessibility without special coding or user agent detection. why did you pursue a standards-based redesign of wired news? as network design manager at ...
... trouble ensuring a consistent vertical start position of columns using floats. two column layouts using floats seemed easy. but adding a third column to the mix created too many width variables for some browsers to dynamically calculate a total. resizing the browser window often resulted in one column getting pushed to the bottom of another. using absolute positioning for left and right columns allowed the markup for each column to fall in any order. there are some technicalities in the order of our markup and some ad units that would require too much to cover here. but positioning did allow the center column to fall first in the markup. it also guarantees each column will start in the same vertical position. to be fair, i did note two disadvantages of positioning. when one or more columns i...
...ate print template for stories. however, since some of our stories are broken up into 2 or 3 pages, we created a slightly altered template for print versions which pulls the entire text of the story into one (web) page. since we had a separate template to work with, we changed the media attribute of the linked print style sheet to "all", and eliminated the links to normal screen media files. this allows us to temporarily display on screen the same formatting to be used for printing that page. so what advantages does this redesign give you as a site administrator? you mean besides the fact that as designer, i can control design details on thousands of news pages with just a few files? besides the fact that the engineers can finally focus on building out the working functionality of the site ra...

cert_override.txt - Archive of obsolete content
fields fields are separated by a tab character. each line is terminated by a line feed character (unix format). ...
...character. each line is terminated by a line feed character (unix format). ...
...port 443 for https (ssl) hash algorithm oid sha1-256: oid.2.16.840.1.101.3.4.2.1 (most used) sha-384: oid.2.16.840.1.101.3.4.2.2 sha-512: oid.2.16.840.1.101.3.4.2.3 certificate fingerprint using previous hash algorithm one or more characters for override type: m : allow mismatches in the hostname u : allow untrusted certs (whether it's self signed cert or a missing or invalid issuer cert) t : allow errors in the validity time, for example, for expired or not yet valid certs certificate's serial number and the issuer name as a base64 encoded string ...

Drag and Drop JavaScript Wrapper - Archive of obsolete content
to drag to the transferdata object. ondragover(event, flavor, session) this function should be defined when you want something to happen when an element is dragged over. the first argument is the event object, the second is the flavor of the data and the third is a drag session object which provides more details about the drag that is occurring. you should define this function for elements that allow dragged data to be dropped on them. ondragexit(event, session) this function should be defined when something should happen on a drag exit. it has two arguments, the event object and the drag session. ondrop(event, dropdata, session) this 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 bein...
...may be able to initiate a drag and accept a drop. in this case, the ondragstart function will be necessary as well. the getsupportedflavours function should return a list of flavours that the element being dragged over can accept for dropping. a file system directory view might accept files and perhaps text, but wouldn't accept html text. below, we'll define a getsupportedflavours function. we'll allow only one flavour here, that for a string. var textobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; } } the flavours list contains only one flavour, which is 'text/unicode'. the flavourset object can be used to hold a list of flavours. in some cases, you must provide the xpcom interface as w...
...ur. 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 textobserver = { ondrop : function (event, transferdata, session) { event.target.setattribute("value",transferdata.data); } } the flavour system used allows multiple objects of various types to be dragged at once and also allows alternative forms of the data to be dragged. the following table describes some of the flavours you might use. you can also make up your own flavours if necessary. text/unicode text data text/html html data text/x-moz-url a url application/x-moz-file a local file see here for an overview of more data flavours. ...

Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
olete since gecko 4.0this 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. warning: this technology is obsolete. no active maintainer has stepped forward, and the code broke in firefox 4. the code has been removed from the mozilla source tree. xulrunner ships with the javaxpcom component, which allows java code to interact with xpcom objects. as you will see in this article, working with xpcom objects in java is not that much different than doing so in c++. prerequisites java 1.4.2 or newer xulrunner 1.8.0.1 or newer embedding in order to embed mozilla in your java application, you will need to add the library mozillainterfaces.jar (located in xulrunner/sdk/lib folder) to your classpa...
...ided by the java application. it implements the iappfilelocprovider interface, and tells xpcom where to find certain files and directories. if your code cannot find the gre and keeps throwing filenotfoundexceptions during the getgrepathwithproperties(...) call, check whether you already registered the gre on your system: gre registration the initembedding method kicks off the embedding process, allowing the java application to work with xpcom and mozilla. once the java application is done using mozilla, it needs to terminate the embedding process: try { mozilla.termembedding(); } catch (xpcomexception e) { // this exception is thrown if termembedding failed } working with xpcom objects now that mozilla is embedded, the java application can work with xpcom objects. the mozilla cla...
...} catch (xpcomexception e) { // this exception is thrown if termembedding failed } working with xpcom objects now that mozilla is embedded, the java application can work with xpcom objects. the mozilla class provides several methods to facilitate this, such as getservicemanager, getcomponentmanager, and newlocalfile. in addition to retrieving and calling methods on xpcom objects, javaxpcom allows the java application to pass java class objects to xpcom methods. for example: mozilla mozilla = mozilla.getinstance(); windowcreator creator = new windowcreator(); // implements nsiwindowcreator nsiservicemanager servicemanager = mozilla.getservicemanager(); nsiwindowwatcher windowwatcher = (nsiwindowwatcher) servicemanager .getservicebycontractid(ns_windowwatcher_contractid, n...

Layout System Overview - Archive of obsolete content
d presentation, where the width of the presentation is constrained by the dimensions of the printed output (paper) and the height of each page is fixed. this paged presentation presents several challenges not present in the galley presentation, namely how to break up elements that are larger than a single page, and how to handle changes to page dimensions. the original design of the layout system allowed for multiple, possibly different, presentations to be supported simultaneously from the same content model. in other words, the same html or xml document could be viewed as a normal galley presentation in a browser window, while simultaneously being presented in a paged presentation to a printer, or even an aural presentation to a speech-synthesizer. to date the only real use of this multiple p...
...e of the total classes in layout (see the detailed design documents for the details on all of the classes, in the context of their actual role). presentation shell / presentation context together the presentation shell and the presentation context provide the root of the current presentation. the original design provided for a single presentation shell to manage multiple presentation contexts, to allow a single shell to handle multiple presentations. it is unclear if this is really possible, however, and in general it is assumed that there is a one-to-one correspondence between a presentation shell and a presentation context. the two classes should probably be folded into one, or the distinction between them formalized and utilized in the code. the presentation shell currently owns a controllin...
...to the content that the frame is representing, the style context representing all of the stylistic data corresponding to the frame, a parent frame pointer, a sibling frame pointer, and a series of state bits. frames are chained primarily by the sibling links. given a frame, one can walk the sibling of that frame, and can also navigate back up to the parent frame. specializations of the frame also allow for the management of child frames; this functionality is provided by the container frame. container frames: the container frame is a specialization of the base frame class that introduces the ability to manage a list of child frames. all frames that need to manage child frames (e.g. frames that are not themselves leaf frames) derive from container frame. block frame reflow state reflow metrics s...

Style System Overview - Archive of obsolete content
ame, since frames point to style contexts rather than the other way around. style contexts own their parents, since inheritance operates through style context parents (ugly when we have multiple frames per content node). there is one rule node on the path from the root rule node to the style context's rule node for each rule that the element matches. style context api the style context api allows data to be obtained through a set of structs (see nsstylestruct.h). a struct for a style context can be obtained through nsistylecontext::getstyledata. nsiframe::getstyledata does the same thing for the frame's mstylecontext member, and the global ::getstyledata is a typesafe helper that doesn't require the style struct id. this style struct is always const, and should always be declared as su...
......
...g on the middle of selectors to catch p:hover a). style attribute changes we handle style attribute (“inline style”) changes in a different way from other changes to style rules. as for other style changes, we have to “walk” the rule tree and clear all the style data coming from the old inline style nsistylerule, since there could be an !important rule that overrides it, which would allow dynamic changes to put the style attribute in multiple places in the rule tree. however, we maintain a hashtable just for inline style rules so that we don't have to walk the whole tree to find the nodes. nscssframeconstructor::attributechanged only re-resolves style on the subtree of the element, just like other attribute changes. different hint mechanism (from rule structs, not data structs) ...

GRE - Archive of obsolete content
this document describes how embedders should dynamically link to a gre. to understand how gres are registered, see gre registration. the xre project, which means "xul runtime environment", has been replaced by xulrunner. mozilla suite: the old gre there are two different forms for the gre: the "old" gre was part of the mozilla application suite. ...
... was part of the mozilla application suite. it was installed with the windows installer of mozilla 1.4 through 1.7.x. there was never an official gre shipped for linux, but various distributors such as red hat have registered mozilla installations as if they were a gre. the mozilla suite never supported a gre on mac. xulrunner: the new gre xulrunner is the new version of the gre, which not only allows embedding but is capable of bootstrapping entire xul applications such as firefox. xulrunner supports or is planned to support embedding on all three major platforms (windows, mac, and linux). finding and using a gre from application code avoid linking directly against xpcom.dll if an application wishes to use the gre, it must take careful steps to ensure that it links against the proper libr...
...com.so (xpcom.lib import lib), your application will not launch unless xpcom.dll is in your path. this prevents dynamically finding a compatible gre at runtime. find a compatible gre note: support for locating a standalone glue was removed in gecko 6.0. to find a compatible gre, you should use the function gre_getgrepathwithproperties() (declared in xpcom/glue/standalone/nsxpcomglue.h). this allows the embedder to specify what version(s) of gre are appropriate, and to specify any special features the gre must have (currently there are no special features defined). statically link to xpcomglue.lib (the "standalone glue") the solution is to statically link against xpcomglue.lib, also known as the "standalone glue" (see xpcom glue). this library provides a layer of indirection between embed...

Same origin policy for XBL - Archive of obsolete content
the same origin policy used for xbl documents is different from the policy used for other content. this article provides a description of how the same origin policy for xbl works. when mozilla needs to decide whether or not xbl is allowed to be loaded, it looks at the nsiprincipal originating the load and the nsiuri to be loaded. determining the originating principal the principal originating the load is determined using the following steps: for external stylesheets (<link>, <?xml-stylesheet?>, user sheets, and ua sheets), it depends on where the sheet is loaded from, just like it would for an html document loaded from a similar source. for inline stylesheets (<style> and style attributes), the principal of the element node involved (meaning the <style> element or the element whose style attr...
...s being looked at). for the nsidomdocumentxbl interface's nsidomdocumentxbl.addbinding() and nsidomdocumentxbl.loadbindingdocument() methods, the originating principal is the one of the script making the call, or the principal of the document the call is made on if there isn't a script. checks performed once the originating principal is determined, checks are done to make sure the load should be allowed. the checks performed are: if the principal originating the load is the system principal, the load is allowed. a call to checloaduriwithprincipal() is done to make sure the principal is able to link to the given uri in the first place. a content policy check is performed. if the uri is a chrome: uri, the load is allowed. note that step 2 already denied the load attempt for cases in which the c...
...pal is able to link to the given uri in the first place. a content policy check is performed. if the uri is a chrome: uri, the load is allowed. note that step 2 already denied the load attempt for cases in which the chrome: uri isn't accessible to untrusted content. a checkmayload() check is performed on the originating principal for the given uri. if the checkmayload() check passes, the load is allowed. ...

Using Breakpoints in Venkman - Archive of obsolete content
an when you're at a breakpoint, see the debugging basics section of the introductory venkman article. clearing breakpoints to clear the breakpoint, click on the margin twice. the first click will clear the hard breakpoint and leave you with only a future breakpoint, which is represented by a yellow letter "f". a second click will remove the future breakpoint as well. advanced breakpoints venkman allows you to associate a breakpoint with a script that will be executed in the scope of the function when that breakpoint is hit. this advanced feature and other options you can see for the associated script are available from the future breakpoint properties dialog, which you can access by right-clicking a breakpoint and selecting properties. once you've created a script that will be executed when t...
...ies dialog that determine how venkman will deal with the output of the associated script. the following options are available: continue regardless of result causes venkman to continue normal execution after running the breakpoint script. this can be useful to try out additional code, on the fly. stop regardless of result causes venkman to stop execution after executing the breakpoint script, allowing you to inspect program state. stop if result is true effectively makes this a conditional breakpoint. if the breakpoint script returns a true value (it doesn't have to strictly be a boolean true, any non-null, non-empty string, non-zero, non-undefined, and non-false value will do), execution will continue normally. if, on the other hand, the script returns a false value, venkman will stop ex...
...alse value will do), execution will continue normally. if, on the other hand, the script returns a false value, venkman will stop execution at that point. early return from caller with result will cause the function that the breakpoint is set in to return the value of the breakpoint script as its result, immediatley after the breakpoint script completes. the pass exceptions to caller checkbox allows you to pass exceptions thrown by the breakpoint script directly to the caller. normally, if the breakpoint script generates an exception, venkman assumes you made a mistake and stops execution after displaying the exception. if you would like to see what your code does when exceptions are thrown at it, check "pass exceptions to caller", and thrown an exception from the breakpoint script. the l...

Introduction to XUL - Archive of obsolete content
applications, for instance, will have preconceived notions of what to do when they receive an "open file" command. an "open" button is simply a button. it will send its command to the application for processing, generally using some simple javascript for linkage. we are at first primarily concerned with the obvious ui components: toolbars, menus and dialogs. ...
....xul"> the html namespace is of course the standard one. the xul namespace is obviously a temporary one, but at least serves to explain the pronunciation. note that the above example is using an implicit xul namespace. this is optional; other examples in this document will on occasion belabor the namespace issue by declaring each use explicitly. the chrome protocol is another mozilla extension allowing the exact location of files involved in the chrome description to be moved without affecting the xul source. so it's just an indirection. someday, there will be a complete description of this mechanism at packages, but for now there's a good but somewhat out of date document at configurable chrome available for more information. scripting a xul interface is only a collection of disconnected...
...andler fires when the menu is selected by the user, and it dumps the text "hello world!" to the debug console. (see menu bars and menus for details.) finally there is an html iframe. note that the frame is qualified with the prefix html:, since it is an html object being used inside a default xul namespace. the frame also has a special attribute called flex, which indicates how much the frame is allowed to stretch to consume available space inside its window. (see the box system for details). idealistic future direction ideally, packages of xul ui descriptions could be shipped in a single file something like <?xml version="1.0"?> <?xml-stylesheet href="xul.css" type="text/css"?> <!doctype package> <package xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <window id="...

addTab - Archive of obsolete content
it also adds the relatedtocurrent parameter; firefox uses this to decide whether the new tab should be inserted next to the current tab. ...
...it also adds the relatedtocurrent parameter; firefox uses this to decide whether the new tab should be inserted next to the current tab. ...
...it also adds the relatedtocurrent parameter; firefox uses this to decide whether the new tab should be inserted next to the current tab. see code snippets: tabbed browser for examples. ...

OpenClose - Archive of obsolete content
both menupopups that use the menu tag, the button tag and the toolbarbutton tag. for menupopups attached to other elements using the popup or context attributes, see opening a popup below. as with other ways of opening a menu, the popupshowing event will be fired to provide an opportunity to customize the commands that appear on the menu. there are several situations when opening a menu is not allowed. these are: if the menu is already open, or already in the process of being opened. naturally, attempting to open a menu that is already open doesn't have any effect. if the menu is a child of another menu and the parent menu is not open. in this case, the parent menu must be opened first. if you do want to open a submenu, open the parent menu first, and then open the child menu in a popups...
...both. this may be confusing to understand, so see positioning a popup which describes this process in more detail and provides images which show the possible values and how a popup would be aligned for each value. the third and fourth arguments to openpopup are x and y offsets. after the popup is positioned, you can further position the popup by specifying non-zero values for these offsets. this allows the position of the popup to be precisely controlled while still being anchored to a specific element. you can use positive values to adjust the popup to the right or downwards and negative values to adjust the popup to the left or upwards. in the following example, the popup is anchored below an element, yet is offset by 10 pixels to the right and 2 pixels upwards. somepopup.openpopup(anchor,...
...menu is closed when the mouse is moved away. now try opening a context menu on the same bookmark and note how the other menus aren't affected by mouse movement. this difference is handled by the use of the iscontextmenu flag. finally, the last argument to the openpopup method, attributesoverride indicates whether attributes placed on the popup element itself override the arguments supplied. this allows a popup to use specific positioning behaviour by using the position, left and top attributes instead. more details on these attributes can be found at positioning a popup. unanchored popups with openpopup if the first argument to the openpopup method is null, this creates an unanchored popup. in this case, the second argument, the position, is not used, so an empty string can be used. here is ...

Multiple Queries - Archive of obsolete content
le, the results are combined and only three results are shown. however, you will probably notice that the one photo that matches the first query has appeared differently that the others. in fact, the content for this photo is that of the first query with the button, whereas the content for the other photos are that of the second query with the normal images. this method of using multiple queries allows different content to generated for each query. in this particular example, we could actually have used two rules instead. this would be a better idea as it only requires one query, is simpler and more efficient, however you could imagine a more complex query where this wasn't possible. how multiple queries are processed we already know that a query generates a set of results. there's no magic...
...rom the first query and three from the second. however, the example shows that only content for three results are generated. what happened to the fourth result? this is where the useful aspect of multiple queries comes in. note that two of the results above are actually for the same photo (canal.jpg). the template builder removes any duplicate items before generating content. it does this by only allowing the match for the earliest query. that is, the canal.jpg generated by the second query is removed, since an earlier query (the first query) already generated a match for that result. one important distinction is that the determination of duplicates is only based on the member variable, in this case the ?photo variable. it doesn't matter whether other variables are the same or not. if you look ...
...builder will need to construct the children six times. you probably won't notice any difference for small amounts of data such as the photos example we've been using, but you might for large datasets. thus, you will want to use the simple query syntax when possible. if you are only going to be using one query, it doesn't matter, of course. speaking of using a single query, the simple query syntax allows a slight shorthand. you can remove the <rule> element and place the rule's conditions directly on the <template>. there's no performance benefit, but it does save some typing. <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" i...

Document Object Model - Archive of obsolete content
pt element in the xul file. if you haven't done this, do that now, as shown below. an oncommand handler will also be added to the find button. <script src="findfile.js"/> . . . <button id="find-button" label="find" oncommand="dofind();"/> now, create another file called findfile.js in the same directory as findfile.xul. we'll add the dofind() function is this file. the script tag does allow code to be contained directly inside of it. however, for various reasons, including better performance, you should always put scripts in separate files, except for short fragments which can be put directly in the event handler. function dofind(){ var meter = document.getelementbyid('progmeter'); meter.hidden = false; } this function first gets a reference to the progress meter using its id...
...lement using any of the following methods: getattribute ( name ) return the value of the attribute with the given name. hasattribute ( name ) return true if the attribute with the given name has a value. setattribute ( name , value ) set the value of the attribute with the given name to the given value. removeattribute ( name ) remove the attribute with the given name. these functions allow you to get and change the value of an attribute at any time. for example, to use the value of the flex attribute, you might use code like the following: var box = document.getelementbyid('somebox'); var flex = box.getattribute("flex"); var box2 = document.getelementbyid('anotherbox'); box2.setattribute("flex", "2"); however, the flex attribute has a corresponding script property which can...
...for example, you might get the first child of an element using the firstchild property and then navigate through the children using the nextsibling property. or, you might accomplish the same thing by iterating through the items in the childnodes list. in mozilla, the latter method is more efficient. the following example shows how to iterate o...

Element Positioning - Archive of obsolete content
size to hold their text. the third button is larger because it contains more content. the width of the box containing the buttons is the total width of the buttons plus the padding between them. the height of the buttons is a suitable size to hold the text. width and height attributes you may need to have more control over the size of an element in a window. there are a number of features that allow you to control the size of an element. the quick way is to simply add the width and height attributes on an element, much like you might do on an html img tag. an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this. it is not very portable and may not fit in with some themes. a better way is to use style p...
...o make the box flexible also. then, when you make the window wider, extra space will be available, so the box will grow to fill the extra space. because the box is larger, more extra space will be created inside it, and the flexible button inside it will grow to fit the available space. this process repeats for as many nested boxes as necessary. setting minimum and maximum sizes you may want to allow an element to be flexible but constrain the size so that it cannot be larger than a certain size. or, you may want to set a minimum size. you can set this by using four attributes: minwidth; this specifies the minimum width that the element can be. minheight this specifies the minimum height that the element can be. maxwidth this specifies the maximum width that the element can be. maxhe...
... you may find the box alignment example useful for trying out the various box properties. cropping text and buttons you could potentially create a button element that contains a label that is larger than the maximum width of the button. of course, a solution would be to increase the size of the button. however, buttons (and other elements with a label) have a special attribute called crop that allows you to specify how the text may be cropped if it is too big. if the text is cropped, an ellipsis (...) will appear on the button where the text was taken out. four possible values are valid: left the text is cropped on its left side right the text is cropped on its right side center the text is cropped in the middle. none the text is not cropped. this is the default value. this attr...

List Controls - Archive of obsolete content
this is much like a regular row except that it is displayed differently. you would use this to create column headers. two new elements are used. the listhead element is used for the header rows, just as the listitem element is used for regular rows. the header row is not a normal row however, so using a script to get the first row in the list box will skip the hea...
... <listcell label="house painter" /> </listitem> <listitem> <listcell label="mary ellen" /> <listcell label="candle maker" /> </listitem> <listitem> <listcell label="roger" /> <listcell label="swashbuckler" /> </listitem> </listbox> in this example, the flex attribute is used to make the column flexible. this attribute will be described in a later section, but here it allows the column to fill all of the remaining space horizontally. you can resize the window to see that the column stretches as the window does. if you shrink the size horizontally, the labels on the cells will crop themselves automatically using an ellipsis. you can use the crop attribute on the cells or items set to the value none to disable the ellipsis. drop-down lists drop-down lists can be cre...
...our choices, one for each menuitem element. to show the choices, click the arrow button on the menulist. when one is selected, it appears as the choice in the menulist. the selected attribute is used to indicate the value that is selected by default. editable menulist by default, you can only select choices from the list. you cannot enter your own text by typing it in. a variant of the menulist allows editing the text in the field. for example, the url field in the browser has a drop-down for selecting previously typed urls, but you can also type them in yourself. to create an editable menulist, add the editable attribute as follows: example 6 : source view <menulist editable="true"> <menupopup> <menuitem label="www.mozilla.org" /> <menuitem label="www.xulplanet.com" /> <menuite...

Manifest Files - Archive of obsolete content
tivewrappers=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 content from different packages to combine together. extensions will make the most use of overlays, since they merge their ui with the browser ui. the file paths for the branding and browser packages use jar urls as the content is packaged up into an archive. a jar archive can be created with a zip utility. for a jar file located in the chrome directory, the syntax is fairly simple: jar:<filename...
...pi file is just a zip file with a different extension, so you can create and view xpi files with a zip utility. firefox's extension manager handles installing extensions packaged into xpi files automatically. it is recommended to upload extensions to the mozilla add-ons site, where users can locate them for installation. while they may be installed from any site, other sites are not configured to allow installations by default. it is also possible to use a install script written in javascript to install files. this allows you to copy files to any location and perform other file management tasks. however, applications installed with a script will not be listed in the extension manager and there is no automated method to uninstall them. for this reason, the install scripts are not used often. for...
...for more information about creating extensions, see extensions. for more information about xulrunner, see xulrunner. ...

Numeric Controls - Archive of obsolete content
viousnext » xul has two elements used for the entry of numeric values or ranges, and well as two elements for entering dates and times. these elements are only available in firefox 3 and later. number fields a textbox may be used for entering numbers by setting the value of the type attribute to the value number. this type of textbox may only be used to enter numbers. other characters are not allowed and are just ignored if typed. in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values. as with other textboxes, the default value can be specified with the value attribute. naturally, this value should be a number. however, the minimum and maximum values can also be specified using the min and max attributes. if these are set, you can control the ...
... indiciate a maximum possible value of 20. if the minimum value is not specified, it has a default value of 0. the maximum value defaults to the special value infinity which means that there is no limit. other numeric textbox attributes the increment attribute may be used to specify by how much the value changes when the arrows are pressed. the default value is 1, but specifying a different value allows the number to change by a larger amount. for instance, the following example steps in multiples of 10. <textbox type="number" increment="10" max="100"/> this textbox steps in multiples of 10 from 0 to 100. since the min attribute was not specified, it defaults to 0. note that the user can still enter other values if they are typed in. the increment attribute only affects the arrow buttons. the ...
...ault arrangement of a scale is horizontal with lower values to the left and higher values to the right. however, you can change this orientation with the orient and dir attributes. <scale orient="vertical" dir="reverse"/> this scale will be shown vertical with lower values at the bottom and higher values at the top. date and time entry fields the datepicker and timepicker elements may be used to allow the user to enter dates and times. when used, they display a set of numeric textboxes to enter each of the components of the date or time. <datepicker value="2004-03-24"/> <timepicker value="15:30:00"/> the value attribute is used to set the default value; if this attribute is omitted, the field will be initially set to the current date or time. the format of the attribute is exactly as abov...

Splitters - Archive of obsolete content
o have two sections of a window where the user can resize the sections. an example is the mozilla browser window, where you can change the size of the sidebar panel by dragging the bar in-between the two frames. you can also hide the sidebar by clicking the notch. splitter element this feature is accomplished using an element called a splitter. it creates a skinny bar between two sections which allows these sections to be resized. you can place a splitter anywhere you want and it will allow resizing of the elements that come before it and the elements that come after it in the same box. when a splitter is placed inside a horizontal box, it will allow resizing horizontally. when a splitter is placed inside a vertical box, it will allow resizing vertically. the syntax of a splitter is as foll...
...middle two panels have not changed size. only panel 1 and panel 4 have changed size. you can just see part of the fourth panel. if you continue to drag the splitter to the right, the other two panels will shrink. you can use the style properties such as min-width, max-height on the iframes to specify minimum or maximum widths or heights in the box. if you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes. for example, if you specified a minimum width of 30 pixels on panel 4 above, it would not shrink below that size. the other two panels would have to shrink. if you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at 60 pixels wide). you can still collaps...
...h case you could collapse different parts of it. similarly, you do not have to collapse just iframes. any element can be collapsed. our find files example let's see what the find file dialog looks like with a splitter in it. one possibility would be to add the results of the search in the dialog. we'll add an area in-between the search criteria and the buttons along the bottom. a splitter will allow you to collapse, or hide, the search results. </tabbox> <iframe src="results.html"/> <splitter collapse="before" resizeafter="grow"> <grippy/> </splitter> <hbox> here, a splitter and an iframe have been added to the dialog. we don't need the spacer after the tabbox any more so we can remove it. the content of the frame is contained in a file called 'results.html'. create this file an...

Using Remote XUL - Archive of obsolete content
introduction note: support for remote xul has long been a potential security concern; support for it was disabled in gecko 2.0. this also means you can't load xul using file:// urls unless you set the preference dom.allow_xul_xbl_for_file to true. however, there is a whitelist that lets you specify sites that can still use remote xul. ...
...ncern; support for it was disabled in gecko 2.0. this also means you can't load xul using file:// urls unless you set the preference dom.allow_xul_xbl_for_file to true. however, there is a whitelist that lets you specify sites that can still use remote xul. the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces. it contains elements for all c...
...ild a xul file along with this tutorial and put it onto a web server, you need to configure your web server to specify the content type of xul files as application/vnd.mozilla.xul+xml. for apache, you can do this by adding the following line to your mime.types file: application/vnd.mozilla.xul+xml .xul alternately, add this line to your httpd.conf file or, if the apache server is configured to allow it, to the .htaccess file in the directory from which the xul file is served: addtype application/vnd.mozilla.xul+xml .xul then restart your web server. with php you can send the mime-type with the header() function. <?php header('content-type: application/vnd.mozilla.xul+xml'); ?> <!-- xul markup starts here --> note that you don't need a web server for this tutorial; you can load the do...

Using the Editor from XUL - Archive of obsolete content
that causes the editoronload() javascript function to get executed when the xul is done loading. the xul contains an <editor> tag, e.g.: <editor type="content-primary" id="content-frame" src="about:blank" flex="1"/> the attribute type="content-primary" identifies this as the window content element, i.e. that which you get from window._content. having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to style it from css. editoronload() is called. it does some getting of window.arguments (which is a way callers can pass parameters to new windows -- we use this to get the url to be loaded), then it calls editorstartup(), where the real work happens. it passes two parameters; the first indicates whether we want...
...ad. note: these callbacks also fire for every subdocument that loads as a result of the parent document load, for example with frameset documents, or html documents with their own embedded <iframe>s. in this case, we need to be careful to instantiate the editor on the correct document. we are currently only able to have one editor per composer window; in future, relaxing this restriction would allow us to edit all the subdocuments in a frameset at the same time. we detect that the document we want to edit has loaded successfully in nseditorshell::onenddocumentload(). after checking that we can actually edit this document, we go ahead and instantiate an editor on it (in nseditorshell::preparedocumentforediting()). as well as making the editor (which happens via nseditorshell::doeditormo...
... via nseditorshell::doeditormode()) we also hook up various listeners and observers for ui updating and user interaction, and store a file specifier for the document we opened. the editor is now set up, and ready to go. one thing to note about editor initialization is that we pass into the editor's init() method an nsicontent* that corresponds to the root of the content tree that the editor is allowed to work with. when initializing the editor from the nseditorshell, we pass null here (which tells the editor that it can edit everything under the <body> of the document). this parameter is more important when the editor is in a text widget, where it points to the the subtree of the parent document that corresponds to widget content. editor teardown window destruction, and hence editor tea...

XUL Changes for Firefox 1.5 - Archive of obsolete content
reated with the <richlistitem> element may be selected. see xul:richlistbox for more information. preferences system several elements have been added which may be used for creating preference windows. these windows are special types of dialogs which support several panels, each of which may be contained in the same file or a separate file. a set of icons will appear across the top of the dialog allowing the user to switch panels. along with the new preference elements and some additional attributes for existing elements, they make it easy to set preferences without having to use code. for more information, see preferences system. bfcache mozilla now caches the page's dom, so that navigating back and forward does not reload the page, making navigation much more efficient. the pageshow and pa...
... on some platforms. for instance <button icon="help"> will create a button with a help icon. this is used typically on gnome systems where possible values are: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network. <menulist> items in a <menulist> support the description attribute to allow for extra descriptive text to appear beside an item's label. the menulist modification methods appenditem and insertitemat take an extra description argument when creating items this way. <listbox> the removeitemat method was sometime non zero-based due to a bug (bug 236068). this has been fixed in firefox 1.5 and all code depending on this non zero-based behaviour should be changed. <stringbu...
...ems this way. <listbox> the removeitemat method was sometime non zero-based due to a bug (bug 236068). this has been fixed in firefox 1.5 and all code depending on this non zero-based behaviour should be changed. <stringbundle> the <stringbundle> element has a strings property which may be used to retrieve an enumeration of all of the strings in the bundle. draggable tabs the tabbrowser now allows the user to rearrange tabs by dragging them. <tabbox> the <tabbox> element now supports a selectedindex attribute to specify the tab to be selected by default. loading overlays dynamically xul now supports loading overlays dynamically with the document.loadoverlay function. original document information author(s): neil deakin ...

XUL element attributes - Archive of obsolete content
d on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...
...ements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. class type: string the style class of the element. multiple classes may be specified by separating them with spaces. ...
...s a datasource to negate an earlier assertion. class type: string the style class of the element. multiple classes may be specified by separating them with spaces. coalesceduplicatearcs type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. collapsed type: boolean if true, then the element is collapsed and does not appear. it is equivalent to setting the css visibility property to collapse. container type: boolean set to true if the element is to act as a container which can have child elements. this would be used for folders. this will be set by the template builder ...

action - Archive of obsolete content
ariables in place of attribute values. variables are a question mark followed by a name. for a matched rule, each variable will be a reference to data within the datasource, determined from the query. if the same variable appears multiple times, it will have the same value in each place. for more information, see actions. ...
...lace of attribute values. variables are a question mark followed by a name. for a matched rule, each variable will be a reference to data within the datasource, determined from the query. if the same variable appears multiple times, it will have the same value in each place. for more information, see actions. ...
...ight, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventliste...

arrowscrollbox - Archive of obsolete content
flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortd...
...d. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. sm...
...ling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. ...

assign - Archive of obsolete content
ple needed) attributes expr type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...attributes expr type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

bbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

binding - Archive of obsolete content
ned within a bindings element. a binding is used to bind a variable to a node. like the triple element in syntax, it can be used to bind a particular property of a matched node to a particular variable name. that name can then be used within the action of a rule. ...
...bindings element. a binding is used to bind a variable to a node. like the triple element in syntax, it can be used to bind a particular property of a matched node to a particular variable name. that name can then be used within the action of a rule. ...
... width properties object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...

bindings - Archive of obsolete content
et of variable bindings for a rule. this element should be contained within a rule element and contain one or more binding elements. this element is optional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly inside the rule element. more information is available in the template guide. ...
...e bindings for a rule. this element should be contained within a rule element and contain one or more binding elements. this element is optional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly inside the rule element. more information is available in the template guide. ...
... object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...

box - Archive of obsolete content
ot overlap. the default orientation is horizontal. more information is available in the xul tutorial. ...
...he default orientation is horizontal. more information is available in the xul tutorial. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

broadcaster - Archive of obsolete content
utomatically. an onbroadcast event will be sent to the observers when a change is made. for menuitems or buttons that just want to have their disabled status set when the feature should be disabled, you should use a command element instead. more information is available in the broadcasters and observers xul tutorial. ...
... an onbroadcast event will be sent to the observers when a change is made. for menuitems or buttons that just want to have their disabled status set when the feature should be disabled, you should use a command element instead. more information is available in the broadcasters and observers xul tutorial. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

broadcasterset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element for broadcaster elements. the broadcasterset and its descendants are not displayed. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container element for broadcaster elements. the broadcasterset and its descendants are not displayed. more information is available in the xul tutorial. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

column - Archive of obsolete content
d in each successive cell of the grid. the column with the most child elements determines the number of rows in each column. it is common to use columns only to define width and flexibility for the grid column and not place elements directly inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...cessive cell of the grid. the column with the most child elements determines the number of rows in each column. it is common to use columns only to define width and flexibility for the grid column and not place elements directly inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

columns - Archive of obsolete content
lumns to appear in the grid. the columns element may be nested inside another columns element. other elements placed inside a columns element occupy the full height of the grid and are placed in their corresponding positions between the columns. more information about columns is available in the xul tutorial. example see grid for an example. ...
...ar in the grid. the columns element may be nested inside another columns element. other elements placed inside a columns element occupy the full height of the grid and are placed in their corresponding positions between the columns. more information about columns is available in the xul tutorial. example see grid for an example. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

conditions - Archive of obsolete content
n mark (?). when evaluating the rule for a particular rdf resource, the variables are replaced with values from the resource. if all variables can be replaced, the rule matched. this element is used with firefox 2/mozilla 1.8 and earlier instead of the query element. more information is available in the xul tutorial. ...
...hen evaluating the rule for a particular rdf resource, the variables are replaced with values from the resource. if all variables can be replaced, the rule matched. this element is used with firefox 2/mozilla 1.8 and earlier instead of the query element. more information is available in the xul tutorial. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

deck - Archive of obsolete content
x="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...cription value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...y assigning -1 to this property, all items will be deselected. returns -1 if no items are selected do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...

dropmarker - Archive of obsolete content
a dropmarker is a button with an arrow which will reveal more details when pressed. a dropmarker is not intended to be used as a separate element, but as part of another element. for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...er is a button with an arrow which will reveal more details when pressed. a dropmarker is not intended to be used as a separate element, but as part of another element. for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...rdinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, 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. ...

grippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that may be used inside a splitter which can be used to collapse a sibling element of the splitter. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] an element that may be used inside a splitter which can be used to collapse a sibling element of the splitter. more information is available in the xul tutorial. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...

groupbox - Archive of obsolete content
for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
..., only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...rdinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, 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. ...

hbox - Archive of obsolete content
elated ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizontal orientation. more information is available in the xul tutorial. ...
...container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizontal orientation. more information is available in the xul tutorial. ...
...ght, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlist...