Search completed in 2.54 seconds.
4360 results for "source":
Your results are loading. Please wait...
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
WebHTMLElementsource
the html <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element.
... the source for this interactive example is stored in a github repository.
... implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlsourceelement attributes this element includes the global attributes.
...And 19 more matches
MediaSource.addSourceBuffer() - Web APIs
the addsourcebuffer() method of the mediasource interface creates a new sourcebuffer of the given mime type and adds it to the mediasource's sourcebuffers list.
... the new sourcebuffer is also returned.
... syntax var sourcebuffer = mediasource.addsourcebuffer(mimetype); parameters mimetype a domstring specifying the mime type of the sourcebuffer to create and add to the mediasource.
...And 6 more matches
RTCRtpContributingSource.source - Web APIs
the read-only source property of the rtcrtpcontributingsource interface returns the source identifier of a particular stream of rtp packets.
... the value is the contributing source (csrc) or synchronization source (ssrc) identifier, depending on whether the object is an rtcrtpcontributingsource or rtcrtpsynchronizationsource, which is based on the former.
... syntax var sourceid = rtcrtpcontributingsource.source value an unsigned, 32-bit integer value which uniquely identifies the source of rtp packets described by this rtcrtpcontributingsource (in which case the value is a csrc identifier) or rtcrtpsynchronizationsource (the value is an ssrc identifier).
...And 3 more matches
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
the audiobuffersourcenode() constructor creates a new audiobuffersourcenode object instance.
... syntax var audiobuffersourcenode = new audiobuffersourcenode(context, options) parameters inherits parameters from the audionodeoptions dictionary.
... return value a new audiobuffersourcenode object instance.
...And 2 more matches
XRInputSourceEventInit.inputSource - Web APIs
the xrinputsourceeventinit dictionary's inputsource property is used when calling the xrinputsourceevent() constructor to specify the xrinputsource from which the newly-created event is being sent.
... of course, as a general rule, you won't need to create xrinputsourceeventinit objects yourself.
... syntax let xrinputsourceeventinit.inputsource = xrinputsource; let xrinputsourceeventinit = { inputsource: xrinputsource }; let xrinputsourceevent = new xrinputsourceevent(type, { inputsource: xrinputsource }); value an xrinputsource object indicating the source of the newly-created xrinputsourceevent to be created.
...And 2 more matches
MediaSource.activeSourceBuffers - Web APIs
the activesourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
... syntax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active tracks.
... 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(asseturl, 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(buf); }); }; ...
... specifications specification status comment media source extensionsthe definition of 'activesourcebuffers' in that specification.
MediaSource.removeSourceBuffer() - Web APIs
the removesourcebuffer() method of the mediasource interface removes the given sourcebuffer from the sourcebuffers list associated with this mediasource object.
... syntax mediasource.removesourcebuffer(sourcebuffer); parameters sourcebuffer the sourcebuffer object to be removed.
... return value undefined exceptions exception explanation notfounderror the supplied sourcebuffer doesn't exist in mediasource.sourcebuffers.
... examples for (i = 0; i < 10; i++) { var sourcebuffer = mediasource.addsourcebuffer(mimecodec); } mediasource.removesourcebuffer(mediasource.sourcebuffers[0]); specifications specification status comment media source extensionsthe definition of 'removesourcebuffer()' in that specification.
MediaSource.sourceBuffers - Web APIs
the sourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing the list of sourcebuffer objects associated with this mediasource.
... syntax var mysourcebuffers = mediasource.sourcebuffers; value a sourcebufferlist.
... 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(asseturl, 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); }); }; ...
... specifications specification status comment media source extensionsthe definition of 'sourcebuffers' in that specification.
XRInputSourceEvent.inputSource - Web APIs
the xrinputsourceevent interface's read-only inputsource property specifies the xrinputsource which generated the input event.
... syntax let inputsource = xrinputsourceevent.inputsource; value an xrinputsource object identifying the source of the user input event.
...the device type is identified by looking at the xrinputsource in inputsource and its targetraymode property.
... xrsession.onselect = event => { let source = event.inputsource; if (source.targetraymode == "gaze") { /* handle selection using a gaze input */ } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.inputsource' in that specification.
MediaSource.MediaSource() - Web APIs
the mediasource() constructor of the mediasource interface constructs and returns a new mediasource object with no associated source buffers.
... syntax var mediasource = new mediasource(); parameters none.
... 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 asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } ...
Inputs and input sources - Web APIs
in this guide, we'll look at how to use webxr's input device management features to determine what input sources are available and how to then monitor those sources for inputs in order to handle user interactivity with your virtual or augmented environment.
... motion-sensing controllers, which use accelerometers, magnetometers, and other sensors for motion tracking and targeting and may additionally include any number of buttons, joysticks, thumbpads, touchpads, force sensors, and so on to provide additional input sources for both targeting and selection.
... spatially-tracked articulated hands, such as haptic gloves can provide both targeting and squeeze actions, as well as selection if outfitted with buttons or other sources of selection actions.
...And 63 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
appendix: what you should know about open-source software licenses draft this page is not complete.
... any discussion of open-source software deserves an explanation of licensing-related issues.
... in this chapter, i’ll explain some of the basics: what open-source software (oss) licenses are, what types of licenses exist, and when they’re appropriate.
...And 52 more matches
RDF Datasource How-To - Archive of obsolete content
this document is a cookbook that describes how to create a native, client-side datasource that works with mozilla's rdf implementation.
...what is a datasource?
... the "rdf universe" consists of a set of statements about internet resources; for example, "my home page was last modified april 2nd", or "that news article was sent by bob".
...And 39 more matches
Using the Resource Timing API - Web APIs
the resource timing api provides a way to retrieve and analyze detailed network timing data regarding the loading of an application's resource(s).
... an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.).
... the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc.
...And 38 more matches
SourceMap.jsm
get a reference to the module: let sourcemap = {}; components.utils.import('resource:///modules/devtools/sourcemap.jsm', sourcemap); sourcemapconsumer a sourcemapconsumer instance represents a parsed source map which we can query for information about the original file positions by giving it a file position in the generated source.
... new sourcemapconsumer(rawsourcemap) the only parameter is the raw source map (either as a string which can be json.parse'd, or an object).
... according to the spec, source maps have the following attributes: version: which version of the source map spec this map is following.
...And 35 more matches
Debugger.Source - Firefox Developer Tools
debugger.source a debugger.source instance represents either a piece of javascript source code or the serialized text of a block of webassembly code.
... each debugger instance has a separate collection of debugger.source instances representing the source code that has been presented to the system.
... a debugger may place its own properties on debugger.source instances, to store metadata about particular pieces of source code.
...And 34 more matches
source-editor.jsm
the source-editor.jsm javascript code module implements an editor specifically tailored for editing source code; its primary purpose is to provide support for web developer tools to display and edit web site code.
... to use it, you first need to import the code module into your javascript scope: components.utils.import("resource:///modules/source-editor.jsm"); warning: much of the functionality of the source editor is implemented by a secondary code module (by default, source-editor-orion.jsm).
...its functionality is all exposed through source-editor.jsm.
...And 31 more matches
PerformanceResourceTiming - Web APIs
the performanceresourcetiming interface enables retrieval and analysis of detailed network timing data regarding the loading of an application's resources.
... an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script.
... the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc..
...And 28 more matches
SourceBuffer - Web APIs
the sourcebuffer interface represents a chunk of media to be passed into an htmlmediaelement and played, via a mediasource object.
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.a...
... sourcebuffer.appendwindowstart controls the timestamp for the start of the append window.
...And 28 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
the html external resource link element (<link>) specifies relationships between the current document and an external resource.
... the source for this interactive example is stored in a github repository.
... link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked.
...And 28 more matches
RDF Datasources - Archive of obsolete content
« previousnext » here, we'll look at additional datasources and how to use your own rdf files as datasources.
... other mozilla datasources mozilla provides a number of other built-in datasources.
...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.
...And 25 more matches
Resource Timing API - Web APIs
the resource timing interfaces enable retrieving and analyzing detailed network timing data regarding the loading of an application's resource(s).
... an application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script.
... the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, dns lookup start and end times, request start, response start and end times, etc.
...And 24 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.
... a web application executes a cross-origin http request when it requests a resource that has a different origin (domain, protocol, or port) from its own.
...this means that a web application using those apis can only request resources from the same origin the application was loaded from unless the response from other origins includes the right cors headers.
...And 20 more matches
Source code directories overview - Archive of obsolete content
this document is a guide for developers to the directory structure of the mozilla source code tree.
... it gives a bird's eye view of the source code so a developer can get a good idea what is in mozilla and where to find things.
... it is a living document which is (supposed to be) updated monthly according to changes in the mozilla source tree.
...And 19 more matches
AudioBufferSourceNode - Web APIs
the audiobuffersourcenode interface is an audioscheduledsourcenode which represents an audio source consisting of in-memory audio data, stored in an audiobuffer.
...#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y...
...1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
...And 18 more matches
EventSource - Web APIs
the eventsource interface is web content's interface to server-sent events.
... an eventsource instance opens a persistent connection to an http server, which sends events in text/event-stream format.
... the connection remains open until closed by calling eventsource.close().
...And 17 more matches
nsIDOMOfflineResourceList
the nsidomofflineresourcelist interface provides access to the application cache that allows web content's resources to be cached locally for use while offline.
... it includes methods for adding resources to and removing resources from the cache, as well as for enumerating the dynamically managed resource list.
... dom/interfaces/offline/nsidomofflineresourcelist.idlscriptable please add a summary to this article.
...And 15 more matches
ConstantSourceNode - Web APIs
the constantsourcenode interface—part of the web audio api—represents an audio source (based upon audioscheduledsourcenode) whose output is single unchanging value.
... this makes it useful for cases in which you need a constant value coming in from an audio source.
... in addition, it can be used like a constructible audioparam by automating the value of its offset or by connecting another node to it; see controlling multiple parameters with constantsourcenode.
...And 15 more matches
MediaSource - Web APIs
the mediasource interface of the media source extensions api represents a source of media data for an htmlmediaelement object.
... a mediasource object can be attached to a htmlmediaelement to be played in the user agent.
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() const...
...And 15 more matches
MediaStreamAudioSourceNode - Web APIs
the mediastreamaudiosourcenode interface is a type of audionode which operates as an audio source whose media is received from a mediastream obtained using the webrtc or media capture and streams apis.
... a mediastreamaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediastreamsource() method.
... the mediastreamaudiosourcenode takes the audio from the first mediastreamtrack whose kind attribute's value is audio.
...And 15 more matches
Identifying resources on the Web - HTTP
the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
... each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources.
... the identity and the location of resources on the web are mostly given by a single url (uniform resource locator, a kind of uri).
...And 15 more matches
Object.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
... syntax object.tosource(); obj.tosource(); return value a string representing the source code of the object.
... description the tosource() method returns the following values: for the built-in object object, tosource() returns the following string indicating that the source code is not available: function object() { [native code] } for instances of object, tosource() returns a string representing the source code.
...And 15 more matches
Navigation and resource timings - Web Performance
resource timings are detailed network timing measurements regarding the loading of an application's resources.
... both provide the same read-only properties, but navigation timing measures the main document's timings whereas the resource timing provides the times for all the assets or resources called in by that main document and the resources' requested resources.
... the general performance timings below have been deprecated in favor of the performance entry api, which provides for marking and measuring times along the navigation and resource loading process.
...And 14 more matches
Source Navigator - Archive of obsolete content
;) --kennykaiyinyu 19:04, 10 june 2008 (pdt) what is source-navigator?
... (quoted from the internet) source-navigator is a source code analysis tool which lets users to edit, browse and build their projects.
... with it, you can edit your source code, display relationships between classes and functions and members, and display call trees.
...And 13 more matches
Source map errors - Firefox Developer Tools
source maps are json files providing a way to associate transformed sources, as seen by the browser, with their original sources, as written by the developer.
... you can sometimes encounter problems working with source maps.
... note: if you're new to source maps, you can learn more about them in how to use a source map.
...And 12 more matches
Aggregating the In-Memory Datasource
introduction you can use xpcom aggregation1 with the in-memory datasource.
...say you were writing a datasource2, and the way you chose to implement it was to "wrap" the in-memory datasource; i.e., myclass : public nsimyinterface, public nsirdfdatasource { private: nscomptr<nsirdfdatasource> minner; public: // nsirdfdatasource methods ns_imethod init(const char* auri) { return minner->init(auri); } ns_imethod geturi(char* *auri) { return minner->geturi(auri); } // etc., for each method in nsirdfdatasource!
... when it won't work although this magic is terribly convenient to use, it won't work in the case that you want to "override" some of the in-memory datasource's methods.
...And 11 more matches
Media Source API - Web APIs
the media source api, formally known as media source extensions (mse), provides functionality enabling plugin-free web-based streaming media.
... media source extensions concepts and usage playing video and audio has been available in web applications without plugins for a few years now, but the basic features offered have really only been useful for playing single whole tracks.
... the mse standard with media source extensions (mse), this is changing.
...And 11 more matches
View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/javascript" src="chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the window that imports that script.
... method overview gviewsourceutils exposes several methods, but the only one you should be using directly is the viewsource method.
... void viewsource(aobject); methods viewsource opens a viewer to the source code for some document or uri.
...And 10 more matches
View Source - Firefox Developer Tools
view source lets you look at the html or xml source for the page you're viewing.
... to activate view source: context-click in the page and select view page source press ctrl + u on windows and linux, or cmd + u on macos the command opens a new tab with the source for the current page.
... view source features view source has three additional features, which can be accessed from the context menu in the view source tab: go to line scrolls to the specified line.
...And 10 more matches
MediaStreamTrackAudioSourceNode - Web APIs
the mediastreamtrackaudiosourcenode interface is a type of audionode which represents a source of audio data taken from a specific mediastreamtrack obtained through the webrtc or media capture and streams apis.
... a mediastreamtrackaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediastreamtracksource() method.
... this interface is similar to mediastreamaudiosourcenode, except it lets you specifically state the track to use, rather than assuming the first audio track on a stream.
...And 10 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
this article demonstrates how to use a constantsourcenode to link multiple parameters together so they share the same value, which can be changed by simply setting the value of the constantsourcenode.offset parameter.
... the solution is simple, and it involves using an audio node type which, at first glance, doesn't look all that useful: constantsourcenode.
...you simply need to create a constantsourcenode and connect it to all of the audioparams whose values should be linked to always match each other.
...And 10 more matches
XRInputSourceEvent - Web APIs
the webxr device api's xrinputsourceevent interface describes an event which has occurred on a webxr user input device such as a hand controller, gaze tracking system, or motion tracking system.
... more specifically, they represent a change in the state of an xrinputsource.
... to learn more about handling inputs in a webxr project, see the article inputs and input sources.
...And 10 more matches
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.
... in this article, we focus on resource uris, which are used internally by firefox to point to built-in resources.
...And 10 more matches
Subresource Integrity - Web security
subresource integrity (sri) is a security feature that enables browsers to verify that resources they fetch (for example, from a cdn) are delivered without unexpected manipulation.
... it works by allowing you to provide a cryptographic hash that a fetched resource must match.
... note: for subresource-integrity verification of a resource served from an origin other than the document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin.
...And 10 more matches
Using the Mozilla source server
using the mozilla source server is now even more feature-packed.
... the nightly debug builds are now also source indexed so that by following a couple of simple steps you can also have the source code served to you for debugging without a local build what you'll need windbg or visual studio (note: express editions will not work, but windbg is a free download) a nightly build that was created after april 15, 2008; go to the /pub/firefox/nightly/latest-mozilla-central/ folder and grab the installer for builds predating the switch to mercurial, you'll need cvs.exe, added to your path (the cvs.exe from mozillabuild has problems, use this one instead) note: do not use the cvs from mozillabuild, it will not work!
...once the symbol path is set you must now enable source server.
...And 9 more matches
AudioContext.createMediaStreamSource() - Web APIs
the createmediastreamsource() method of the audiocontext interface is used to create a new mediastreamaudiosourcenode object, given a media stream (say, from a mediadevices.getusermedia instance), the audio from which can then be played and manipulated.
... for more details about media stream audio source nodes, check out the mediastreamaudiosourcenode reference page.
... syntax audiosourcenode = audiocontext.createmediastreamsource(stream); parameters stream a mediastream to serve as an audio source to be fed into an audio processing graph for use and manipulation.
...And 8 more matches
MediaElementAudioSourceNode - Web APIs
the mediaelementaudiosourcenode interface represents an audio source consisting of an html5 <audio> or <video> element.
... it is an audionode that acts as an audio source.
... a mediaelementsourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediaelementsource() method.
...And 8 more matches
XRInputSourceArray - Web APIs
the interface xrinputsourcearray represents a live list of webxr input sources, and is used as the return value of the xrsession property inputsources.
... each entry is an xrinputsource representing one input device connected to the webxr system.
... in addition to being able to access the input sources in the list using standard array notation (that is, with index numbers insize square brackets), methods are available to allow the use of iterators and the foreach() method is also available.
...And 8 more matches
XRInputSourceEvent() - Web APIs
the xrinputsourceevent() constructor creates and returns a new xrinputsourceevent object describing an event (state change) which has occurred on a webxr user input device represented by an xrinputsource.
... syntax newinputsourceevent = new xrinputsourceevent(type, eventinitdict); parameters type a domstring indicating which of the input source events the new object will represent.
... eventinitdict an object based on the xrinputsourceeventinit dictionary which contains the values to assign to the new event's properties.
...And 8 more matches
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
the javascript warning "using //@ to indicate sourceurl pragmas is deprecated.
... use //# instead" occurs when there is a deprecated source map syntax in a javascript source.
... message warning: syntaxerror: using //@ to indicate sourceurl pragmas is deprecated.
...And 8 more matches
externalResourcesRequired - SVG: Scalable Vector Graphics
the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element.
... this attribute applies to all types of resource references, including style sheets, color profiles and fonts specified by a reference using a <font-face> element or a css @font-face specification.
... in particular, if an element sets externalresourcesrequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element.
...And 8 more matches
SourceBuffer.mode - Web APIs
WebAPISourceBuffermode
the mode property of the sourcebuffer interface controls whether media segments can be appended to the sourcebuffer in any order, or in a strict sequence.
...the segments can be appended to the sourcebuffer in any order.
... sequence: the order in which the segments are appended to the sourcebuffer determines the order in which they are played.
...And 7 more matches
XRInputSource - Web APIs
the webxr device api's xrinputsource interface describes a single source of control input which is part of the user's webxr-compatible virtual or augmented reality system.
... properties gamepad read only a gamepad object describing the state of the buttons and axes on the xr input source, if it is a gamepad or comparable device.
... note: while xrinputsource uses the gamepad interface from the gamepad api, this input device is strictly associated with the webxr hardware and is not a general-purpose gaming device.
...And 7 more matches
XRInputSourcesChangeEvent - Web APIs
the webxr device api interface xrinputsourceschangeevent is used to represent the inputsourceschange event sent to an xrsession when the set of available webxr input controllers changes.
... constructor xrinputsourceschangeevent() creates and returns a new xrinputsourceschangeevent object configured as indicated by the given xrinputsourceschangeeventinit object.
... the specified type must be inputsourceschange, which is the only event that uses this interface.
...And 7 more matches
datasources - Archive of obsolete content
« xul reference home datasources type: space separated list of datasource uris a space-separated list of datasources that an element's template will use for content generation.
... these can be either internal datasources such as rdf:bookmarks or a url.
... the datasources attribute may be placed on most elements, although it will usually be found on trees and menu related elements.
...And 6 more matches
Links and Resources
here are some useful links for those interested in web accessibility as well as open source accessibility.
... guidelines & standards information and resources on section 508 - legal policy for us government purchases requiring software accessibility.
... accessibility information resource center for developers at adobe - flash mx accessibility, pdf document accessibility and actionscript accessibility.
...And 6 more matches
nsIDOMHTMLSourceElement
the nsidomhtmlsourceelement interface is the dom interface to the source child of the audio and video media elements in html.
... dom/interfaces/html/nsidomhtmlsourceelement.idlscriptable please add a summary to this article.
... last changed in gecko 1.9.1.2 inherits from: nsidomhtmlelement the source element allows authors to specify multiple media resources for media elements.
...And 6 more matches
AudioContext.createMediaElementSource() - Web APIs
the createmediaelementsource() method of the audiocontext interface is used to create a new mediaelementaudiosourcenode object, given an existing html <audio> or <video> element, the audio from which can then be played and manipulated.
... for more details about media element audio source nodes, check out the mediaelementaudiosourcenode reference page.
... syntax var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); parameters mymediaelement an htmlmediaelement object that you want to feed into an audio processing graph to manipulate.
...And 6 more matches
HTMLSourceElement - Web APIs
the htmlsourceelement interface provides special properties (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating <source> elements.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits ...
... htmlsourceelement.media is a domstring reflecting the media html attribute, containing the intended type of the media resource.
...And 6 more matches
MouseEvent.mozInputSource - Web APIs
the mouseevent.mozinputsource read-only property on mouseevent provides information indicating the type of device that generated the event.
... syntax var source = instanceofmouseevent.mozinputsource; return value the following values are possible.
... constant name value desription moz_source_unknown 0 the input device is unknown.
...And 6 more matches
SourceBufferList - Web APIs
the sourcebufferlist interface represents a simple container list for multiple sourcebuffer objects.
... the source buffer list containing the sourcebuffers appended to a particular mediasource can be retrieved using the mediasource.sourcebuffers property.
... the individual source buffers can be accessed using array operator (i.e.
...And 6 more matches
Cross-Origin Resource Policy (CORP) - HTTP
cross-origin resource policy is a policy set by the cross-origin-resource-policy http header that lets web sites and applications opt in to protection against certain requests from other origins (such as those issued with elements like <script> and <img>), to mitigate speculative side-channel attacks, like spectre, as well as cross-site script inclusion attacks.
...cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to prevent some cross-origin reads by default.
... in response, chromium shipped cross-origin read blocking, which automatically protects certain resources (of content-type html, json and xml) against cross-origin reads.
...And 6 more matches
Ember resources and troubleshooting - Learn web development
previous overview: client-side javascript frameworks next our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
... objective: to provide further resource links and troubleshooting information.
... further resources ember.js guides tutorial: super rentals ember.js api documentation ember.js discord server — a forum/chat server where you can meet the ember community, ask for help, and help others!
...And 5 more matches
Use a source map - Firefox Developer Tools
the javascript sources executed by the browser are often transformed in some way from the original sources created by a developer.
... for example: sources are often combined and minified to make delivering them from the server more efficient.
... in these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded.
...And 5 more matches
AudioContext.createMediaStreamTrackSource() - Web APIs
the createmediastreamtracksource() method of the audiocontext interface creates and returns a mediastreamtrackaudiosourcenode which represents an audio source whose data comes from the specified mediastreamtrack.
... this differs from createmediastreamsource(), which creates a mediastreamaudiosourcenode whose audio comes from the audio track in a specified mediastream whose id is first, lexicographically (alphabetically).
... syntax var audioctx = new audiocontext(); var track = audioctx.createmediastreamtracksource(track); parameters track the mediastreamtrack to use as the source of all audio data for the new node.
...And 5 more matches
MediaStreamAudioSourceNode() - Web APIs
the web audio api's mediastreamaudiosourcenode() constructor creates and returns a new mediastreamaudiosourcenode object which uses the first audio track of a given mediastream as its source.
... note: another way to create a mediastreamaudiosourcenode is to call theaudiocontext.createmediastreamsource() method, specifying the stream from which you want to obtain audio.
... syntax audiosourcenode = new mediastreamaudiosourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with.
...And 5 more matches
SourceBuffer.abort() - Web APIs
the abort() method of the sourcebuffer interface aborts the current segment and resets the segment parser.
... syntax sourcebuffer.abort(); parameters none.
... exceptions exception explanation invalidstateerror the mediasource.readystate property of the parent media source is not equal to open, or this sourcebuffer has been removed from the mediasource.
...And 5 more matches
XRInputSourcesChangeEvent() - Web APIs
the xrinputsourceschangeevent() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available webxr input devices.
... syntax newinputsourceschangeevent = new xrinputsourceschangeevent(type, eventinitdict); parameters type a domstring indicating the type of event which has occurred.
... this string must always be inputsourceschange.
...And 5 more matches
Setting up adaptive streaming media sources - Developer guides
let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an html5 media element.
...in your video source (src) attribute you point to the mpd instead of to the media file as you would with non-adaptive media.
... <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback for browsers that don't yet support mpeg-dash: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> live profile a useful piece of software when dealing with mpeg-dash is dash encoder.
...And 5 more matches
JS::SourceBufferHolder
this article covers features introduced in spidermonkey 31 container class for passing in script source buffers to the js engine.
... constructor enum ownership { noownership, giveownership }; js::sourcebufferholder(const char16_t *data, size_t datalength, ownership ownership); name type description data const char16_t * source buffer containing the script to compile.
... description js::sourcebufferholder is the container class for passing in script source buffers to the js engine.
...And 4 more matches
AudioBufferSourceNode.playbackRate - Web APIs
the playbackrate property of the audiobuffersourcenode interface is a k-rate audioparam that defines the speed at which the audio asset will be played.
...when set to another value, the audiobuffersourcenode resamples the audio before sending it to the output.
... syntax audiobuffersourcenode.playbackrate.value = playbackrateproportion; value an audioparam whose value is a floating-point value indicating the playback rate of the audio as a decimal proportion of the original sampling rate.
...And 4 more matches
IDBRequest.source - Web APIs
WebAPIIDBRequestsource
the source read-only property of the idbrequest interface returns the source of the request, such as an index or an object store.
... if no source exists (such as when calling indexeddb.open), it returns null.
... syntax var idbindex = request.source; var idbcursor = request.source; var idbobjectstore = request.source; value an object representing the source of the request, such as an idbindex, idbobjectstore or idbcursor.
...And 4 more matches
MediaSource.readyState - Web APIs
the readystate read-only property of the mediasource interface returns an enum representing the state of the current mediasource.
... the three possible values are: closed: the source is not currently attached to a media element.
... open: the source is attached to a media element and ready to receive sourcebuffer objects.
...And 4 more matches
MediaStreamTrackAudioSourceNode() - Web APIs
the web audio api's mediastreamtrackaudiosourcenode() constructor creates and returns a new mediastreamtrackaudiosourcenode object whose audio is taken from the mediastreamtrack specified in the given options object.
... another way to create a mediastreamtrackaudiosourcenode is to call theaudiocontext.createmediastreamtracksource() method, specifying the mediastreamtrack from which you want to obtain audio.
... syntax audiotracknode = new mediastreamtrackaudiosourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with.
...And 4 more matches
msPlayToSource - Web APIs
msplaytosource is a read-only property which gets the source associated with the media element for use by the playtomanager.
... syntax ptr = object.msplaytosource; value playto is a means through which an app can connect local playback/display for audio, video, and img elements to a remote device.
... msplaytosource is used in the sourcerequested handler -- get the playtosource object from an audio, video, or img element using the msplaytosource property and pass it to e.setsource, then set the playtosource.next property to the msplaytosource of another element for continual playing.
...And 4 more matches
RTCRtpReceiver.getSynchronizationSources() - Web APIs
the getsynchronizationsources() method of the rtcrtpreceiver interface returns an array of rtcrtpcontributingsource instances, each corresponding to one ssrc (synchronization source) identifier received by the current rtcrtpreceiver in the last ten seconds.
... syntax var rtcrtpcontributingsources = rtcrtpreceiver.getcontributingsources() parameters none.
... return value an array of rtcrtpsynchronizationsource instances.
...And 4 more matches
SourceBuffer.remove() - Web APIs
the remove() method of the sourcebuffer interface removes media segments within a specific time range from the sourcebuffer.
... this method can only be called when sourcebuffer.updating equals false.
... if sourcebuffer.updating is not equal to false, call sourcebuffer.abort().
...And 4 more matches
XRInputSource.handedness - Web APIs
the read-only xrinputsource property handedness indicates which of the user's hands the webxr input source is associated with, or if it's not associated with a hand at all.
... syntax let hand = xrinputsource.handedness; value a domstring indicating whether the input controller is held in one of the user's hands, and if it is, which hand.
... usage notes if the input source is not a device associated with a user's hand (whether by being held, attached, or worn), the value of handedness is none.
...And 4 more matches
XRInputSource.targetRaySpace - Web APIs
the read-only xrinputsource property targetrayspace returns an xrspace (typically an xrreferencespace) representing the position and orientation of the target ray in the virtual space.
...these values, interpreted in the context of the input source's targetraymode, can be used both to fully interpret the device as an input source.
... syntax let targetrayspace = xrinputsource.targetrayspace; value an xrspace object—typically an xrreferencespace or xrboundedreferencespace—which represents the position and orientation of the input controller's target ray in virtual space.
...And 4 more matches
Warning: -file- is being assigned a //# sourceMappingURL, but already has one - JavaScript
the javascript warning "-file- is being assigned a //# sourcemappingurl, 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 //# sourcemappingurl, but already has one.
... a source map has been specified more than once for a given javascript source.
...And 4 more matches
RDF: Resource Description Framework for metadata - Archive of obsolete content
ArchiveWebRDF
resource description framework (rdf) is a family of specifications for a metadata model that is often implemented as an application of xml.
... the rdf metadata model is based upon the idea of making statements about resources in the form of a subject-predicate-object expression, called a triple in rdf terminology.
... the subject is the resource, the "thing" being described.
...And 3 more matches
Getting SpiderMonkey source code
you can get the spidermonkey source code in gzipped form or directly from the mercurial repository.
... 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.
... getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources.
...And 3 more matches
JS_GetRegExpSource
this article covers features introduced in spidermonkey 17 get the source string of the given regexp object.
... syntax jsstring * js_getregexpsource(jscontext *cx, js::handleobject obj); name type description cx jscontext * a context.
... obj js::handleobject the object to get the source string.
...And 3 more matches
Ignore a source - Firefox Developer Tools
however, you can tell the debugger to ignore the details of selected sources.
... you can enable or disable ignoring a source file in a couple of ways: in the source list pane, right-click the filename and choose ignore source (or unignore source).
... if the source file is displayed in the source pane, click the "eye" icon at the bottom.
...And 3 more matches
AudioBufferSourceNode.loopEnd - Web APIs
the loopend property of the audiobuffersourcenode interface specifies is a floating point number specifying, in seconds, at what offset into playing the audiobuffer playback should loop back to the time indicated by the loopstart property.
... syntax audiobuffersourcenode.loopend = endoffsetinseconds; var endoffsetinseconds = audiobuffersourcenode.loopend; value a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop will loop return to the beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart).
... example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode.
...And 3 more matches
AudioBufferSourceNode.loopStart - Web APIs
the loopstart property of the audiobuffersourcenode interface is a floating-point value indicating, in seconds, where in the audiobuffer the restart of the play must happen.
... syntax audiobuffersourcenode.loopstart = startoffsetinseconds; startoffsetinseconds = audiobuffersourcenode.loopstart; value a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop should begin during playback.
... example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode.
...And 3 more matches
AudioScheduledSourceNode - Web APIs
the audioscheduledsourcenode interface—part of the web audio api—is a parent interface for several types of audio source node interfaces which share the ability to be started and stopped, optionally at specified times.
... you can't create an audioscheduledsourcenode object directly.
... instead, use the interface which extends it, such as audiobuffersourcenode, oscillatornode, and constantsourcenode.
...And 3 more matches
BaseAudioContext.createBufferSource() - Web APIs
the createbuffersource() method of the baseaudiocontext interface is used to create a new audiobuffersourcenode, which can be used to play audio data contained within an audiobuffer object.
... syntax var source = baseaudiocontext.createbuffersource(); returns an audiobuffersourcenode.
... example in this example, we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode.
...And 3 more matches
ConstantSourceNode() - Web APIs
the constantsourcenode() constructor creates a new constantsourcenode object instance, representing an audio source which constantly outputs samples whose values are always the same.
... syntax var constantsourcenode = new constantsourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with.
... options a constantsourceoptions dictionary object defining the properties you want the constantsourcenode to have: offset: a read-only audioparam specifying the constant value generated by the source.
...And 3 more matches
ConstantSourceNode.offset - Web APIs
the read-only offset property of the constantsourcenode interface returns a audioparam object indicating the numeric a-rate value which is always returned by the source when asked for the next sample.
...so you can change the value of offset by setting the value of constantsourcenode.offset.value: myconstantsourcenode.offset.value = newvalue; syntax let offsetparameter = constantaudionode.offset; let offset = constantsourcenode.offset.value; constantsourcenode.offset.value = newvalue; value an audioparam object indicating the a-rate value returned for every sample by this node.
... example this example shows how to set up a constantsourcenode so its offset is used as the input to a pair of gainnodes; this snippet is derived from the complete example you can find in controlling multiple parameters with constantsourcenode.
...And 3 more matches
IDBCursor.source - Web APIs
WebAPIIDBCursorsource
the source read-only property of the idbcursor interface returns the idbobjectstore or idbindex that the cursor is iterating over.
... syntax var source = cursor.source; value the idbobjectstore or idbindex that the cursor is iterating over.
...within each iteration we log the source of the cursor, which will log our idbobjectstore object to the console, something like this: idbobjectstore {autoincrement: false, transaction: idbtransaction, indexnames: domstringlist, keypath: "albumtitle", name: "rushalbumlist"…} the cursor does not require us to select the data based on a key; we can just grab all of it.
...And 3 more matches
MediaSource.setLiveSeekableRange() - Web APIs
the setliveseekablerange() method of the mediasource interface sets the range that the user can seek to in the media element.
... syntax mediasource.setliveseekablerange(start, end) parameters start the start of the seekable range to set in seconds measured from the beginning of the source.
... if the duration of the media source is positive infinity, then the timeranges object returned by the htmlmediaelement.seekable property will have a start timestamp no greater than this value.
...And 3 more matches
MediaStreamAudioSourceNode.mediaStream - Web APIs
the mediastreamaudiosourcenode interface's read-only mediastream property indicates the mediastream that contains the audio track from which the node is receiving audio.
... this stream was specified when the node was first created, either using the mediastreamaudiosourcenode() constructor or the audiocontext.createmediastreamsource() method.
... syntax audiosourcestream = mediastreamaudiosourcenode.mediastream; value a mediastream representing the stream which contains the mediastreamtrack serving as the source of audio for the node.
...And 3 more matches
performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry type objects.
... a browser's recommended resource timing buffer size is at least 150 performance entry objects.
... syntax performance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer.
...And 3 more matches
PerformanceResourceTiming.fetchStart - Web APIs
the fetchstart read-only property represents a timestamp immediately before the browser starts to fetch the resource.
... if there are http redirects the property returns the time immediately before the user agent starts to fetch the final resource in the redirection.
... syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource.
...And 3 more matches
PerformanceResourceTiming.workerStart - Web APIs
the workerstart read-only property of the performanceresourcetiming interface returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running.
... if the resource is not intercepted by a service worker the property will always return 0.
... syntax resource.workerstart; value a domhighrestimestamp.
...And 3 more matches
RTCRtpSynchronizationSource - Web APIs
the rtcrtpsynchronizationsource dictionary of the the webrtc api is used by getsynchronizationsources() to describe a particular synchronization source (ssrc).
... a synchronization source is a single source that shares timing and sequence number space.
... since rtcrtpsynchronizationsource implements rtcrtpcontributingsource, its properties are also available.
...And 3 more matches
SVGExternalResourcesRequired - Web APIs
the svgexternalresourcesrequired interface defines an interface which applies to all elements where this element or one of its descendants can reference an external resource.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgexternalresourcesrequired</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specificati...
... properties svgexternalresourcesrequired.externalresourcesrequired corresponds to the externalresourcesrequired attribute of the given element.
...And 3 more matches
SourceBuffer.appendBufferAsync() - Web APIs
the appendbufferasync() method of the sourcebuffer interface begins the process of asynchronously appending media segment data from an arraybuffer or arraybufferview object to the sourcebuffer.
... syntax appendpromise = sourcebuffer.appendbufferasync(source); parameters source a buffersource (that is, either an arraybufferview or arraybuffer) which contains the media segment data you want to add to the sourcebuffer.
... return value a promise which is fulfilled when the buffer has been added successfully to the sourcebuffer, or null if the request could not be initiated.
...And 3 more matches
SourceBuffer.appendWindowEnd - Web APIs
the appendwindowend property of the sourcebuffer interface controls the timestamp for the end of the append window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.
... syntax var myappendwindowend = sourcebuffer.appendwindowend; sourcebuffer.appendwindowend = 120.0; value a double, indicating the end time of the append window, in seconds.
... exception explanation invalidaccesserror an attempt was made to set the value to less than or equal to sourcebuffer.appendwindowstart, or nan.
...And 3 more matches
SourceBuffer.appendWindowStart - Web APIs
the appendwindowstart property of the sourcebuffer interface controls the timestamp for the start of the append window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.
... syntax var myappendwindowstart = sourcebuffer.appendwindowstart; sourcebuffer.appendwindowstart = 2.0; value a double, indicating the start time of the append window, in seconds.
... exception explanation invalidaccesserror an attempt was made to set the value to less than 0, or a value greater than or equal to sourcebuffer.appendwindowend.
...And 3 more matches
SourceBuffer.changeType() - Web APIs
the changetype() method of the sourcebuffer interface sets the mime type that future calls to appendbuffer() should expect the new media data to conform to.
... one scenario in which this is helpful is to support adapting the media source to changing bandwidth availability, by transitioning from one codec to another as resource constraints change.
... syntax sourcebuffer.changetype(type); parameters type a domstring specifying the mime type that future buffers will conform to.
...And 3 more matches
SourceBuffer.removeAsync() - Web APIs
the removeasync() method of the sourcebuffer interface starts the process of asynchronously removing from the sourcebuffer media segments found within a specific time range.
... syntax removepromise = sourcebuffer.removeasync(start, end); parameters start a double representing the start of the time range, in seconds.
... return value a promise whose fulfillment handler is executed once the buffers in the specified time range have been removed from the sourcebuffer.
...And 3 more matches
sourceCapabilities - Web APIs
the uievent.sourcecapabilities read-only property returns an instance of the inputdevicecapabilities interface which provides information about the physical device responsible for generating a touch event.
... when a single user interaction with an input device generates a series of different input events, the sourcecapabilities property for all of them will point to the same instance of inputdevicecapabilities.
...all of these events must have the same sourcecapabilities representing the touchscreen.
...And 3 more matches
XRInputSource.targetRayMode - Web APIs
the read-only xrinputsource property targetraymode indicates the method by which the target ray for the input source should be generated and how it should be presented to the user.
... syntax let raymode = xrinputsource.targetraymode; value a domstring taken from the xrtargetraymode enumerated type, indicating which method to use when generating and presenting the target ray to the user.
... usage notes the input source's targetrayspace indicates the position and orientation of the target ray, and can be used to determine where to render the ray.
...And 3 more matches
XRInputSourceArray.entries() - Web APIs
the xrinputsourcearray interface's entries() method returns a javascript iterator which can then be used to iterate over the key/value pairs in the input source array.
... each item in the array is an xrinputsource object.
... syntax let inputsourceiterator = xrinputsourcearray.entries(); for (let entry of xrinputsourcearray.entries()) { /* ...
...And 3 more matches
XRInputSourceArray.forEach() - Web APIs
the xrinputsourcearray method foreach() executes the specified callback once for each input source in the array, starting at index 0 and progressing until the end of the list.
... syntax xrinputsourcearray.foreach(callback, thisarg); parameters callback a function to execute once for each entry in the array xrinputsourcearray.
... the callback accepts up to three parameters: currentvalue a xrinputsource object which is the value of the item from within the xrinputsourcearray which is currently being processed.
...And 3 more matches
XRInputSourceArray.keys() - Web APIs
the keys() method in the xrinputsourcearray interface returns a javascript iterator which can then be used to iterate over the keys used to reference each item in the array of input sources.
... syntax xrinputsourcearray.keys(); parameters none.
... return value a javascript iterator that can be used to walk through the keys for each entry in the list of input sources.
...And 3 more matches
XRInputSourceArray.values() - Web APIs
the xrinputsourcearray method values() returns a javascript iterator that can walk over the list of xrinputsource objects contained in the array, from first to last.
... syntax xrinputsourcearray.values(); parameters none.
... return value a javascript iterator that can be used to walk through the list of xrinputsource objects in the array, starting with the first entry (at index 0) and proceeding straight through the list.
...And 3 more matches
XRSession.inputSources - Web APIs
the read-only inputsources property of the xrsession interface returns an xrinputsourcearray object which lists all controllers and input devices which are expressly associated with the xr device and are currently available.
...keyboards, gamepads, and mice are not considered webxr input sources.
... syntax inputsources = xrsession.inputsources; value an xrinputsourcearray object listing all of the currently-connected input controllers which are linked specifically to the xr device currently in use.
...And 3 more matches
mask-border-source - CSS: Cascading Style Sheets
the mask-border-source css property sets the source image used to create an element's mask border.
... the mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
... syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used.
...And 3 more matches
Vue resources - Learn web development
previous overview: client-side javascript frameworks next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
... further resources here’s where you should go to learn more about vue: vue docs — the main vue site.
...studying the vue source code can help you better understand how the framework works, and write better code.
...And 2 more matches
NSS sources building testing
getting the source code of network security services (nss), how to build it, and how to run its test suite.
... getting source code, and a quick overview the easiest way is to download archives of nss releases from mozilla's download server.
... if you are a software developer and intend to contribute enhancements to nss, you should obtain the latest development snapshot of nss using mercurial/hg (a distributed source control management tool).
...And 2 more matches
JS_ValueToSource
convert a js::value to a javascript source.
... syntax jsstring * js_valuetosource(jscontext *cx, js::handle<js::value> v); name type description cx jscontext * the context in which to perform the conversion.
... description js_valuetosource converts a specified javascript value, v, to a javascript source.
...And 2 more matches
AudioBufferSourceNode.buffer - Web APIs
the buffer property of the audiobuffersourcenode interface provides the ability to play back audio using an audiobuffer as the source of the sound data.
... syntax audiobuffersourcenode.buffer = soundbuffer; value an audiobuffer which contains the data representing the sound which the node will play.
... example for a full working example, see this code running live, or view the source.
...And 2 more matches
AudioBufferSourceNode.loop - Web APIs
the loop property of the audiobuffersourcenode interface is a boolean indicating if the audio asset must be replayed when the end of the audiobuffer is reached.
... syntax var loopingenabled = audiobuffersourcenode.loop; audiobuffersourcenode.loop = true | false; value a boolean which is true if looping is enabled; otherwise, the value is false.
...when the time specified by the loopend property is reached, playback continues at the time specified by loopstart example in this example, the audiocontext.decodeaudiodata function is used to decode an audio track and put it into an audiobuffersourcenode.
...And 2 more matches
AudioBufferSourceNode.start() - Web APIs
the start() method of the audiobuffersourcenode interface is used to schedule playback of the audio data contained in the buffer, or to begin playback immediately.
... syntax audiobuffersourcenode.start([when][, offset][, duration]); parameters when optional the time, in seconds, at which the sound should begin to play, in the same time coordinate system used by the audiocontext.
...you can only call this function once during the lifetime of an audiobuffersourcenode.
...And 2 more matches
BaseAudioContext.createConstantSource() - Web APIs
the createconstantsource() property of the baseaudiocontext interface creates a constantsourcenode object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
... syntax var constantsourcenode = audiocontext.createconstantsource() parameters none.
... returns a constantsourcenode instance.
...And 2 more matches
MediaElementAudioSourceNode() - Web APIs
the mediaelementaudiosourcenode() constructor creates a new mediaelementaudiosourcenode object instance.
... syntax var myaudiosource = new mediaelementaudiosourcenode(context, options); parameters inherits parameters from the audionodeoptions dictionary.
... options a mediaelementaudiosourceoptions dictionary object defining the properties you want the mediaelementaudiosourcenode to have: mediaelement: an htmlmediaelement that will be used as the source for the audio.
...And 2 more matches
MediaSource.duration - Web APIs
the duration property of the mediasource interface gets and sets the duration of the current media being presented.
... syntax mediasource.duration = 5.5; // 5.5 seconds var myduration = mediasource.duration; value a double.
... invalidstateerror mediasource.readystate is not equal to open, or one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
...And 2 more matches
MediaSource.endOfStream() - Web APIs
the endofstream() method of the mediasource interface signals the end of the stream.
... syntax mediasource.endofstream(endofstreamerror); parameters endofstreamerror optional a domstring representing an error to throw when the end of the stream is reached.
... return value undefined exceptions exception explanation invalidstateerror mediasource.readystate is not equal to open, or one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
...And 2 more matches
MediaSource.isTypeSupported() - Web APIs
the mediasource.istypesupported() static method returns a boolean value which is true if the given mime type is likely to be supported by the current user agent.
... that is, if it can successfully create sourcebuffer objects for that mime type.
... syntax var isitsupported = mediasource.istypesupported(mimetype); parameters mimetype the mime media type that you want to test support for in the current browser.
...And 2 more matches
performance.clearResourceTimings() - Web APIs
the clearresourcetimings() method removes all performance entries with an entrytype of "resource" from the browser's performance data buffer and sets the size of the performance data buffer to zero.
... to set the size of the browser's performance data buffer, use the performance.setresourcetimingbuffersize() method.
... syntax performance.clearresourcetimings(); arguments void return value none this method has no return value.
...And 2 more matches
Performance.onresourcetimingbufferfull - Web APIs
the onresourcetimingbufferfull property is an event handler that will be called when the resourcetimingbufferfull event is fired.
... this event is fired when the browser's resource timing performance buffer is full.
... syntax callback = performance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired.
...And 2 more matches
PerformanceResourceTiming.connectEnd - Web APIs
the connectend read-only property returns the timestamp immediately after the browser finishes establishing the connection to the server to retrieve the resource.
... syntax resource.connectend; return value a domhighrestimestamp representing the time after a connection is established.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.connectStart - Web APIs
the connectstart read-only property returns the timestamp immediately before the user agent starts establishing the connection to the server to retrieve the resource.
... syntax resource.connectstart; return value a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.domainLookupEnd - Web APIs
the domainlookupend read-only property returns the timestamp immediately after the browser finishes the domain name lookup for the resource.
... syntax resource.domainlookupend; return value a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.domainLookupStart - Web APIs
the domainlookupstart read-only property returns the timestamp immediately before the browser starts the domain name lookup for the resource.
... syntax resource.domainlookupstart; return value a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.initiatorType - Web APIs
the initiatortype read-only property is a string that represents the type of resource that initiated the performance event.
... if the initiator is a css resource, the property returns "css".
... syntax resource.initiatortype; return value a string representing the type of resource that initiated the performance event, as specified above.
...And 2 more matches
PerformanceResourceTiming.redirectEnd - Web APIs
when fetching a resource, if there are multiple http redirects, and any of the redirects have an origin that is different from the current document, and the timing allow check algorithm passes for each redirected resource, this property returns the time immediately after receiving the last byte of the response of the last redirect; otherwise, zero is returned.
... syntax resource.redirectend; return value a timestamp immediately after receiving the last byte of the response of the last redirect.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.redirectStart - Web APIs
if there are http redirects when fetching the resource and if any of the redirects are not from the same origin as the current document, but the timing allow check algorithm passes for each redirected resource, this property returns the starting time of the fetch that initiates the redirect; otherwise, zero is returned.
... syntax resource.redirectstart; return value a timestamp representing the start time of the fetch which initiates the redirect.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.responseEnd - Web APIs
the responseend read-only property returns a timestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
... syntax resource.responseend; return value a domhighrestimestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.responseStart - Web APIs
the responsestart read-only property returns a timestamp immediately after the browser receives the first byte of the response from the server, cache, or local resource.
... syntax resource.responsestart; return value a domhighrestimestamp immediately after the browser receives the first byte of the response from the server.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
...And 2 more matches
PerformanceResourceTiming.transferSize - Web APIs
the transfersize read-only property represents the size (in octets) of the fetched resource.
... if the resource is fetched from a local cache, or if it is a cross-origin resource, this property returns zero.
... syntax resource.transfersize; return value a number representing the size (in octets) of the fetched resource.
...And 2 more matches
RTCRtpContributingSource - Web APIs
the rtcrtpcontributingsource dictionary of the the webrtc api is used by getcontributingsources() to provide information about a given contributing source (csrc), including the most recent time a packet that the source contributed was played out.
... properties audiolevel optional a double-precision floating-point value between 0 and 1 specifying the audio level contained in the last rtp packet played from this source.
...this value is a source-generated time value which can be used to help with sequencing and synchronization.
...And 2 more matches
RTCRtpReceiver.getContributingSources() - Web APIs
the getcontributingsources() method of the rtcrtpreceiver interface returns an array of rtcrtpcontributingsource instances, each corresponding to one csrc (contributing source) identifier received by the current rtcrtpreceiver in the last ten seconds.
... syntax var rtcrtpcontributingsources = rtcrtpreceiver.getcontributingsources() parameters none.
... return value an array of rtcrtpcontributingsource instances.
...And 2 more matches
SourceBuffer.timestampOffset - Web APIs
the timestampoffset property of the sourcebuffer interface controls the offset applied to timestamps inside media segments that are appended to the sourcebuffer.
... syntax var myoffset = sourcebuffer.timestampoffset; sourcebuffer.timestampoffset = 2.5; value a double, with the offset amount expressed in seconds.
... exception explanation invalidstateerror one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
...And 2 more matches
SourceBufferList: indexed property getter - Web APIs
the indexed property getter of the sourcebufferlist interface allows the sourcebuffer objects in the list to be accessed with an array operator (i.e.
... [].) syntax var mysourcebuffer = sourcebufferlist[index]; parameters index the index position of the sourcebuffer object you want to return.
... return value a sourcebuffer object.
...And 2 more matches
WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
the webgl_debug_shaders.gettranslatedshadersource() method is part of the webgl api and allows you to debug a translated shader.
... syntax gl.getextension('webgl_debug_shaders').gettranslatedshadersource(shader); parameters shader a webglshader to get the translated source from.
... return value a string containing the translated shader source.
...And 2 more matches
WebGLRenderingContext.getShaderSource() - Web APIs
the webglrenderingcontext.getshadersource() method of the webgl api returns the source code of a webglshader as a domstring.
... syntax domstring gl.getshadersource(shader); parameters shader a webglshader object to get the source code from.
... return value a domstring containing the source code of the shader.
...And 2 more matches
WebGLRenderingContext.shaderSource() - Web APIs
the webglrenderingcontext.shadersource() method of the webgl api sets the source code of a webglshader.
... syntax void gl.shadersource(shader, source); parameters shader a webglshader object in which to set the source code.
... source a domstring containing the glsl source code to set.
...And 2 more matches
XRInputSource.gripSpace - Web APIs
the read-only xrinputsource property gripspace returns an xrspace whose native origin tracks the pose used to render virtual objects so they appear to be held in (or part of) the user's hand.
... syntax var xrspace = xrinputsource.gripspace; value an xrspace object representing the position and orientation of the input device in virtual space, suitable for rendering an image of the device into the scene.
... gripspace is null if the input source is inherently untrackable.
...And 2 more matches
XRInputSource.profiles - Web APIs
the read-only xrinputsource property profiles returns an array of strings, each describing a configuration profile for the input source.
... syntax let profilelist = xrinputsource.profiles; value an array of domstring objects, each describing one configuration profile for the input device represented by the xrinputsource object.
... each input profile specifies the preferred visual representation and behavior of the input source.
...And 2 more matches
XRInputSourceArray.length - Web APIs
the read-only length property returns an integer value indicating the number of items in the input source list represented by the xrinputsourcearray object.
... syntax let inputsourcecount = xrinputsourcearray.length; value an integer value indicating the number of xrinputsource objects representing webxr input sources are includled in the array.
... examples in this example, a game that requires at least one input source uses length to check this before proceeding to allow the user to play the game.
...And 2 more matches
XRSession.oninputsourceschange - Web APIs
the oninputsourcechange attribute of the xrsession object is the event handler for the inputsourcechange event, which is dispatched when session's list of active xr input sources has changed.
... the list itself is accessible via xrsession.inputsources.
... note: the xrinputsource objects in xrsession.inputsources array are "live", so values within them are updated in-place.
...And 2 more matches
border-image-source - CSS: Cascading Style Sheets
the border-image-source css property sets the source image used to create an element's border image.
... the source for this interactive example is stored in a github repository.
... the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.
...And 2 more matches
Array.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the array.
... syntax arr.tosource() return value a string representing the source code of the array.
... description the tosource method returns the following values: for the built-in array object, tosource returns the following string indicating that the source code is not available: function array() { [native code] } for instances of array, tosource returns a string representing the source code.
...And 2 more matches
Error.prototype.toSource() - JavaScript
the tosource() method returns code that could eval to the same error.
... syntax e.tosource() return value a string containing the source code of the error.
... examples using tosource calling the tosource method of an error instance (including nativeerrors) will return a string containing the source code of the error.
...And 2 more matches
Function.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
...you can call tosource() while debugging to examine the contents of an object.
... syntax function.tosource(); return value a string representing the source code of the object.
...And 2 more matches
RegExp.prototype.source - JavaScript
the source property returns a string containing the source text of the regexp object, and it doesn't contain the two forward slashes on both sides and any flags.
... the source for this interactive example is stored in a github repository.
... property attributes of regexp.prototype.source writable no enumerable no configurable yes examples using source var regex = /foobar/ig; console.log(regex.source); // "foobar", doesn't contain /.../ and "ig".
...And 2 more matches
loadResources - Archive of obsolete content
loadresources loads a properties file.
... method of install object syntax object loadresources( string xpipath ); parameters the sole input parameter for loadresources is a string representing the path to the properties file in the xpi in which the key/value pairs are defined.
...description the format of the properties file expected by loadresources is the same as that of the chrome locale .properties files.
... the following lines retrieve the properties as a javascript object and make the values accessible with the familiar "dot property" syntax: reseg2obj = loadresources("bin/res_eg_2.properties"); dump( reseg2obj.title ) ...
sortResource - Archive of obsolete content
« xul reference home sortresource type: uri for template-generated content, this specifies the sort key, if you would like the content to be sorted.
... the key should be the full uri of the rdf resource to sort by, for example 'http://home.netscape.com/nc-rdf#name'.
... place this attribute on the same element as the datasources attribute.
... use sortresource2 to specify a secondary sort key.
React resources - Learn web development
previous overview: client-side javascript frameworks next our final article provides you with a list of react resources that you can use to go further in your learning.
... objective: to provide further resources for learning more about react.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Working with Mozilla source code
the articles below will help you get your hands on the mozilla source code, learn to navigate the code, and how to get the changes you propose checked into the tree.
... viewing and searching mozilla source code online learn how to use searchfox, mozilla's online search and browsing tool for accessing the source code.
... navigating the mozilla source code learn about the various folders in the mozilla source tree, and how to find what you're looking for.
... getting commit access to the source code feel ready to join the few, the proud, the committers?
DownloadSource
a downloadsource object represents the source of a download, for example a document or an uri.
... properties attribute type description url read only string the uri for the download source.
...this determines the context of the network request that is made to retrieve the resource.
... referrer read only string referrer uri of the download source, or null if no referrer should be sent or the download source is not http.
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'); } //# sourceurl=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 //# sourceurl directive.
... this source is then listed in the source list pane, and can be opened and debugged like any other source.
... the name of the source will also appear in stack traces appearing in the web console.
... the debugger will also stop at debugger; statements in unnamed eval sources.
AudioBufferSourceNode.detune - Web APIs
the detune property of the audiobuffersourcenode interface is a k-rate audioparam representing detuning of oscillation in cents.
... for example, values of +100 and -100 detune the source up or down by one semitone, while +1200 and -1200 detune it up or down by one octave.
... syntax var source = audioctx.createbuffersource(); source.detune.value = 100; // value in cents note: though the audioparam returned is read-only, the value it represents is not.
...; const channelcount = 2; const framecount = audioctx.samplerate * 2.0; // 2 seconds const myarraybuffer = audioctx.createbuffer(channelcount, framecount, audioctx.samplerate); for (let channel = 0; channel < channelcount; channel++) { const nowbuffering = myarraybuffer.getchanneldata(channel); for (let i = 0; i < framecount; i++) { nowbuffering[i] = math.random() * 2 - 1; } } const source = audioctx.createbuffersource(); source.buffer = myarraybuffer; source.connect(audioctx.destination); source.detune.value = 100; // value in cents source.start(); specifications specification status comment web audio apithe definition of 'detune' in that specification.
AudioScheduledSourceNode.onended - Web APIs
the onended event handler for the audioscheduledsourcenode interface specifies an eventhandler to be executed when the ended event occurs on the node.
... this event is sent to the node when the concrete interface (such as audiobuffersourcenode, oscillatornode, or constantsourcenode) determines that it has stopped playing.
...this is the case, for example, when using an audiobuffersourcenode with its loop property set to true.
... syntax audioscheduledsourcenode.onended = eventhandler; value a function which is called by the browser when the ended event occurs on the audioscheduledsourcenode.
DataTransfer.mozSourceNode - Web APIs
the datatransfer.mozsourcenode property is used to determine the node over which the mouse cursor was located when the the drag operation was initiated (for example, when a <button> was clicked).
... syntax datatransfer.mozsourcenode; return value a node representing node where the drag originated.
... example this example shows the use of the mozsourcenode property in the dragend event handler.
... function dragend_handler(event) { var dragdata = event.datatransfer; var node = dragdata.mozsourcenode; if (node != null) console.log("mozsourcenode = " + dragdata.mozsourcenode); else console.log("mozsourcenode is null"); } specifications this property is not defined in any web standard.
EventSource() - Web APIs
the eventsource() constructor returns a newly-created eventsource, which represents a remote resource.
... syntax eventsource = new eventsource(url, configuration); parameters url a usvstring that represents the location of the remote resource serving the events/messages.
... examples var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
... specifications specification status comment html living standardthe definition of 'eventsource()' in that specification.
MediaElementAudioSourceNode.mediaElement - Web APIs
the mediaelementaudiosourcenode interface's read-only mediaelement property indicates the htmlmediaelement that contains the audio track from which the node is receiving audio.
... this stream was specified when the node was first created, either using the mediaelementaudiosourcenode() constructor or the audiocontext.createmediaelementsource() method.
... syntax audiosourceelement = mediaelementaudiosourcenode.mediaelement; value an htmlmediaelement representing the element which contains the source of audio for the node.
... examples const audioctx = new window.audiocontext(); const audioelem = document.queryselector('audio'); let options = { mediaelement: audioelem } let source = new mediaelementaudiosourcenode(audioctx, options); console.log(source.mediaelement); specifications specification status comment web audio apithe definition of 'mediaelementaudiosourcenode.mediaelement' in that specification.
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
the mediastreamtrackaudiosourceoptions dictionary's mediastreamtrack property must contain a reference to the mediastreamtrack from which the mediastreamtrackaudiosourcenode being created using the mediastreamtrackaudiosourcenode() constructor.
... syntax mediastreamtrackaudiosourceoptions = { mediastreamtrack: audiosourcetrack; } mediastreamtrackaudiosourceoptions.mediastreamtrack = audiosourcetrack; value a mediastreamtrack from which the audio output of the new mediastreamtrackaudiosourcenode will be taken.
... example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device.
... let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions.mediastream' in that specification.
Transcoding assets for Media Source Extensions - Web APIs
when working with media source extensions, it is likely that you need to condition your assets before you can stream them.
...to install, you'll need to build/compile the application yourself from the provided project files/source files, depending on your os and preferences.
... to check if the browser supports a particular container, you can pass a string of the mime type to the mediasource.istypesupported method: mediasource.istypesupported('audio/mp3'); // false mediasource.istypesupported('video/mp4'); // true mediasource.istypesupported('video/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime type of the container, optionally followed by a list of codecs.
... run the following commands (shown with sample output): $ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4 encoding 5 bitrates, min bitrate = 500.0 max bitrate = 2000.0 media source: video: resolution=640x360 encoding bitrate: 500, resolution: 256x144 encoding bitrate: 875, resolution: 384x216 encoding bitrate: 1250, resolution: 480x270 encoding bitrate: 1625, resolution: 560x316 encoding bitrate: 2000, resolution: 640x360 $ python mp4-dash.py video_0* parsing media file 1: video_00500.mp4 parsing media file 2: video_00875.mp4 parsing media file 3: video_01250.mp4 parsing m...
msPlayToPreferredSourceUri - Web APIs
msplaytopreferredsourceuri is a read/write property which gets or sets the path to the preferred media source.
... 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.
...the app specifies a preferred uniform resource identifier (uri).
... example <video src="http://www.contoso.com/videos/video.mp4" msplaytopreferredsourceuri="http://www.contoso.com/catalogid=1234" /> var video = document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection technology is a set of technologies that can be used to distribute a...
PerformanceResourceTiming.decodedBodySize - Web APIs
if the resource is retrieved from an application cache or local resources, it returns the size of the payload after removing any applied content-codings.
... syntax resource.decodedbodysize; return value the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings.
... example the following example, the value of the size properties of all "resource" type events are logged.
... ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'decodedbodysize' in that specification.
PerformanceResourceTiming.encodedBodySize - Web APIs
if the resource is retrieved from an application cache or a local resource, it must return the size of the payload body before removing any applied content-codings.
... syntax resource.encodedbodysize; return value a number representing the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings.
... example the following example, the value of the size properties of all "resource" type events are logged.
... ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'encodedbodysize' in that specification.
PerformanceResourceTiming.requestStart - Web APIs
the requeststart read-only property returns a timestamp of the time immediately before the browser starts requesting the resource from the server, cache, or local resource.
... syntax resource.requeststart; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported...
..." + properties[i] + " = not supported"); } } } specifications specification status comment resource timing level 1the definition of 'requeststart' in that specification.
PerformanceResourceTiming.secureConnectionStart - Web APIs
syntax resource.secureconnectionstart; return value if the resource is fetched over a secure connection, a domhighrestimestamp immediately before the browser starts the handshake process to secure the current connection.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported...
..." + properties[i] + " = not supported"); } } } specifications specification status comment resource timing level 1the definition of 'secureconnectionstart' in that specification.
RTCRtpContributingSource.audioLevel - Web APIs
the read-only audiolevel property of the rtcrtpcontributingsource interface indicates the audio level contained in the last rtp packet played from the described source.
... syntax var audiolevel = rtcrtpcontributingsource.audiolevel value a double-precision floating-point number which indicates the volume level of the audio in the most recently received rtp packet from the source described by the rtcrtpcontributingsource.
... for both rtcrtpcontributingsource and rtcrtpsynchronizationsource, the audio level is converted to this form from the values defined in the specifications corresponding to each type of source.
... audiolevel may be absent from rtcrtpcontributingsource objects, which indicates that no volume level was provided by the source; however, it is required and always available on all rtcrtpsynchronizationsource objects.
SourceBuffer.trackDefaults - Web APIs
the trackdefaults property of the sourcebuffer interface specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the sourcebuffer.
... syntax var mytrackdefaults = sourcebuffer.trackdefaults; sourcebuffer.trackdefaults = mytrackdefaultlist; value a trackdefaultlist object.
... exception explanation invalidstateerror one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
... their sourcebuffer.updating property is currently true), or this sourcebuffer has been removed from the mediasource.
SourceBuffer.updating - Web APIs
the updating read-only property of the sourcebuffer interface indicates whether the sourcebuffer is currently being updated — i.e.
... whether an sourcebuffer.appendbuffer(), sourcebuffer.appendstream(), or sourcebuffer.remove() operation is currently in progress.
... syntax var isupdating = sourcebuffer.updating; value a boolean.
... example tbd specifications specification status comment media source extensionsthe definition of 'updating' in that specification.
XRInputSourceEvent.frame - Web APIs
the read-only xrinputsourceevent property frame specifies an xrframe object representing the event frame during which a webxr user input occurred.
... syntax let inputframe = xrinputsourceevent.frame; value an xrframe indicating the event frame at which the user input event described by the object took place.
... examples this code shows a handler for the selectstart event which gets the target ray's pose from the frame, mapping the pose representing the ray (event.inputsource.targetrayspace) to the overall reference space myrefspace.
... xrsession.onselectstart = event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { checkandhandlehit(targetraypose.transform); } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.frame' in that specification.
XRInputSourceEventInit.frame - Web APIs
the xrinputsourceeventinit dictionary's property frame specifies an xrframe providing information about the timestamp at which the new input source event took place, as well as access to the xrframe method getpose() which can be used to map the coordinates of any xrreferencespace to the space in which the event took place.
... of course, as a general rule, you won't need to create xrinputsourceeventinit objects yourself.
... syntax xrinputsourceeventinit.frame = xrframe; let xrinputsourceeventinit = { frame: xrframe }; let xrinputsourceevent = new xrinputsourceevent(type, { frame: xrframe }); value an xrframe indicating the time at which the event took place, and providing a getpose() method which can be used to map reference spaces to the world reference space.
... let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status comment webxr device apithe definition of 'xrinputsourceeventinit.frame' in that specification.
XRInputSourceEventInit - Web APIs
the xrinputsourceeventinit dictionary is used when calling the xrinputsourceevent() constructor to provide configuration options for the newly-created xrinputsourceevent object to take on.
... properties the xrinputsourceeventinit dictionary inherits properties from the eventinit dictionary.
... inputsource an xrinputsource object representing the input device from which the event is being sent.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceeventinit' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
the read-only xrinputsourceschangeevent property added is a list of zero or more input sources, each identified using an xrinputsource object, which have been newly made available for use.
... syntax let addedinputs = xrinputsourceschangeevent.added; value an array of zero or more xrinputsource objects, each representing one input device added to the xr system.
... examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
the read-only xrinputsourceschangeevent property removed is an array of zero or more xrinputsource objects representing the input sources which have been removed from the xrsession.
... syntax removedinputs = xrinputsourceschangeevent.removed; value an array of zero or more xrinputsource objects, each representing one input device removed from the xr system.
... examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.removed' in that specification.
XRInputSourcesChangeEventInit - Web APIs
the xrinputsourceschangeeventinit dictionary is used to provide options to the xrinputsourceschangeevent() constructor in order to set the initial state of the new xrinputsourceschangeevent object.
... properties added read only an array of zero or more xrinputsource objects, each representing one input device which is newly available to use.
... removed read only an array of zero or more xrinputsource objects representing the input devices which are no longer available.
... examples <tbd> specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit' in that specification.
XRSession: inputsourceschange event - Web APIs
the inputsourceschange event is sent to an xrsession when the set of available webxr input devices changes.
... the received event, of type xrinputsourceschangeevent, contains a list of any newly added and/or removed input devices.
... bubbles yes cancelable no interface xrinputsourceschangeevent event handler property oninputsourceschange the event object contains lists of the newly-added and/or removed input devices in its added and removed properties.
... examples specifications specification status comment webxr device apithe definition of 'inputsourceschange event' in that specification.
Cross-Origin-Resource-Policy - HTTP
note: due to a bug in chrome, setting cross-origin-resource-policy can break pdf rendering, preventing visitors from being able to read past the first page of some pdfs.
... due to a bug in firefox, setting cross-origin-resource-policy can prevent some resources (such as pdfs) from being downloaded in some circumstances.
... the http cross-origin-resource-policy response header conveys a desire that the browser blocks no-cors cross-origin/cross-site requests to the given resource.
... header type response header forbidden header name no syntax cross-origin-resource-policy: same-site | same-origin | cross-origin examples the response header below will cause compatible user agents to disallow cross-origin no-cors requests: cross-origin-resource-policy: same-origin for more examples, see https://resourcepolicy.fyi/.
Web performance resources - Learn web development
using resource hints such as rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload keep the size of javascript to a minimum.
... use a cdn for resources which can reduce load times significantly.
... compress your resources using gzip, brotli, and zopfli.
AudioScheduledSourceNode: ended event - Web APIs
the ended event of the audioscheduledsourcenode interface is fired when the source node has stopped playing.
... bubbles no cancelable no interface event event handler property audioscheduledsourcenode.onended usage notes this event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played.
... examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audioscheduledsourcenode.onended property: node.onended = function() { document.getelementbyid("startbutton").disabled = false; } for an example of the ended event in use, see our audio-buffer example on github.
AudioTrack.sourceBuffer - Web APIs
the read-only audiotrack property sourcebuffer returns the sourcebuffer that created the track, or null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the mediasource.sourcebuffers attribute of its parent media source.
... syntax var sourcebuffer = audiotrack.sourcebuffer; value a sourcebuffer or null.
... specifications specification status comment media source extensionsthe definition of 'audiotrack: sourcebuffer' in that specification.
EventSource.close() - Web APIs
WebAPIEventSourceclose
the close() method of the eventsource interface closes the connection, if one is made, and sets the eventsource.readystate attribute to 2 (closed).
... syntax eventsource.close(); parameters none.
... examples var button = document.queryselector('button'); var evtsource = new eventsource('sse.php'); button.onclick = function() { console.log('connection closed'); evtsource.close(); } note: you can find a full example on github — see simple sse demo using php.
EventSource: message event - Web APIs
the message event of the eventsource api is fired when data is received through an event source.
... bubbles no cancelable no interface messageevent event handler property eventsource.onmessage examples in this basic example, an eventsource is created to receive events from the server; a page with the name sse.php is responsible for generating the events.
... var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.addeventlistener('message', (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }); onmessage equivalent evtsource.onmessage = (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }; specifications specification status html living standardthe definition of 'message event' in that specification.
EventSource.readyState - Web APIs
the readystate read-only property of the eventsource interface returns a number representing the state of the connection.
... syntax var myreadystate = eventsource.readystate; value a number representing the state of the connection.
... possible values are: 0 — connecting 1 — open 2 — closed examples var evtsource = new eventsource('sse.php'); console.log(evtsource.readystate); note: you can find a full example on github — see simple sse demo using php.
EventSource.url - Web APIs
WebAPIEventSourceurl
the url read-only property of the eventsource interface returns a domstring representing the url of the source.
... syntax var myurl = 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.
EventSource.withCredentials - Web APIs
the withcredentials read-only property of the eventsource interface returns a boolean indicating whether the eventsource object was instantiated with cors credentials set.
... syntax var mywithcredentials = eventsource.withcredentials; value a boolean indicating whether the eventsource object was instantiated with cors credentials set (true), or not (false, the default).
... examples var evtsource = new eventsource('sse.php'); console.log(evtsource.withcredentials); note: you can find a full example on github — see simple sse demo using php.
ExtendableMessageEvent.source - Web APIs
the source read-only property of the extendablemessageevent interface returns a reference to the client object from which the message was sent.
... syntax var mysource = extendablemessageevent.source; value a client, serviceworker or messageport object.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.source); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.source' in that specification.
MediaSource.clearLiveSeekableRange() - Web APIs
the clearliveseekablerange() method of the mediasource interface clears a seekable range previously set with a call to setliveseekablerange().
... syntax mediasource.clearliveseekablerange() parameters none.
... return value undefined specifications specification status comment media source extensionsthe definition of 'clearliveseekablerange()' in that specification.
MediaStreamAudioSourceOptions.mediaStream - Web APIs
the mediastreamaudiosourceoptions dictionary's mediastream property must specify the mediastream from which to retrieve audio data when instantiating a mediastreamaudiosourcenode using the mediastreamaudiosourcenode() constructor.
... syntax mediastreamaudiosourceoptions = { mediastream: audiosourcestream; } mediastreamaudiosourceoptions.mediastream = audiosourcestream; value a mediastream representing the stream from which to use a mediastreamtrack as the source of audio for the node.
... example specifications specification status comment web audio apithe definition of 'mediastreamaudiosourceoptions.mediastream' in that specification.
MediaStreamAudioSourceOptions - Web APIs
the mediastreamaudiosourceoptions dictionary provides configuration options used when creating a mediastreamaudiosourcenode using its constructor.
... it is not needed when using the audiocontext.createmediastreamsource() method.
... specifications specification status comment web audio apithe definition of 'mediastreamaudiosourceoptions' in that specification.
MediaStreamTrackAudioSourceOptions - Web APIs
the mediastreamtrackaudiosourceoptions dictionary is used when specifying options to the mediastreamtrackaudiosourcenode() constructor.
... it isn't needed when using the audiocontext.createmediastreamtracksource() method.
... specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions' in that specification.
MessageEvent.source - Web APIs
the source read-only property of the messageevent interface is a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
... syntax let mysource = messageevent.source; value a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
... example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.source); }; specifications specification status comment html living standardthe definition of ' messageevent: source' in that specification.
Performance: resourcetimingbufferfull event - Web APIs
the resourcetimingbufferfull event is fired when the browser's resource timing buffer is full.
... bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
PerformanceResourceTiming.nextHopProtocol - Web APIs
the nexthopprotocol read-only property is a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301).
... syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301).
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_nexthopprotocol(p[i]); } } function print_nexthopprotocol(perfentry) { var value = "nexthopprotocol" in perfentry; if (value) console.log("nexthopprotocol = " + perfentry.nexthopprotocol); else console.log("nexthopprotocol = not supported"); } specifications specification status comment resource timing level 2the definition of 'nexthopprotocol' in that specification.
PerformanceResourceTiming.toJSON() - Web APIs
the tojson() method is a serializer that returns a json representation of the performanceresourcetiming object.
... syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performanceresourcetiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes.
... example // get a resource performance entry var perfentries = performance.getentriesbytype("resource"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performanceentry.tojson = " + s); specifications specification status comment resource timing level 2the definition of 'tojson' in that specification.
RTCRtpSynchronizationSource.voiceActivityFlag - Web APIs
the read-only voiceactivityflag property of the rtcrtpsynchronizationsource interface indicates whether or not the most recent rtp packet on the source includes voice activity.
... syntax var voiceactivity = rtcrtpsynchronizationsource.voiceactivityflag value a boolean value which is true if voice activity is present in the most recently received rtp packet played by the associated source, or false if voice activity is not present.
... this property is omitted entirely if voice activity detection is not enabled on the source, or if the rfc 6464 extension header isn't present.
SecurityPolicyViolationEvent.sourceFile - Web APIs
the sourcefile read-only property of the securitypolicyviolationevent interface is a usvstring representing the uri of the document or worker in which the violation was found.
... syntax let source = violationeventinstance.sourcefile; value a usvstring representing the uri of the document or worker in which the violation was found.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sourcefile); }); specifications specification status comment content security policy level 3the definition of 'sourcefile' in that specification.
ServiceWorkerMessageEvent.source - Web APIs
the source read-only property of the serviceworkermessageevent returns a reference to the serviceworker object of the associated service worker that sent the message.
... syntax var mysource = serviceworkermessageeventinstance.source; value a serviceworker or messageport object.
... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = function(e) { console.log(e.source); handlechannelmessage(e.data); } mysw = reg.active; mysw.postmessage('hello', [channel.port2]); }); ...
SourceBuffer.appendBuffer() - Web APIs
the appendbuffer() method of the sourcebuffer interface appends media segment data from an arraybuffer or arraybufferview object to the sourcebuffer.
... syntax sourcebuffer.appendbuffer(source); parameters source a buffersource (that is, either an arraybufferview or arraybuffer) which contains the media segment data you want to add to the sourcebuffer.
... specifications specification status comment media source extensionsthe definition of 'appendbuffer()' in that specification.
SourceBuffer.audioTracks - Web APIs
the audiotracks read-only property of the sourcebuffer interface returns a list of the audio tracks currently contained inside the sourcebuffer.
... syntax var myaudiotracks = sourcebuffer.audiotracks; value an audiotracklist object.
... example tbd specifications specification status comment media source extensionsthe definition of 'audiotracks' in that specification.
SourceBuffer.buffered - Web APIs
the buffered read-only property of the sourcebuffer interface returns the time ranges that are currently buffered in the sourcebuffer as a normalized timeranges object.
... syntax var mybufferedrange = sourcebuffer.buffered; value a timeranges object.
... example tbd specifications specification status comment media source extensionsthe definition of 'buffered' in that specification.
SourceBuffer.textTracks - Web APIs
the texttracks read-only property of the sourcebuffer interface returns a list of the text tracks currently contained inside the sourcebuffer.
... syntax var mytexttracks = sourcebuffer.texttracks; value an texttracklist object.
... example tbd specifications specification status comment media source extensionsthe definition of 'texttracks' in that specification.
SourceBuffer.videoTracks - Web APIs
the videotracks read-only property of the sourcebuffer interface returns a list of the video tracks currently contained inside the sourcebuffer.
... syntax var myvideotracks = sourcebuffer.videotracks; value an videotracklist object.
... example tbd specifications specification status comment media source extensionsthe definition of 'videotracks' in that specification.
SourceBufferList.length - Web APIs
the length read-only property of the sourcebufferlist interface returns the number of sourcebuffer objects in the list.
... syntax var mylistlength = sourcebufferlist.length; value an unsigned long number.
... example tbd specifications specification status comment media source extensionsthe definition of 'length' in that specification.
VideoTrack.sourceBuffer - Web APIs
the read-only videotrack property sourcebuffer returns the sourcebuffer that created the track, or null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the mediasource.sourcebuffers attribute of its parent media source.
... syntax var sourcebuffer = videotrack.sourcebuffer; value a sourcebuffer or null.
... specifications specification status comment media source extensionsthe definition of 'videotrack: sourcebuffer' in that specification.
XRInputSourcesChangeEvent.session - Web APIs
the xrinputsourceschangeevent property session specifies the xrsession to which the input source list change event applies.
... syntax let inputssession = xrinputsourceschangeevent.session; value an xrsession indicating the webxr session to which the input source list change applies.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.session' in that specification.
XRInputSourcesChangeEventInit.added - Web APIs
the xrinputsourceschangeeventinit property added specifies a list of input sources, each identified using an xrinputsource object, which the represented inputsourceschange event is to indicate are newly available for use.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, each representing one input device added to the xr system.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit.added' in that specification.
XRInputSourcesChangeEventInit.removed - Web APIs
the xrinputsourceschangeeventinit property removed is an array of zero or more xrinputsource objects, each representing one input source which has been removed from the xrsession.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, each representing one input device removed from the xr system.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit.removed' in that specification.
XRInputSourcesChangeEventInit.session - Web APIs
the xrinputsourceschangeeventinit property session specifies the xrsession to which the input source list change event applies.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an xrsession indicating the webxr session to which the input source list change applies.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit.session' in that specification.
SourceMap - HTTP
the sourcemap http response header links generated code to a source map, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.
... 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.
... examples sourcemap: /path/to/file.js.map specifications specification title draft document source map revision 3 proposal ...
HTTP resources and specifications - HTTP
this page lists relevant resources about http.
...rsion 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 values from forms: multipart/form-data proposed standard ...
... cross-origin resource sharing living standard rfc 7034 http header field x-frame-options informational rfc 6797 http strict transport security (hsts) proposed standard upgrade insecure requests upgrade insecure requests candidate recommendation content security policy 1.0 content security policy 1.0 csp 1.1 and csp 3.0 doesn't extend the http standard ...
Boolean.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
... syntax booleanobj.tosource() boolean.tosource() return value a string representing the source code of the object.
... examples native function for the built-in boolean object, tosource returns the following string indicating that the source code is not available: function boolean() { [native code] } specifications not part of any standard.
Date.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
... syntax dateobj.tosource() date.tosource() return value a string representing the source code of the given date object.
... examples native function for the built-in date object, tosource() returns the following string indicating that the source code is not available: function date() { [native code] } specifications not part of any standard.
Number.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
... syntax numobj.tosource() number.tosource() return value a string representing the source code of the object.
... examples native function for the built-in number object, tosource() returns the following string indicating that the source code is not available: function number() { [native code] } for instances of number, tosource() returns a string representing the source code.
RegExp.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
... syntax regexobj.tosource() return value a string representing the source code of the given regexp object.
... examples native function for the built-in regexp object, tosource() returns the following string indicating that the source code is not available: function regexp() { [native code] } for instances of regexp, tosource() returns a string representing the source code.
String.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
... syntax string.tosource() str.tosource() return value a string representing the source code of the calling object.
... examples native function for the built-in string object, tosource() returns the following string indicating that the source code is not available: function string() { [native code] } for instances of string or string literals, tosource() returns a string representing the source code.
Symbol.prototype.toSource() - JavaScript
the tosource() method returns a string representing the source code of the object.
... syntax symbol.tosource() var sym = symbol() sym.tosource() return value a string representing the source code of the object.
... examples native function for the built-in symbol object, tosource returns the following string indicating that the source code is not available: "function symbol() { [native code] }" for instances of symbol, tosource returns a string representing the source code.
datasources - Archive of obsolete content
« xul reference datasources type: space-separated list of datasource uris gets and sets the value of the datasources attribute.
... in newer versions of mozilla (1.7+), the datasources will be reloaded and the template rebuilt.
Resource Timing - MDN Web Docs Glossary: Definitions of Web-related terms
diagnosing performance issues requires performance data at the granularity of the resource.
... the resource timing api is a javascript api that is able to capture timing information for each individual resource that is fetched when a page is loaded.
Resources
« previous this last section of the book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko developer.
... weblock resources weblock installer and information the sdk download linux: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-i686-pc-linux-gnu-1.4a.tar.gz windows: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-win32-1.4a.zip other mozilla downloads gecko resources internal string guide external string guide 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 mak...
AudioScheduledSourceNode.start() - Web APIs
the start() method on audioscheduledsourcenode schedules a sound to begin playback at the specified time.
... syntax audioscheduledsourcenode.start([when [, offset [, duration]]]); parameters when optional the time, in seconds, at which the sound should begin to play.
AudioScheduledSourceNode.stop() - Web APIs
the stop() method on audioscheduledsourcenode schedules a sound to cease playback at the specified time.
... syntax audioscheduledsourcenode.stop([when]); parameters when optional the time, in seconds, at which the sound should stop playing.
vendorIDSource - Web APIs
the bluetoothdevice.vendoridsource read-only property returns the vendor id source field in the pnp_id characteristic in the device_information service.
... syntax var vendoridsource = instanceofbluetoothdevice.vendoridsource returns the vendor id source field.
BufferSource - Web APIs
buffersource is a typedef used to represent objects that are either themselves an arraybuffer, or which are a typedarray providing an arraybufferview.
... specifications specification status comment web idlthe definition of 'buffersource' in that specification.
CanvasImageSource - Web APIs
canvasimagesource provides a mechanism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
... the interfaces that it allows to be used as image sources are the following: htmlimageelement svgimageelement htmlvideoelement htmlcanvaselement imagebitmap offscreencanvas specifications specification status comment html living standardthe definition of 'canvasimagesource' in that specification.
EventSource: error event - Web APIs
the error event of the eventsource api is fired when a connection with an event source fails to be opened.
... bubbles no cancelable no interface event or errorevent event handler property eventsource.onerror examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('error', (e) => { console.log("an error occurred while attempting to connect."); }); // onerror version evtsource.onerror = (e) => { console.log("an error occurred while attempting to connect."); }; specifications specification status html living standardthe definition of 'error event' in that specification.
EventSource.onerror - Web APIs
the onerror property of the eventsource interface is an eventhandler called when an error occurs and the error event is dispatched on an eventsource object.
... syntax eventsource.onerror = function examples evtsource.onerror = function() { console.log("eventsource failed."); }; note: you can find a full example on github — see simple sse demo using php.
EventSource.onmessage - Web APIs
the onmessage property of the eventsource interface is an eventhandler called when a message event is received, that is when a message is coming from the source.
... syntax eventsource.onmessage = function examples evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
EventSource.onopen - Web APIs
the onopen property of the eventsource interface is an eventhandler called when an open event is received, that is when the connection was just opened.
... syntax eventsource.onopen = function examples evtsource.onopen = function() { console.log("connection to server opened."); }; note: you can find a full example on github — see simple sse demo using php.
EventSource: open event - Web APIs
the open event of the eventsource api is fired when a connection with an event source is opened.
... bubbles no cancelable no interface event event handler property eventsource.onopen examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('open', (e) => { console.log("the connection has been established."); }); // onopen version evtsource.onopen = (e) => { console.log("the connection has been established."); }; specifications specification status html living standardthe definition of 'open event' in that specification.
RTCRtpContributingSource.rtpTimestamp - Web APIs
the read-only rtptimestamp property of the rtcrtpcontributingsource interface returns a domhighrestimestamp indicating the source-generated time at which the media contained int he packet was first sampled or obtained.
... syntax let rtptimestamp = rtcrtpcontributingsource.rtptimestamp value an integer value specifiying a source-generated timestamp indicating the time at which the media in this packet, scheduled for play out at the time indicated by timestamp, was initially sampled or generated.
RTCRtpContributingSource.timestamp - Web APIs
the read-only timestamp property of the rtcrtpcontributingsource interface returns a domhighrestimestamp indicating the most recent time of playout of an rtp packet from the source.
... syntax var domhighrestimestamp = rtcrtpcontributingsource.timestamp value a domhighrestimestamp which indicates the time at which the most recent rtp packet from the corresponding source was played out.
SourceBuffer.appendStream() - Web APIs
the appendstream() method of the sourcebuffer interface appends media segment data from a readablestream object to the sourcebuffer.
... syntax sourcebuffer.appendstream(stream, maxsize); parameters stream the readablestream that is the source of the media segment data you want to append to the sourcebuffer.
sortResource2 - Archive of obsolete content
« xul reference home sortresource2 type: uri the value of this attribute is the uri of an rdf predicate that serves as a secondary key for sorted content.
statedatasource - Archive of obsolete content
« xul reference home statedatasource type: uri chrome xul may specify an rdf datasource to use to store tree state information.
resource - Archive of obsolete content
« xul reference resource type: nsirdfresource returns an rdf resource with the value of the element's ref attribute.
XUL Parser in Python/source - Archive of obsolete content
source code for the xul parser in python.
External resources for plugin creation - Archive of obsolete content
frameworks and tools there are several open source projects designed to assist with the creation of npapi plugins.
Other Resources - Archive of obsolete content
all other resources dave winer's rss weblog dave winer's rss 2.0 political faq ...
Other Resources - Archive of obsolete content
all other resources offical mozilla xforms project page w3c test suite xformstest.org ...
view_source.syntax_highlight
the preference view_source.syntax_highlight controls whether markup in the view source view is syntax highlighted.
Viewing and searching Mozilla source code online
uxp source code can be found at the pale moon repository.
Other Resources
other resources embedding mozilla xpconnect - javascript-xpcom bridge blackconnect - java-xpcom bridge (no longer supported) xpidl to java types - from blackconnect ...
nsIEventSource
content/base/public/nsieventsource.idlscriptable this is the interface for server-sent dom events 1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this implements the eventsource interface used for server-sent events.
PerformanceResourceTiming.serverTiming - Web APIs
syntax resource.servertiming; specifications specification status comment server timingthe definition of 'servertiming' in that specification.
Resources - Web APIs
resources transforming xml: netscape and xslt what kind of language is xslt?
Compatibility sources - SVG: Scalable Vector Graphics
the following sources are used for the compatibility tables on svg elements and attributes: https://developer.mozilla.org/en/svg_in_firefox together with its revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx for hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic hints, not normative ...
Other Resources - SVG: Scalable Vector Graphics
here is a list of additional resources on svg: mozilla svg resources svg.org svgbasics tutorials w3c svg homepage svg wiki http://wiki.svg.org/index.php?title=..._configuration i moved this from the other resources category, not sure why it's in other resources -nickolay http://developer.mozilla.org/en/docs...%28external%29 ...
Resources - XSLT: Extensible Stylesheet Language Transformations
resources using the mozilla javascript interface to xsl transformations mozilla.org's xslt project page, which includes a frequently encountered issues section.
Index - Web APIs
WebAPIIndex
62 animation api, animations, experimental, interface, reference, web animations, waapi, web animations api the animation interface of the web animations api represents a single animation player and provides playback controls and a timeline for an animation node or source.
...a timeline is a source of time values for synchronization purposes, and is an animationtimeline-based object.
...once put into an audiobuffer, the audio can then be played by being passed into an audiobuffersourcenode.
...And 343 more matches
HTTP Index - HTTP
WebHTTPIndex
it relies on a few basic concepts like the notion of resources and uris, a simple structure of messages, and a client-server structure for the communication flow.
... 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.
... each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources.
...And 89 more matches
Index - Archive of obsolete content
217 view source for xul applications no summary!
...so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
... 258 appendix: what you should know about open-source software licenses no summary!
...And 84 more matches
RDF in Mozilla FAQ - Archive of obsolete content
what is a datasource?
...a datasource is a subgraph (or collection of statements, depending on your viewpoint) that are for some reason collected together.
... some examples of datasources that exist today are "browser bookmarks", "browser global history", "imap mail accounts", "nntp news servers", and "rdf/xml files".
...And 84 more matches
Parser API
this makes it easier to write tools in javascript that manipulate javascript source programs, such as syntax highlighters, static analyses, translators, compilers, obfuscators, etc.
... example: > var expr = reflect.parse("obj.foo + 42").body[0].expression > expr.left.property ({loc:null, type:"identifier", name:"foo"}) > expr.right ({loc:{source:null, start:{line:1, column:10}, end:{line:1, column:12}}, type:"literal", value:42}) it is also available since firefox 7; it can be imported into the global object via: components.utils.import("resource://gre/modules/reflect.jsm") or into a specified object via: components.utils.import("resource://gre/modules/reflect.jsm", obj) built-in objects whether in spidermonkey shell or firefox (after importi...
... additional options may be provided via the options object, which can include any of the following properties: loc boolean default: true when loc is true, the parser includes source location information in the returned ast nodes.
...And 78 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
2 404 glossary, http errors, infrastructure, navigation a 404 is a standard response code meaning that the server cannot find the requested resource.
...it's based on the open source webkit engine.
... 31 blink glossary, infrastructure, layout, rendering engine blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
...And 54 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
84 datasources xul attributes, xul reference no summary!
... 343 sortresource xul attributes, xul reference no summary!
... 344 sortresource2 xul attributes, xul reference no summary!
...And 40 more matches
Templates - Archive of obsolete content
populating elements xul provides a method in which we create elements from data supplied by rdf, either from an rdf file or from an internal datasource.
... numerous datasources are provided with mozilla such as bookmarks, history and mail messages.
...mozilla provides a bookmarks datasource so it can be used to get the data.
...And 40 more matches
Lighting a WebXR setting - Web APIs
fundamentally, simulating lighting in a virtual scene involves computing how much light from each light source is received by the eye after interacting with and reflecting off of each object in the scene.
...this is the foundation for much of what's involved in shading a scene, and comes into play in terms of how different types of light source behave.
... components of a light source a light source has three major components; each component is in essence a type of light there are three kinds of light that can affect the color and brightness of objects and their pixels as displayed on the viewer's screen or headset.
...And 39 more matches
Eclipse CDT
introduction eclipse cdt (c/c++ development tools) is an open-source ide for c and c++ development with advanced code assistance (inheritance/call graph explorer, jump to definition, refactoring, autocomplete, syntax highlighting, and so on).
... system requirements eclipse will use a lot of memory to fully index the mozilla source tree to provide code assistance features (easily 4 gb of ram, although this will drop to just over 1 gb if you restart after indexing is complete).
... before you use eclipse with the mozilla source you must increase its memory limits.
...And 38 more matches
Using the application cache - HTML: Hypertext Markup Language
this application cache (appcache) interface lists resources that browsers should cache to be available offline.
... speed cached resources are local, and therefore load faster.
... reduced server load the browser only downloads resources that have changed from the server.
...And 35 more matches
Template Builder Interface - Archive of obsolete content
« previousnext » when inserting an element into a xul document, the element is checked to see if it has a datasources attribute.
...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://purl.org/dc/elements/1.1/title"/></html:p> </template> </html:div> this example generates three paragraphs.
...note also that the datasources attribute has been placed on an html element.
...And 32 more matches
Index - HTTP
WebHTTPHeadersIndex
9 access-control-allow-methods cors, http, reference, header the access-control-allow-methods response header specifies the method or methods allowed when accessing the resource in response to a preflight request.
... 16 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource.
...the principal use is to indicate the url of a resource transmitted as the result of content negotiation.
...And 32 more matches
Introduction - Archive of obsolete content
each template retrieves its data from a datasource.
... several types of datasources are supported by default, rdf, xml and sqlite databases, however, processors may be written to support other types of datasources.
... in xul, the datasource is specified by placing the datasources attribute on an element.
...And 31 more matches
XUL element attributes - Archive of obsolete content
allownegativeassertions type: boolean valid on any element that has a datasources attribute.
... when multiple datasources are used, one may override an assertion from another.
... this attribute, if true, which is the default, allows a datasource to negate an earlier assertion.
...And 30 more matches
nsDependentCString
methods constructors nsdependentcstring(const char*, const char*) - source parameters char* start a pointer to the start of the string.
...nsdependentcstring(const char*, pruint32) - source parameters char* data a pointer to the string.
...nsdependentcstring(const char*) - source constructs an nsdependentstring when you don't know the length in advance.
...And 30 more matches
Eclipse CDT Manual Setup
(this assumes that you already have a copy of the mozilla source, and that you have also built the source so that you have a pre-existing object directory.
...faq: wait, why does eclipse need an object directory?) code assistance out of the box, eclipse can provide some code assistance for the mozilla source, but it will be incomplete and often just plain broken.
... to be able to provide really good code assistance for a project's source code, ides like eclipse need to carry out a thorough static analysis of the project's source files, to build up a picture of the code (what eclipse is trying to do when it "indexes" the source.) static analysis involves parsing the source files, so naturally it can only produce good results if it has a sensible set of preprocessor defines, include paths and pre-include files for each source file.
...And 29 more matches
Advanced Rules - Archive of obsolete content
the full rule syntax the rule syntax described so far is useful for some datasources but sometimes you will need to display data in more complicated ways.
...the conditions element is used to specify the criteria for matching a given resource.
...if the conditions match for a resource, the content placed within the actions tag is generated.
...And 28 more matches
Python binding for NSS
red hat following it's open source philosophy has contributed the source to the mozilla security project.
... red hat welcomes all interested contributors who would like to contribute the the python-nss project as part of an open source community.
...the source code to python-nss was first imported into the mozilla cvs repository on june 9th 2009.
...And 28 more matches
HTTP conditional requests - HTTP
http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator.
... validators all conditional headers try to check if the resource stored on the server matches a specific version.
... to achieve this, the conditional requests need to indicate the version of the resource.
...And 28 more matches
nsDependentString
methods constructors void nsdependentstring(const prunichar*, const prunichar*) - source constructors parameters prunichar* start prunichar* end void nsdependentstring(const prunichar*, pruint32) - source parameters prunichar* data pruint32 length void nsdependentstring(const prunichar*) - source parameters prunichar* data void nsdependentstring(const nsastring_internal&) - source parameters nsastring_internal& str void nsdependentstring() - source assert...
...valid void assertvalid() - source verify restrictions rebind void rebind(const prunichar*) - source allow this class to be bound to a different string...
... parameters prunichar* data void rebind(const prunichar*, pruint32) - source parameters prunichar* data pruint32 length void rebind(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 fi...
...And 27 more matches
Mail and RDF
mozilla mail exposes many of it's data structures to rdf through a few datasources.
... overview of mail rdf graph the root resource for all accounts, folders and messages is the rdf resource named msgaccounts:/.
... from this resource, you can follow a number of arcs to find servers, folders, and finally messages.
...And 27 more matches
nsAdoptingString
methods constructors void nsadoptingstring() - source void nsadoptingstring(prunichar*, pruint32) - source parameters prunichar* str pruint32 length void nsadoptingstring(const nsadoptingstring&) - source parameters nsadoptingstring& str operator= nsadoptingstring& operator=(const nsadoptingstring&) - source parameters nsadoptingstring& str nsxpidlstring& operator=(const nsxpidlstring&) - source parameters nsxpidlstring& ...
...str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator const prunichar* prunichar* operator const prunichar*() const - source operator[] prunichar operator[](print32) const - source parameters print32 i prunichar operator[](pruint32) const - source parameters pruint32 i get prunichar* get() const - source returns the null-terminated string find print...
...32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 26 more matches
nsCAutoString
methods constructors void nscautostring() - source constructors void nscautostring(char) - source parameters char c void nscautostring(const char*, pruint32) - source parameters char* data pruint32 length void nscautostring(const nscautostring&) - source parameters nscautostring& str void nscautostring(const nsacstring_internal&) - source parameters nsacstring_internal& str void nscautos...
...tring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple operator= nscautostring& operator=(const nscautostring&) - source parameters nscautostring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring...
...&, prbool, print32, print32) const - source search for the given substring within this string.
...And 26 more matches
Audio and Video Delivery - Developer guides
html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback.
... for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fallback for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster image ...
... <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <a href="audiofile.mp3">download audio</a> <object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&is...
...And 26 more matches
Mozilla Crypto FAQ - Archive of obsolete content
i've updated this version of the mozilla crypto faq to discuss the situation now that the rsa public key algorithm is in the public domain and a full open source crypto implementation is being added to the mozilla code base.
...encryption export regulations published on january 14, 2000, the release on february 11, 2000, of source code for ssl, s/mime, and general pki functionality for use in the mozilla project, and the "bernstein advisory" issued by the bureau of export administration on february 17, 2000.
...in the near future the mozilla code base will include a complete open source cryptographic library, and mozilla will include ssl support as a standard feature.
...And 25 more matches
RDF Modifications - Archive of obsolete content
« previousnext » one of the most useful aspects of using templates with rdf datasources is that when the rdf datasource changes, for instance a new triple is added, or a triple is removed, the template updates accordingly, adding or removing result output as needed.
...this involves a third type of observer involved in a template builder, an nsirdfobserver, used to listen for modifications to the rdf datasource.
...when the datasource is modified, the datasource will notify any observers of the change.
...And 25 more matches
NS_ConvertASCIItoUTF16
methods constructors void ns_convertasciitoutf16(const char*) - source parameters char* acstring void ns_convertasciitoutf16(const char*, pruint32) - source parameters char* acstring pruint32 alength void ns_convertasciitoutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - sour...
...ce parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool...
...And 25 more matches
NS_ConvertUTF8toUTF16
methods constructors void ns_convertutf8toutf16(const char*) - source parameters char* acstring void ns_convertutf8toutf16(const char*, pruint32) - source parameters char* acstring pruint32 alength void ns_convertutf8toutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source...
... parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool...
...And 25 more matches
nsAdoptingCString
methods constructors void nsadoptingcstring() - source void nsadoptingcstring(char*, pruint32) - source parameters char* str pruint32 length void nsadoptingcstring(const nsadoptingcstring&) - source parameters nsadoptingcstring& str operator= nsadoptingcstring& operator=(const nsadoptingcstring&) - source parameters nsadoptingcstring& str nsxpidlcstring& operator=(const nsxpidlcstring&) - source parameters nsxpidlcstring& ...
...str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple operator const char* char* operator const char*() const - source operator[] char operator[](print32) const - source parameters print32 i char operator[](pruint32) const - source parameters pruint32 i get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print...
...32, print32) const - source search for the given substring within this string.
...And 25 more matches
nsAutoString
methods constructors void nsautostring() - source constructors void nsautostring(prunichar) - source parameters prunichar c void nsautostring(const prunichar*, pruint32) - source parameters prunichar* data pruint32 length void nsautostring(const nsautostring&) - source parameters nsautostring& str void nsautostring(const nsastring_internal&) - source parameters nsastring_internal& str void nsautostring(const nssubstri...
...ngtuple&) - source parameters nssubstringtuple& tuple operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given su...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool...
...And 25 more matches
nsFixedString
methods constructors void nsfixedstring(prunichar*, pruint32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param length (optional) the length of the string already contained in the buffer parameters prunichar* data pruint32 storagesize void nsfixedstring(prunichar*, pruint32, pruint32) - source parameters prunichar* data pruint32 s...
...toragesize pruint32 length operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool...
...And 25 more matches
nsPromiseFlatString
methods constructors void nspromiseflatstring(const nsastring_internal&) - source parameters nsastring_internal& str void nspromiseflatstring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data ...
... nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool...
...And 25 more matches
nsString
methods constructors void nsstring() - source constructors void nsstring(prunichar) - source parameters prunichar c void nsstring(const prunichar*, pruint32) - source parameters prunichar* data pruint32 length void nsstring(const nsstring&) - source parameters nsstring& str void nsstring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple void nsstring(const nsastring_internal&) - source paramet...
...ers nsastring_internal& readable operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool...
...And 25 more matches
nsXPIDLString
methods constructors void nsxpidlstring() - source void nsxpidlstring(const nsxpidlstring&) - source parameters nsxpidlstring& str operator const prunichar* prunichar* operator const prunichar*() const - source operator[] prunichar operator[](print32) const - source parameters print32 i prunichar operator[](pruint32) const - source parameters pruint32 i operator= nsxpidlstring& operator=(const nsxpidlstring&) -...
... source parameters nsxpidlstring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool...
...And 25 more matches
HTTP caching - HTTP
WebHTTPCaching
the performance of web sites and applications can be significantly improved by reusing previously fetched resources.
... web caches reduce latency and network traffic and thus lessen the time needed to display a representation of a resource.
... different kinds of caches caching is a technique that stores a copy of a given resource and serves it back when requested.
...And 25 more matches
Creating a Help Content Pack - Archive of obsolete content
the location of each of the glossary, index, and table of contents data sources is stored in one rdf:description element contained within one rdf:li element, like so: <rdf:seq> <rdf:li> <rdf:description nc:panelid="glossary" nc:datasources="chrome://foo/locale/help/glossary.rdf"/> </rdf:li> <rdf:li> <rdf:description nc:panelid="toc" ...
... nc:datasources="chrome://foo/locale/help/glossary.rdf"/> </rdf:li> <rdf:li> <rdf:description nc:panelid="index" nc:datasources="chrome://foo/locale/help/glossary.rdf"/> </rdf:li> </rdf:seq> the help viewer ui may or may not provide a panel for each of these data sources.
... in firefox 1.0 each data source had a panel.
...And 24 more matches
Storage access policy: Block cookies from trackers
firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources.
... tracking protection explained how does firefox determine which resources are tracking resources?
... firefox uses the tracking protection list to determine which resources are tracking resources.
...And 24 more matches
NS_ConvertUTF16toUTF8
methods constructors void ns_convertutf16toutf8(const prunichar*) - source a helper class that converts a utf-16 string to utf-8 parameters prunichar* astring void ns_convertutf16toutf8(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 alength void ns_convertutf16toutf8(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscautostring& operator=(const nscautostring&) - source parameters ...
...nscautostring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this str...
...And 24 more matches
NS_LossyConvertUTF16toASCII
methods constructors void ns_lossyconvertutf16toascii(const prunichar*) - source a helper class that converts a utf-16 string to ascii in a lossy manner parameters prunichar* astring void ns_lossyconvertutf16toascii(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 alength void ns_lossyconvertutf16toascii(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscautostring& operator=(const nscautost...
...ring&) - source parameters nscautostring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this str...
...And 24 more matches
nsCString
methods constructors void nscstring() - source constructors void nscstring(char) - source parameters char c void nscstring(const char*, pruint32) - source parameters char* data pruint32 length void nscstring(const nscstring&) - source parameters nscstring& str void nscstring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple void nscstring(const nsacstring_internal&) - source parameters nsacs...
...tring_internal& readable operator= nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this str...
...And 24 more matches
nsFixedCString
methods constructors void nsfixedcstring(char*, pruint32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param length (optional) the length of the string already contained in the buffer parameters char* data pruint32 storagesize void nsfixedcstring(char*, pruint32, pruint32) - source parameters char* data pruint32 storagesize pru...
...int32 length operator= nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this str...
...And 24 more matches
nsPromiseFlatCString
methods constructors void nspromiseflatcstring(const nsacstring_internal&) - source parameters nsacstring_internal& str void nspromiseflatcstring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple operator= nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstrin...
...g_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this str...
...And 24 more matches
nsXPIDLCString
methods constructors void nsxpidlcstring() - source void nsxpidlcstring(const nsxpidlcstring&) - source parameters nsxpidlcstring& str operator const char* char* operator const char*() const - source operator[] char operator[](print32) const - source parameters print32 i char operator[](pruint32) const - source parameters pruint32 i operator= nsxpidlcstring& operator=(const nsxpidlcstring&) - source parameters...
... nsxpidlcstring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this str...
...And 24 more matches
Network request list - Firefox Developer Tools
transferred: the number of bytes that were actually transferred to load the resource, or a message about why the resource was not transferred.
... a number value is less than size if the resource was compressed.
... if the resource was fetched from a service worker cache, then this cell displays "service worker".
...And 24 more matches
Web Audio API - Web APIs
the web audio api provides a powerful and versatile system for controlling audio on the web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.
...several sources — with different types of channel layout — are supported even within a single context.
...they typically start with one or more sources.
...And 24 more matches
HTTP response status codes - HTTP
WebHTTPStatus
103 early hints this status code is primarily intended to be used with the link header, letting the user agent start preloading resources while the server prepares a response.
...the meaning of the success depends on the http method: get: the resource has been fetched and is transmitted in the message body.
... put or post: the resource describing the result of the action is transmitted in the message body.
...And 23 more matches
Enhanced Extension Installation - Archive of obsolete content
c:\program files\mozilla firefox\extensions extension metadata the extension system stores metadata in both of the two locations, in the following files: <location>/extensions/extensions.rdf - an xml/rdf datasource listing all the extensions installed at that location.
... when changes are made to the extensions datasource - new items are installed, old items uninstalled, enabled or disabled, a .autoreg file is written to the profile directory as well, which tells the startup code that the system has been modified, so that it destroys the component registries, finishes pending transactions and regenerates metadata appropriately.
... datasource structure the extension manager implements a rdf datasource which contains a composite of the two xml/rdf datasources at the two install locations.
...And 22 more matches
Index
it's free and open source software, and many other software projects have decided to use it.
...once the application is done with a handle, it should be released, allowing nss to free the associated resources.
...when done, you call a finalization function that will flush out any pending data and free the resources.
...And 22 more matches
Shell global objects
number starting column number for error messages and debug info global global in which to execute the code newcontext if true, create and use a new cx (default: false) catchtermination if true, catch termination (failure without an exception value, as for slow scripts or out-of-memory) and return 'terminated' element if present with value v, convert v to an object o and mark the source as being attached to the dom element o.
... if the property is omitted or v is null, don't attribute the source to any dom element.
...this is what debugger.source.prototype.elementattributename returns.
...And 22 more matches
Index
MozillaTechXPCOMIndex
3 aggregating the in-memory datasource rdf no summary!
... 53 other resources javaxpcom, xpcom:language bindings no summary!
...the resources here provide information about this language binding and how to use it.
...And 22 more matches
nsString external
methods constructors void nsstring_external() - source void nsstring_external(const nsstring_external&) - source parameters nsstring_external& astring void nsstring_external(const nsastring&) - source parameters nsastring& areadable void nsstring_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength ...
... get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const -...
... source returns the length, beginning, and end of a string in one operation.
...And 22 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
the preload value of the <link> element's rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
... the basics you most commonly use <link> to load a css file to style your page with: <link rel="stylesheet" href="styles/main.css"> here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want.
... you will also need to specify: the path to the resource in the href attribute.
...And 22 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
three kinds of packages make up chrome the content package this package is used to contain the main xul and javascript source files.
... the skin package this is used to include source files used as visual elements in the gui, including style sheets and images.
...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 21 more matches
NS ConvertASCIItoUTF16 external
methods constructors void ns_convertasciitoutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertasciitoutf16_external(const char*, pruint32) - source parameters char* adata pruint32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstri...
...ng_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 21 more matches
NS ConvertUTF8toUTF16 external
methods constructors void ns_convertutf8toutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertutf8toutf16_external(const char*, pruint32) - source parameters char* adata pruint32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstrin...
...g_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 21 more matches
PromiseFlatString (External)
methods get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr ...
... nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 21 more matches
nsAutoString (External)
methods get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr ...
... nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 21 more matches
nsDependentString external
methods constructors void nsdependentstring_external() - source void nsdependentstring_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength rebind void rebind(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength get prunichar* get() const - source operato...
...r= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 21 more matches
nsDependentSubstring external
methods constructors void nsdependentsubstring_external() - source void nsdependentsubstring_external(const prunichar*, pruint32) - source parameters prunichar astart pruint32 alength void nsdependentsubstring_external(const nsastring&, pruint32) - source parameters nsastring astr pruint32 astartpos void nsdependentsubstring_external(const nsastring&, pruint32, prui...
...nt32) - source parameters nsastring astr pruint32 astartpos pruint32 alength rebind void rebind(const prunichar*, pruint32) - source parameters prunichar astart pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar* begin prunichar* end prunichar beginreading() const - source endreading prunichar endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 21 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
the rel attribute defines the relationship between a linked resource and the current document.
... link not allowed not allowed dns-prefetch tells the browser to preemptively perform dns resolution for the target resource's origin external resource not allowed not allowed external referenced document is not part of the same site as the current document.
... external resource not allowed not allowed license indicates that the main content of the current document is covered by the copyright license described by the referenced document.
...And 21 more matches
Link types - HTML: Hypertext Markup Language
<link> <a>, <area>, <form> dns-prefetch hints to the browser that a resource is needed, allowing the browser to do a dns lookup and protocol handshaking before a user clicks the link.
... <link> <a>, <area>, <form> external indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site.
... <a>, <area>, <form> <link> first indicates that the hyperlink leads to the first resource of the sequence the current page is in.
...And 21 more matches
NS ConvertUTF16toUTF8 external
methods constructors void ns_convertutf16toutf8_external(const nsastring&) - source parameters nsastring& astr void ns_convertutf16toutf8_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters n...
...scstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
NS LossyConvertUTF16toASCII external
methods constructors void ns_lossyconvertutf16toascii_external(const nsastring&) - source parameters nsastring& astr void ns_lossyconvertutf16toascii_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters ...
... nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
PromiseFlatCString (External)
methods get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr ns...
...acstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsCAutoString (External)
methods get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr ns...
...acstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsCString external
methods constructors void nscstring_external() - source void nscstring_external(const nscstring_external&) - source parameters nscstring_external& astring void nscstring_external(const nsacstring&) - source parameters nsacstring& areadable void nscstring_external(const char*, pruint32) - source parameters char* adata pruint32 alength ...
... get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, begi...
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsDependentCString external
methods constructors void nsdependentcstring_external() - source void nsdependentcstring_external(const char*, pruint32) - source parameters char* adata pruint32 alength rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 alength get char* get() const - source operator= nscstring_...
...external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsDependentCSubstring external
methods constructors void nsdependentcsubstring_external() - source void nsdependentcsubstring_external(const char*, pruint32) - source parameters char* astart pruint32 alength void nsdependentcsubstring_external(const nsacstring&, pruint32) - source parameters nsacstring& astr pruint32 astartpos void nsdependentcsubstring_external(const nsacstring&, pruint32, pruint...
...32) - source parameters nsacstring& astr pruint32 astartpos pruint32 alength rebind void rebind(const char*, pruint32) - source parameters char* astart pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsLiteralCString (External)
methods rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astri...
...ng nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsLiteralString (External)
methods rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astri...
...ng nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsStringContainer (External)
methods beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
... parameters prunichar** begin prunichar** end pruint32 newsize prunichar* beginwriting(pruint32) - source parameters pruint32 <anonymous> endwriting prunichar* endwriting() - source setlength prbool setlength(pruint32) - source parameters pruint32 alen length pruint32 length() const - source isempty prbool isempty() const - source setisvoid void setisvoid(prbool) - source parameters prbool val ...
...And 20 more matches
Migrating from webkitAudioContext - Web APIs
changes to starting and stopping nodes in webkitaudiocontext, there are two ways to start and stop audiobuffersourcenode and oscillatornode: the noteon() and noteoff() methods, and the start() and stop() methods.
... (audiobuffersourcenode has yet another way of starting output: the notegrainon() method.) the noteon()/notegrainon()/noteoff() methods were the original way to start/stop output in these nodes, and in the newer versions of the specification, the noteon() and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method.
... for example, if you have code like the below: var osc = context.createoscillator(); osc.noteon(1); osc.noteoff(1.5); var src = context.createbuffersource(); src.notegrainon(1, 0.25); src.noteoff(2); you can simply change it like this in order to port it to the standard audiocontext api: var osc = context.createoscillator(); osc.start(1); osc.stop(1.5); var src = context.createbuffersource(); src.start(1, 0.25); src.stop(2); remove synchronous buffer creation in the old webkit implementation of web audio, there were two versions of createbuffer(), one which created an initially empty buffer, and one which took an existing arraybuffer containing encoded audio, decoded it and returned the result in the form of ...
...And 20 more matches
Content-Security-Policy - HTTP
the http content-security-policy response header allows web site administrators to control resources the user agent is allowed to load for a given page.
... directives fetch directives fetch directives control the locations from which certain resource types may be loaded.
... child-src defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
...And 20 more matches
HTTP headers - HTTP
WebHTTPHeaders
request headers contain more information about the resource to be fetched, or about the client requesting the resource.
... entity headers contain information about the body of the resource, like its content length or mime type.
... authentication www-authenticate defines the authentication method that should be used to access a resource.
...And 20 more matches
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
3 compatibility sources svg the following sources are used for the compatibility tables on svg elements and attributes: 4 content type needstechnicalreview, svg, types, data types svg makes use of a number of data types.
... 8 other resources reference, svg here is a list of additional resources on svg: 9 project svg no summary!
... 29 azimuth filters, svg, svg attribute the azimuth attribute specifies the direction angle for the light source on the xy plane (clockwise), in degrees from the x axis.
...And 20 more matches
WebRequest.jsm
usage to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) add...
... an array of resource types.
... only invoke the listener for resource types that match one of the types given.
...And 19 more matches
nsACString (External)
methods beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
... parameters char** begin char** end pruint32 newsize char* beginwriting(pruint32) - source parameters pruint32 alen endwriting char* endwriting() - source setlength prbool setlength(pruint32) - source parameters pruint32 alen length pruint32 length() const - source isempty prbool isempty() const - source setisvoid void setisvoid(prbool) - source parameters prbool val isvoid ...
...And 19 more matches
nsCStringContainer (External)
methods beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char* begin char* end char beginreading() const - source endreading char endreading() const - source charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
... parameters char* begin char* end pruint32 newsize char beginwriting(pruint32) - source parameters pruint32 alen endwriting char endwriting() - source setlength prbool setlength(pruint32) - source parameters pruint32 alen length pruint32 length() const - source isempty prbool isempty() const - source setisvoid void setisvoid(prbool) - source parameters prbool val isvoid ...
...And 19 more matches
nsIXULTemplateQueryProcessor
content/xul/templates/public/nsixultemplatequeryprocessor.idlscriptable a query processor takes a template query and generates results for it given a datasource and a reference point.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) a query processor takes a template query and generates results for it given a datasource and a reference point.
...the template builder will supply two variables, the reference variable and the member variable to further indicate what part of the datasource is to be examined in addition to the query itself.
...And 19 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
source image examples before diving in to look at the results of using different kinds of source images and seeing how they look when used with background-size, it would be helpful to look at a few example source images that have different dimensions and sizing settings.
... in each case, we show what the source image looks like rendered in a 150x150 box, and provide a link to the svg source.
... svg source one specified dimension and proportionless this image specifies a width of 100 pixels but no height or intrinsic ratio.
...And 19 more matches
Creating XPI Installer Modules - Archive of obsolete content
a xpi file typically contains the resources to be installed (in this case the barley.jar we want to have installed in the mozilla/bin/chrome/ directory) and an install script that guides the installation process.
...the relatively simple process of finding the appropriate resources (i.e.
...resources are collected in jar archives whose contents are specified in contents.rdf files at their own top level.
...And 18 more matches
Index
found 550 pages: # page tags and summary 1 spidermonkey: the mozilla javascript runtime spidermonkey standalone source code releases can be found on the releases page.
... 4 foss guide, spidermonkey feel free to add your own spidermonkey-based open source projects (and if necessary add categories)!
...at a high level, there are three issues to be aware of: 8 getting spidermonkey source code guide, spidermonkey you can get the spidermonkey source code in gzipped form or directly from the mercurial repository.
...And 18 more matches
JS::CompileOptions
the web platform allows scripts to be loaded from arbitrary cross-origin sources.
... const char *filename() const returns filename of the source code.
... const char16_t *sourcemapurl() const returns the url of the source map.
...And 18 more matches
nsAString (External)
methods beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...parameters prunichar** begin prunichar** end pruint32 newsize prunichar* beginwriting(pruint32) - source parameters pruint32 <anonymous> endwriting prunichar* endwriting() - source setlength prbool setlength(pruint32) - source parameters pruint32 alen length pruint32 length() const - source isempty prbool isempty() const - source setisvoid void setisvoid(prbool) - source parameters prbool val isvoid prbool isvoid() const - source assign void assign(const nsastring&) - source parameters nsastring& astring void assign(const prunichar*, pruint32) - source parameters prunichar* adata p...
...And 18 more matches
Index - Firefox Developer Tools
8 dom inspector internals code, tools, internals, organisation, source there are three main facets to dom inspector.
... 24 debugger.source a debugger.source instance represents either a piece of javascript source code or the serialized text of a block of webassembly code.
...if you select a cache, you'll see a list of the resources it contains.
...And 18 more matches
/loader - Archive of obsolete content
it can be loaded as a regular script tag in documents that have system principals (note: this does not appear to work as of 02.2016 due to "use strict" being added to the file): <script type='application/javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document.
... it can be loaded as a javascript code module: let { loader, require, unload } = components.utils.import('resource://gre/modules/commonjs/toolkit/loader.js'); it can be required as a commonjs module from a module loaded in the loader itself: let { loader, require, unload } = require('toolkit/loader'); what is it good for ?
...there are lots of different possibilities, but the most common setup looks like this: let { loader } = require('toolkit/loader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/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/'...
...And 17 more matches
StringView - Archive of obsolete content
*/ awhole = araw = new ftaview(number(vinput) || 0); } if (ntranscrtype < 8) { var vsource, noutptlen, ncharstart, ncharend, nendidx, fgetinptchrsize, fgetinptchrcode; if (ntranscrtype & 4) { /* input is string */ vsource = vinput; noutptlen = ninptlen = vsource.length; ntranscrtype ^= this.encoding === "utf-32" ?
...math.min(math.max(nlength, 0) + nstartidx, noutptlen) : noutptlen) - 1; } else { /* input is stringview */ vsource = vinput.rawdata; ninptlen = vinput.makeindex(); nstartidx = ncharstart = noffset ?
...oding === "utf-8") { fgetinptchrsize = stringview.getutf8charlength; fgetinptchrcode = stringview.loadutf8charcode; } else if (vinput.encoding === "utf-16") { fgetinptchrsize = stringview.getutf16charlength; fgetinptchrcode = stringview.loadutf16charcode; } else { ntranscrtype &= 1; } } if (noutptlen === 0 || ntranscrtype < 4 && vsource.encoding === this.encoding && ncharstart === 0 && noutptlen === ninptlen) { /* the encoding is the same, the length too and the offset is 0...
...And 17 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.
...it is the mechanism used by browsers to retrieve any published resource on the web.
... url stands for uniform resource locator.
...And 17 more matches
Window.open() - Web APIs
WebAPIWindowopen
the window interface's open() method loads the specified resource into the new or existing browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new browsing context is opened in a new tab or a new window, and the specified resource is loaded into it.
... syntax var window = window.open(url, windowname, [windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded.
...And 17 more matches
New Security Model for Web Services - Archive of obsolete content
securing resources from untrusted scripts behind firewalls introduction this page describes an alternative mechanism which can be used to protect all internal resources against requests from sandboxed scripts.
...when an attempt is made to access a resource at a previously-unknown uri, the sandbox reads a file at that domain with declarations to determine whether access is permitted to the script.
...these scripts may legitimately require access to external resources, but permitting them to access internal resources permits the compromise of these resources that would normally not be available to applications outside of the firewall.
...And 16 more matches
Trees and Templates - Archive of obsolete content
adding datasources to trees when using a tree, you will often use a template to build its content, to handle a large amount of hierarchial data.
...you need to add a datasources and a ref attribute to the tree element, which specify the datasource and root node to display.
...the following example uses the history datasource: <tree datasources="rdf:history" ref="nc:historybydate" flags="dont-build-content"> as described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder.
...And 16 more matches
Mozilla release FAQ - Archive of obsolete content
the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached the point where netscape was comfortable making a release, and so netscape 6.0 was released.
... netscape 6.0 and above are based off of the mozilla source.
...the source to mozilla was first released on 31 march 1998.
...And 16 more matches
Video and audio content - Learn web development
here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed.
... the embedded video will look something like this: you can try the example live here (see also the source code.) using multiple source formats to improve compatibility there's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like internet explorer or even an older version of safari.
...take a look at the following updated example (try it live here, also): <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
...And 16 more matches
Client-Server Overview - Learn web development
this request includes: a url identifying the target server and resource (e.g.
...the different methods/verbs and their associated actions are listed below: get: get a specific resource (e.g.
... post: create a new resource (e.g.
...And 16 more matches
L20n Javascript API
l20n javascript api var ctx = l20n.getcontext(); ctx.linkresource('./locales/strings.l20n'); ctx.requestlocales(); when you freeze the context by calling requestlocales, the resource files will be retrieved, parsed and compiled.
... you can listen to the ready event (emitted by the context instance when all the resources have been compiled) and use ctx.getsync and ctx.getentitysync to get translations synchronously.
... when a context instance is frozen, no more resources can be added or linked.
...And 16 more matches
nsIXULTemplateBuilder
the nsitemplatebuilder interface controls the display of elements using a xul template element and is automatically attached to an element containing a datasources attribute.
... a template builder, given an input source of data, a template, and a reference point, generates a list of results from the input, and copies part of the template for each result.
...as an example, for an xml data source the initial reference point would be a specific node in the dom tree and a template might generate a list of all child nodes.
...And 16 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
the source for this interactive example is stored in a github repository.
... because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources.
... csp a content security policy enforced for the embedded resource.
...And 16 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
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>.
... 47 html attribute: rel attribute, attributes, constraint validation, link, form, rel the rel attribute defines the relationship between a linked resource and the current document.
...it may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
...And 16 more matches
CSP: script-src - HTTP
the http content-security-policy (csp) script-src directive specifies valid sources for javascript.
... syntax one or more sources can be allowed for the script-src policy: content-security-policy: script-src <source>; content-security-policy: script-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 16 more matches
Index - Learn web development
you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it.
... beginner, infrastructure, needsactivelearning, url, resources, urls with hypertext and http, url is one of the key concepts of the web.
... it is the mechanism used by browsers to retrieve any published resource on the web.
...And 15 more matches
UI Tour - Firefox Developer Tools
the ui is split vertically into three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the javascript source files loaded into the page, and enables you to select one to debug.
... at the top level sources are organized by origin, and under that they're organized by the directory structure from which they are served.
... web extensions are listed in the source list pane using the extension's name.
...And 15 more matches
Debugger - Firefox Developer Tools
setting this flag to true is intended for uses of subsystems of the debugger api (e.g, debugger.source) for purposes other than step debugging a target javascript program.
... allowwasmbinarysource a boolean value indicating whether webassembly sources will be available in binary form.
... sourcehandler(asuffusionofyellow) this method is never called.
...And 15 more matches
Using images - Web APIs
you can even use the image produced by other canvas elements on the same page as the source!
... importing images into a canvas is basically a two step process: get a reference to an htmlimageelement object or to another canvas element as a source.
... getting images to draw the canvas api is able to use any of the following data types as an image source: htmlimageelement these are images created using the image() constructor, as well as any <img> element.
...And 15 more matches
ui/frame - Archive of obsolete content
if the frame script initiates the conversation, you need to specify "*" as the origin: window.parent.postmessage("ping", "*"); if the frame script has received a message from the add-on already, it can use the origin property of the event object passed to the message hander: // listen for messages from the add-on, and send a reply window.addeventlistener("message", function(event) { event.source.postmessage("pong", event.origin) }, false); this frame script listens to change events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element.
...to do this, you call postmessage() not on the frame itself but on the source attribute of the object passed into an event listener.
... for targetorigin, you can use the origin property of the event object passed to the message listener: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html", onmessage: function(e) { // message only the frame that pinged us e.source.postmessage("pong", e.origin); } }); var toolbar = toolbar({ name: "ping-pong", title: "ping pong", items: [frame] }); this does not have to be the message event: the other events frame can emit: attach, load and ready, also provide access to source and origin.
...And 14 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own.
... step 1: use services.jsm if you load one of mozilla's internal jsm files, for example services.jsm, you'll do so via privileged javascript code like this: components.utils.import("resource://gre/modules/services.jsm"); from here on out, it is assumed you've imported services.jsm somewhere at the top of whatever file you're in and will be using it in all code examples.
... the examples will also assume that you know how to properly add instructions to your add-on's chrome.manifest to add and remove resource, chrome, locale, & etc.
...And 14 more matches
The Implementation of the Application Object Model - Archive of obsolete content
rdf stands for resource description framework, a rather intimidating name that doesn't do much to help the layman understand exactly what it does.
...the data itself can be fed in from any number of different sources (e.g., from a local file system, from your bookmarks file, or from some remote downloadable rdf file), and can then be combined into a single graph.
...because rdf can suck up data from a remote location (e.g., from a downloadable rdf file), and also suck up data from a local source, it can take the remote data and combine it with local data.
...And 14 more matches
NSS functions
other sources of information: the nss_reference documents the functions most commonly used by applications to support ssl.
...the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions nss_getclientauthdata mxr 3.2 and later nss_setdomesticpolicy mxr 3.2 and later nss_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and later nssssl_versioncheck mxr 3.2.1 and later ssl_authcertificate mxr 3.2 and later ssl_authcertificatehook mxr 3.2 and later ssl_badcerthook mxr 3.2 and later ssl_certdbhandleset mxr 3.2 and later ssl_canbypass mxr 3.11.7 and later ssl_cipherpolicyget mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_ciphe...
...And 14 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
the source for this interactive example is stored in a github repository.
... importance indicates the relative download importance of the resource.
... referrerpolicy a string indicating which referrer to use when fetching the resource: no-referrer: the referer header will not be sent.
...And 14 more matches
Web audio codec guide - Web media technologies
factors affecting the encoded audio there are two general categories of factors that affect the encoded audio which is output by an audio codec's encoder: details about the source audio's format and contents, and the codec and its configuration during the encoding process.
... for each factor that affects the encoded audio, there is a simple rule that is nearly always true: because the fidelity of digital audio is determined by the granularity and precision of the samples taken to convert it into a data stream, the more data used to represent the digital version of the audio, the more closely the sampled sound will match the source material.
... the effect of source audio format on encoded audio output because encoded audio inherently uses fewer bits to represent each sample, the source audio format may actually have less impact on the encoded audio size than one might expect.
...And 14 more matches
Simple Thunderbird build
good internet connection for the initial source download.
... 2,743 mapioid.h 02/06/2009 17:02 32,978 mapispi.h 02/06/2009 17:02 54,395 mapitags.h 02/06/2009 17:02 26,467 mapiutil.h 02/06/2009 17:02 97,301 mapival.h 02/06/2009 17:02 9,334 mapiwin.h 02/06/2009 17:02 1,906 mapiwz.h 02/06/2009 17:02 18,277 mapix.h 02/06/2009 17:02 5,012 mspst.h get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
... note: parts of the build process also have problems when the source code is in a directory where the path is long (nested many levels deep).
...And 13 more matches
Debugger.Script - Firefox Developer Tools
note that spidermonkey may use the same debugger.script instances for equivalent functions or evaluated code—that is, scripts representing the same source code, at the same position in the same source file, evaluated in the same lexical environment.
...if this debugger.script’s source property is non-null, then this is equal to source.url.
... source if the instance refers to a jsscript, the debugger.source instance representing the source code from which this script was produced.
...And 13 more matches
Event reference
most common categories resource events event name fired when error a resource failed to load.
... abort the loading of a resource has been aborted.
... load a resource and its dependent resources have finished loading.
...And 13 more matches
Audio and video manipulation - Developer guides
in this case, we'll show both the source video and the output greyscale frames.
... ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.
... html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames.
...And 13 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
it may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
... the source for this interactive example is stored in a github repository.
...however, this can be useful when creating media elements whose source will be set at a later time, under user control.
...And 13 more matches
Content negotiation - HTTP
in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding).
...html5 provides alternatives to content negotiation via, for example, the <source> element.
... principles of content negotiation a specific document is called a resource.
...And 13 more matches
Object.assign() - JavaScript
the object.assign() method copies all enumerable own properties from one or more source objects to a target object.
... the source for this interactive example is stored in a github repository.
... syntax object.assign(target, ...sources) parameters target the target object — what to apply the sources’ properties to, which is returned after it is modified.
...And 13 more matches
Web video codec guide - Web media technologies
most video codecs are lossy, in that the decoded video does not precisely match the source.
... quicktime mpeg-2 mpeg-2 part 2 visual mp4, mpeg, quicktime theora theora ogg vp8 video processor 8 3gp, ogg, webm vp9 video processor 9 mp4, ogg, webm factors affecting the encoded video as is the case with any encoder, there are two basic groups of factors affecting the size and quality of the encoded video: specifics about the source video's format and contents, and the characteristics and configuration of the codec used while encoding the video.
... effect of source video format on encoded output the degree to which the format of the source video will affect the output varies depending on the codec and how it works.
...And 13 more matches
Filtering - Archive of obsolete content
in this example, the menulist is hard-coded to contain the items that we know are in the datasource.
...in the previous example, we hard-coded a menulist with the list of countries, but we could also generate this list from the datasource.
... the same datasource may used for both the photos list and the menulist.
...And 12 more matches
How Mozilla's build system works
for many developers, typing mach build to build the tree is sufficient to work with the source tree.
... phase 2: build backend preparation and the build definition once configure has determined what the current build configuration is, we need to apply this to the source tree so we can actually build.
... the recursive make backend divides the source tree into tiers.
...And 12 more matches
nsACString_internal
methods constructors void nsacstring_internal(const nscsubstringtuple&) - source this is public to support automatic conversion of tuple to string base type, which helps avoid converting to nstastring.
... parameters nscsubstringtuple& tuple void nsacstring_internal(char*, pruint32, pruint32) - source parameters char* data pruint32 length pruint32 flags beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsreadingiterator<char>&) const - source deprecated reading iterators parameters nsreadingiterator<char>& iter char*& beginreading(const char*&) const - source parameters char*& iter endreading char* endreading() const - source nsreadingiterator<char>& endreading(nsreadingiterator<char>&) const - source parameters nsreadingiterator<char>& iter char*& endreading(const char*&) const - source parameters char*& iter beginwriting char* beginwriting() - source writing iterators nswritingiterato...
...r<char>& beginwriting(nswritingiterator<char>&) - source deprecated writing iterators parameters nswritingiterator<char>& iter char*& beginwriting(char*&) - source parameters char*& iter endwriting char* endwriting() - source nswritingiterator<char>& endwriting(nswritingiterator<char>&) - source parameters nswritingiterator<char>& iter char*& endwriting(char*&) - source parameters char*& iter data char* data() const - source accessors length pruint32 length() const - source isempty prbool isempty() const - source isvoid prbool isvoid() const - source isterminated prbool isterminated() const - source charat char charat(pruint32) const - source parameters pruint32 i operator[] char operator[](pruint32) const - source ...
...And 12 more matches
nsAString_internal
methods constructors void nsastring_internal(const nssubstringtuple&) - source this is public to support automatic conversion of tuple to string base type, which helps avoid converting to nstastring.
... parameters nssubstringtuple& tuple void nsastring_internal(prunichar*, pruint32, pruint32) - source parameters prunichar* data pruint32 length pruint32 flags beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterator<short unsigned int>&) const - source deprecated reading iterators parameters nsreadingiterator<short unsigned int>& iter prunichar*& beginreading(const prunichar*&) const - source parameters prunichar*& iter endreading prunichar* endreading() const - source nsreadingiterator<short unsigned int>& endreading(nsreadingiterator<short unsigned int>&) const - source parameters nsreadingiterator<short unsigned int>& iter prunichar*& endreading(const prunichar*&) co...
...nst - source parameters prunichar*& iter beginwriting prunichar* beginwriting() - source writing iterators nswritingiterator<short unsigned int>& beginwriting(nswritingiterator<short unsigned int>&) - source deprecated writing iterators parameters nswritingiterator<short unsigned int>& iter prunichar*& beginwriting(prunichar*&) - source parameters prunichar*& iter endwriting prunichar* endwriting() - source nswritingiterator<short unsigned int>& endwriting(nswritingiterator<short unsigned int>&) - source parameters nswritingiterator<short unsigned int>& iter prunichar*& endwriting(prunichar*&) - source parameters prunichar*& iter data prunichar* data() const - source accessors length pruint32 length() const - source isempty prbool i...
...And 12 more matches
nsDependentCSubstring
methods constructors void nsdependentcsubstring(const nsacstring_internal&, pruint32, pruint32) - source parameters nsacstring_internal& str pruint32 startpos pruint32 length void nsdependentcsubstring(const char*, const char*) - source parameters char* start char* end void nsdependentcsubstring(const nsreadingiterator<char>&, const nsreadingiterator<char>&) - source parameters nsreadingiterator<char>& start nsreadingiterator<char>& end void nsdependentcsubstring() - source re...
...bind void rebind(const nsacstring_internal&, pruint32, pruint32) - source parameters nsacstring_internal& <anonymous> pruint32 startpos pruint32 length void rebind(const char*, const char*) - source parameters char* start char* end beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsreadingiterator<char>&) const - source deprecated reading iterators parameters nsreadingiterator<char>& iter char*& beginreading(const char*&) const - source parameters char*& iter endreading char* endreading() const - source nsreadingiterator<char>& endreading(nsreadingiterator<char>&) const - source parameters nsreadingiterator<char>& iter char*& endreading(const char*&) const - source parameters char*& iter ...
... beginwriting char* beginwriting() - source writing iterators nswritingiterator<char>& beginwriting(nswritingiterator<char>&) - source deprecated writing iterators parameters nswritingiterator<char>& iter char*& beginwriting(char*&) - source parameters char*& iter endwriting char* endwriting() - source nswritingiterator<char>& endwriting(nswritingiterator<char>&) - source parameters nswritingiterator<char>& iter char*& endwriting(char*&) - source parameters char*& iter data char* data() const - source accessors length pruint32 length() const - source isempty prbool isempty() const - source isvoid prbool isvoid() const - source isterminated prbool isterminated() const - source charat char charat(pruint32) const - source...
...And 12 more matches
nsDependentSubstring
methods constructors void nsdependentsubstring(const nsastring_internal&, pruint32, pruint32) - source parameters nsastring_internal& str pruint32 startpos pruint32 length void nsdependentsubstring(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end void nsdependentsubstring(const nsreadingiterator<short unsigned int>&, const nsreadingiterator<short unsigned int>&) - source parameters nsreadingiterator<short unsigned int>& start nsreadingiterator<...
...short unsigned int>& end void nsdependentsubstring() - source rebind void rebind(const nsastring_internal&, pruint32, pruint32) - source parameters nsastring_internal& <anonymous> pruint32 startpos pruint32 length void rebind(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterator<short unsigned int>&) const - source deprecated reading iterators parameters nsreadingiterator<short unsigned int>& iter prunichar*& beginreading(const prunichar*&) const - source parameters prunichar*& iter endreading prunichar* endreading() const - source nsreadingiterator<short unsigned int>& endr...
...eading(nsreadingiterator<short unsigned int>&) const - source parameters nsreadingiterator<short unsigned int>& iter prunichar*& endreading(const prunichar*&) const - source parameters prunichar*& iter beginwriting prunichar* beginwriting() - source writing iterators nswritingiterator<short unsigned int>& beginwriting(nswritingiterator<short unsigned int>&) - source deprecated writing iterators parameters nswritingiterator<short unsigned int>& iter prunichar*& beginwriting(prunichar*&) - source parameters prunichar*& iter endwriting prunichar* endwriting() - source nswritingiterator<short unsigned int>& endwriting(nswritingiterator<short unsigned int>&) - source parameters nswritingiterator<short unsigned int>& iter prunichar*& endwriting(prunichar*&)...
...And 12 more matches
Style Editor - Firefox Developer Tools
this is where the source for the selected style sheet is available for you to read and edit.
... source map support web developers often create css files using a preprocessor like sass, less, or stylus.
...so you'd need to edit the generated css, then manually work out how to reapply that to the original source.
...And 12 more matches
-webkit-mask-composite - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-composite: clear; -webkit-mask-composite: copy; -webkit-mask-composite: source-over; -webkit-mask-composite: source-in; -webkit-mask-composite: source-out; -webkit-mask-composite: source-atop; -webkit-mask-composite: destination-over; -webkit-mask-composite: destination-in; -webkit-mask-composite: destination-out; -webkit-mask-composite: destination-atop; -webkit-mask-composite: xor; /* global values */ -webkit-mask-composite: inherit; -webkit-mask-composite: initial; -webkit-mask-composite: unse...
... syntax values clear overlapping pixels in the source mask image and the destination mask image are cleared.
... copy the source mask image replaces the destination mask image.
...And 12 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
the source for this interactive example is stored in a github repository.
...however, this can be useful when creating media elements whose source will be set at a later time, under user control.
...cors-enabled resources can be reused in the <canvas> element without being tainted.
...And 12 more matches
CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets.
... syntax one or more sources can be allowed for the style-src policy: content-security-policy: style-src <source>; content-security-policy: style-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 12 more matches
XML Templates - Archive of obsolete content
« previousnext » mozilla also supports the use of xml datasources.
...when an xml source is desired, specify a querytype attribute on the root node of the template to the value xml.
... this indicates to the template builder that an xml source is being used as that the queries use syntax that is specific to xml.
...And 11 more matches
XPCOM Examples - Archive of obsolete content
window management this example contains rdf datasource that will be seen in the later section.
... creating a window menu the list of currently open mozilla windows can be used as an rdf datasource.
...the datasource for this is rdf:window-mediator.
...And 11 more matches
XULRunner Hall of Fame - Archive of obsolete content
source chatzilla a standalone version of the chatzilla irc client.
...source evergreen - staff client evergreen is an open source library system.
... source ieditweb a client/server based content manager and internet application suite.
...And 11 more matches
Beginner's guide to media queries - Learn web development
@media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source.
...for example, to make the color blue if the viewport is narrower than 600 pixels, use max-width: @media screen and (max-width: 600px) { body { color: blue; } } open this example in the browser, or view the source.
... @media (orientation: landscape) { body { color: rebeccapurple; } } open this example in the browser, or view the source.
...And 11 more matches
Debugging on Mac OS X
try builds use the developer.entitlements.xml file from the source tree while production builds use production.entitlements.xml.
...to work around that, the steps below have you initialize the project outside the mozilla source tree, close the project, copy the .xcodeproj project "file" into the source tree, and then reopen the project to finish setting it up.
... note also that since xcode 7.3.1 it doesn't seem to be possible to have the xcode project live outside the source tree.
...And 11 more matches
Using JavaScript code modules
for example: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size + 3); // displays "6" alert(dummy); // displays "dummy is not defined" because 'dummy' was not exported from the module note: when you're testing changes to a code module, be sure to change the application's build id (e.g., the version) before your next test run; otherwise, you may find yourself running the ...
...(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 11 more matches
nsIScriptError
method overview void init(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category); void initwithwindowid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid); autf8string tostring(); attributes ...
... sourceline astring the line from the file specified by sourcename.
...you may pass null if you are lazy; that will prevent showing the source line in javascript console.
...And 11 more matches
Mozilla
adding a new event this draft document covers how to add a new event to the mozilla (firefox) source code.
... choosing the right memory allocator there are a lot of different memory allocators in the mozilla source tree.
...you can choose either depending on your needs and resources.
...And 11 more matches
PannerNode - Web APIs
the pannernode interface represents the position and behavior of an audio source signal in space.
... pannernode.distancemodel an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
... pannernode.maxdistance a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further.
...And 11 more matches
Window - Web APIs
WebAPIWindow
domparser domparser can parse xml or html source stored in a string into a dom document.
... xmlserializer converts a dom tree into xml or html source.
... windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
...And 11 more matches
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
we can also position items using line-based placement of grid template areas, without considering their location in the source.
...however, these are not a substitute for correct ordering of the document source.
...the underlying source is what controls things like text to speech, and the tab order of the document.
...And 11 more matches
HTML attribute reference - HTML: Hypertext Markup Language
cite <blockquote>, <del>, <ins>, <q> contains a uri which points to the source of the quote or change.
... data <object> specifies the url of the resource.
... download <a>, <area> indicates that the hyperlink is to be used for downloading a resource.
...And 11 more matches
CSP: img-src - HTTP
the http content-security-policy img-src directive specifies valid sources of images and favicons.
... syntax one or more sources can be allowed for the img-src policy: content-security-policy: img-src <source>; content-security-policy: img-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 11 more matches
CSP: script-src-attr - HTTP
the http content-security-policy (csp) script-src-attr directive specifies valid sources for javascript inline event handlers.
... syntax one or more sources can be allowed for the script-src-attr policy: 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 ho...
...the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 11 more matches
CSP: script-src-elem - HTTP
the http content-security-policy (csp) script-src-elem directive specifies valid sources for javascript <script> elements, but not inline script event handlers like onclick.
... syntax one or more sources can be allowed for the script-src-elem policy: 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.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 11 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
for web developers, for example, it provides less fine-grained control over the experience, and it can strain bandwidth and other resources.
...extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
... html and web standards have evolved and now offer flexible and fine-grained control to layout as well supporting dhtml, powerful programming languages like javascript, and additional media through embeddable third-party resources like flash, java, vrml, etc.
...And 10 more matches
Code snippets - Archive of obsolete content
components.utils.import("resource://services-sync/main.js"); // obtain a reference to the main firefox window.
... 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.storageurl + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/global: deletepath("meta/global"); // delete keys: deletepath("crypto/keys"); // delete server: deletepath(""); corrup...
...t a single engine on the server let engine = "bookmarks"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); components.utils.import("resource://services-sync/util.js"); let r = new resource(weave.service.storageurl + "meta/global"); let g = r.get(); let envelope = json.parse(g); let payload = json.parse(envelope.payload); payload.engines[engine].syncid = weave.utils.makeguid(); // or any other guid you like.
...And 10 more matches
Venkman Introduction - Archive of obsolete content
the source code view is empty until you select a script, and the interactive session view starts up with basic startup information.
...while in pretty print mode, the contents of the source view will contain the decompiled source text for the selected function.
... this is the same text you would get from the tosource method of the function prototype.
...And 10 more matches
Additional Navigation - Archive of obsolete content
since the subject of an rdf arc is always a resource, the subject may be a resource uri.
... the object attribute may be a resource uri or a literal value.
...since there are no variables to fill into the triple, the builder will just confirm that such a triple exists in the datasource.
...And 10 more matches
Template Logging - Archive of obsolete content
<vbox datasources="..." flags="logging"/> the flags attribute on the root element of the template should include the logging flag.
...for an rdf datasource, this will be the result's resource.
... for other datasources, this may be a somewhat random value.
...And 10 more matches
Standard OS Libraries
components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long which is ctypes.long */ // https://msdn.microsoft.com/en-us/library/windows/desktop/dd162805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpo...
...[ { "x": ctypes.long }, { "y": ctypes.long } ]); /* declare the signature of the function we are going to call */ var getcursorpos = lib.declare('getcursorpos', ctypes.winapi_abi, ctypes.bool, point.ptr ); /* use it like this */ var point = point(); var ret = getcursorpos(point.address()); components.utils.reporterror(ret); components.utils.reporterror(point); lib.close(); resources for winapi githubgists :: noitidart / search · winapi - winapi js-ctypes snippets that can be copied and pasted to scratchpad com see using com from js-ctypes.
... components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types var gint = ctypes.int; var gdkdevice = ctypes.structtype('gdkdevice'); var gdkmodifiertype = ctypes.int; var gdkwindow = ctypes.structtype('gdkwindow'); var void = ctypes.void_t; // https://developer.gnome.org/gdk3/stable/gdk3-windows.html#gdk-get-default-root-window var gdk_get_default_root_window = gdk.declare...
...And 10 more matches
HTMLMediaElement - Web APIs
htmlmediaelement.buffered read only returns a timeranges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed.
... htmlmediaelement.controls is a boolean that reflects the controls html attribute, indicating whether user interface items for controlling the resource should be displayed.
... htmlmediaelement.currentsrc read only returns a domstring with the absolute url of the chosen media resource.
...And 10 more matches
Request.cache - Web APIs
WebAPIRequestcache
if the server indicates that the resource has not changed, it will be returned from the cache.
... otherwise the resource will be downloaded from the server and the cache will be updated.
... if there is no match, the browser will make a normal request, and will update the cache with the downloaded resource.
...And 10 more matches
Using Service Workers - Web APIs
the primary use of onactivate is for cleanup of resources used in previous versions of a service worker script.
...(see our promises test example for the source code, or look at it running live.) note: a real service worker implementation would use caching and onfetch rather than the xmlhttprequest api.
... you can see the source code on github, and view the example live.
...And 10 more matches
Web APIs
WebAPI
i cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture 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 eventsuurl apivvibration apivisual viewport wweb anim...
... a angle_instanced_arrays abortcontroller abortsignal absoluteorientationsensor abstractrange abstractworker accelerometer addresserrors aescbcparams aesctrparams aesgcmparams aeskeygenparams ambientlightsensor analysernode animation animationeffect animationevent animationplaybackevent animationtimeline arraybufferview attr audiobuffer audiobuffersourcenode audioconfiguration audiocontext audiocontextlatencycategory audiocontextoptions audiodestinationnode audiolistener audionode audionodeoptions audioparam audioparamdescriptor audioparammap audioprocessingevent audioscheduledsourcenode audiotrack audiotracklist audioworklet audioworkletglobalscope audioworkletnode audioworkletnodeoptions audioworkletprocessor authenticatorassertionrespo...
...ardresponse batterymanager beforeinstallpromptevent beforeunloadevent biquadfilternode blob blobbuilder blobevent bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration c...
...And 10 more matches
border-image - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... 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-i...
... note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead.
...And 10 more matches
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
the html <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
... the browser will consider each child <source> element and choose the best match among them.
... the source for this interactive example is stored in a github repository.
...And 10 more matches
CSP: base-uri - HTTP
syntax one or more sources can be allowed for the base-uri policy: content-security-policy: base-uri <source>; content-security-policy: base-uri <source> <source>; sources while this directive uses the same arguments as other csp directives, some of them don’t make sense for `<base>`, such as the keywords 'unsafe-inline' and 'strict-dynamic' <source> can be one of the following: <host-source> internet hosts by...
...the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
... <scheme-source> a scheme such as http: or https:.
...And 10 more matches
CSP: connect-src - HTTP
the apis that are restricted are: <a> ping, fetch, xmlhttprequest, websocket, eventsource, and navigator.sendbeacon().
... syntax one or more sources can be allowed for the connect-src policy: content-security-policy: connect-src <source>; content-security-policy: connect-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 10 more matches
CSP: default-src - HTTP
at are absent, the user agent looks for the default-src directive and uses this value for it: child-src connect-src font-src frame-src img-src manifest-src media-src object-src prefetch-src script-src script-src-elem script-src-attr style-src style-src-elem style-src-attr worker-src csp version 1 directive type fetch directive syntax one or more sources can be allowed for the default-src policy: content-security-policy: default-src <source>; content-security-policy: default-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
... <scheme-source> a scheme such as http: or https:.
...And 10 more matches
CSP: font-src - HTTP
the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.
... syntax one or more sources can be allowed for the font-src policy: content-security-policy: font-src <source>; content-security-policy: font-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 10 more matches
CSP: form-action - HTTP
syntax one or more sources can be set for the form-action policy: content-security-policy: form-action <source>; content-security-policy: form-action <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
... <scheme-source> a scheme such as http: or https:.
...And 10 more matches
CSP: navigate-to - HTTP
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.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
... <scheme-source> a scheme such as http: or https:.
...And 10 more matches
CSP: prefetch-src - HTTP
the http content-security-policy (csp) prefetch-src directive specifies valid resources that may be prefetched or prerendered.
... syntax one or more sources can be allowed for the prefetch-src policy: content-security-policy: prefetch-src <source>; content-security-policy: prefetch-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 10 more matches
File I/O - Archive of obsolete content
creating an nsifile object components.utils.import("resource://gre/modules/fileutils.jsm"); var file = new fileutils.file("/home"); or the same without using fileutils.jsm: var file = components.classes["@mozilla.org/file/local;1"].
... getting files in special directories components.utils.import("resource://gre/modules/fileutils.jsm"); // get the "data.txt" file in the profile directory var file = fileutils.getfile("profd", ["data.txt"]); or the same without using fileutils.jsm: // get profile directory.
... resource:app d the application directory in an xulrunner application.
...And 9 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
using venkman read in source code activate venkman, and then select open windows:quicknote.xul:files on the top-left of the screen.
... double-click on quicknote.js to open it in source-code view (figure 2).
... fixme: figure 2: selecting source code inserting breakpoints now you’ll want to set some breakpoints.
...And 9 more matches
How to implement a custom XUL query processor component - Archive of obsolete content
xul supports templating to create a block of content from a datasource query.
...the component will hold a small array of javascript objects as its datasource.
... in practice, you would use your own custom source of data.
...And 9 more matches
Accessible multimedia - Learn web development
for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio.
... here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... first of all, let's look at the html for the video player, in the html: <section class="player"> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
...And 9 more matches
Responsive images - Learn web development
here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css much in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and centers itself in the available space.
...the standard <img> element traditionally only lets you point the browser to a single source file: <img src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one.
... you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line.
...And 9 more matches
Handling common JavaScript problems - Learn web development
incorrectly using functions inside loops — for example, in bad-for-loop.html (see source code), we loop through 10 iterations, each time creating a paragraph and adding an onclick event handler to it.
...see good-for-loop.html (see the source code also) for a version that works.
... make a local copy of our broken-ajax.html example (see the source code also).
...And 9 more matches
Introducing a complete toolchain - Learn web development
github to manage our source code control.
... as mentioned previously, github is a source code repository service that adds community features such as issue tracking, following project releases and much more.
...git is currently the most popular source code revision control tool available to developers — revision control provides many advantages, such as a way to backup your work in a remote place, and a mechanism to work in a team on the same project without fear of overwriting each other's code.
...And 9 more matches
Simple Instantbird build
good internet connection for the initial source download.
... windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites tip: after completing setup for your os, and before you get the source, you can opt to add the progressextension to your mercurial.ini (for windows) or .hgrc (for *nix / mac) file.
... get the source note: on windows, you won't be able to build the instantbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
...And 9 more matches
NetUtil.jsm
to use these utilities, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/netutil.jsm"); once you've imported the module, you can then use its methods.
... method overview nsiasyncstreamcopier asynccopy(nsiinputstream asource, nsioutputstream asink, [optional] acallback) void asyncfetch(asource, acallback) nsichannel newchannel(awhattoload, [optional] aorigincharset, [optional] nsiuri abaseuri) nsiuri newuri(atarget, [optional] aorigincharset, [optional] nsiuri abaseuri) string readinputstreamtostring(ainputstream, acount, aoptions) attributes attribute type description ioservice nsiioservice returns a reference to nsiioservice.
... methods asynccopy() the asynccopy() method performs a simple asynchronous copy of data from a source input stream to a destination output stream.
...And 9 more matches
Examples
components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { throw new error("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise chain.
... components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { console.log("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise chain.
... using a promise returned by a function (compact) the same code as the previous example is usually written with a more compact syntax: components.utils.import("resource://gre/modules/osfile.jsm") let path = os.path.join(os.constants.path.tmpdir, "file.txt"); os.file.exists(path).then(exists => { console.log(exists ?
...And 9 more matches
Localizing without a specialized tool
from the create a new localization document, an interested localizer can follow a technical step-by-step process that starts the localization process by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code.
... folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all commands in the documentation as needed by your custom set-up.
... get the source change your current directory to your working directory with the following command: $ cd /path/to/your/working/directory first, you will need to check out the sources of mozilla-1.9.2 together with the en-us strings.
...And 9 more matches
nsIIOService
please note, aloadingprincipal is *not* the principal of the resource being loaded.
... but rather the principal of the context where the resource will be used.
...the triggeringprincipal is the principal of the resource that caused this particular url to be loaded.
...And 9 more matches
DOMMatrixReadOnly - Web APIs
dommatrixreadonly.flipx() returns a new dommatrix created by flipping the source matrix around its x-axis.
... dommatrixreadonly.flipy() returns a new dommatrix created by flipping the source matrix around its y-axis.
... dommatrixreadonly.inverse() returns a new dommatrix created by inverting the source matrix.
...And 9 more matches
Ordering Flex Items - CSS: Cascading Style Sheets
reverse the display of the items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values ​​keep the items in the same order that they appear in the document source order and display them sequentially from the start line.
...the specification says the following on this matter: “note: the reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order.
... this allows authors to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order.
...And 9 more matches
CSP: child-src - HTTP
the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
... syntax one or more sources can be allowed for the child-src policy: content-security-policy: child-src <source>; content-security-policy: child-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
CSP: frame-src - HTTP
the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
... syntax one or more sources can be allowed for the frame-src policy: content-security-policy: frame-src <source>; content-security-policy: frame-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
CSP: manifest-src - HTTP
the http content-security-policy: manifest-src directive specifies which manifest can be applied to the resource.
... syntax one or more sources can be allowed for the manifest-src policy: content-security-policy: manifest-src <source>; content-security-policy: manifest-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video> elements.
... syntax one or more sources can be allowed for the media-src policy: content-security-policy: media-src <source>; content-security-policy: media-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
CSP: object-src - HTTP
the http content-security-policy object-src directive specifies valid sources for the <object>, <embed>, and <applet> elements.
... syntax one or more sources can be allowed for the object-src policy: content-security-policy: object-src <source>; content-security-policy: object-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
CSP: style-src-attr - HTTP
the http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to individual dom elements.
... syntax one or more sources can be allowed for the style-src-attr policy: 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.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
CSP: style-src-elem - HTTP
the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".
... syntax one or more sources can be allowed for the style-src-elem policy: 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.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
CSP: worker-src - HTTP
the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.
... syntax one or more sources can be allowed for the worker-src policy: content-security-policy: worker-src <source>; content-security-policy: worker-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 9 more matches
Tamarin build documentation - Archive of obsolete content
tamarin source versions the following instructions are for obtaining and building the tamarin central source code.
... windows 32 and 64 bit mac osx 10.4, 10.5 on ppc mac osx 10.5, 10.6 on intel linux 32 and 64 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central.
... active development source resides at tamarin redux.
...And 8 more matches
Sorting Results - Archive of obsolete content
for an xml datasource, generated content will be output in the order corresponding to the results of the xpath query expression.
... for an sqlite datasource, the generated content corresponds to the order of results of the sql query.
... for an rdf datasource, again, the results are in the order the query generates them, although except in the case of an rdf seq, this order is arbitrary as rdf triples don't occur in any particular order.
...And 8 more matches
Graceful asynchronous programming with Promises - Learn web development
so instead of waiting for the user, getting the chosen devices enabled, and directly returning the mediastream for the stream created from the selected sources, getusermedia() returns a promise which is resolved with the mediastream once it's available.
... note: you can see our version of the example live (see the source code also).
... download our source files (coffee.jpg, tea.jpg, and description.txt), or feel free to substitute your own.
...And 8 more matches
Old Thunderbird build
good internet connection for the initial source download.
... windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
... note: parts of the build process also have problems when the source code is in a directory where the path is long (nested many levels deep).
...And 8 more matches
mach
mach (german for to make) is a program via the "command-line interface" to help developers perform installation tasks such as installing firefox from its c++ source code.
... running from the root of the source tree checkout, you should just be able to type: $ ./mach if all is well, you should see a help message.
... if it works, you can look at compiler warnings: $ ./mach warnings-list try running the program: $ ./mach run try running your program in a debugger: $ ./mach run --debug try running some tests: $ ./mach xpcshell-test services/common/tests/unit/ or run an individual test: $ ./mach mochitest browser/base/content/test/general/browser_pinnedtabs.js you run mach from the source directory, so you should be able to use your shell's tab completion to tab-complete paths to tests.
...And 8 more matches
Downloads.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window.
...example (using task.jsm): try { yield downloads.fetch(sourceuri, targetfile); } catch (ex if ex instanceof downloads.error && ex.becausetargetfailed) { console.log("unable to write to the target file, ignoring the error."); } methods createdownload() creates a new download object.
...some of the most common properties in this object include: source: string containing the uri for the download source.
...And 8 more matches
OS.File for the main thread
using os.file from a jsm to import os.file into your chrome code, add the following line at the start of your script: components.utils.import("resource://gre/modules/osfile.jsm") promises before using os.file from the main thread, you need some understanding of the promise library.
...valclose => { console.log('valclose:', valclose); console.log('successfully appended'); }); }); }); global object os.file method overview promise<file> open(in string path, [optional] in object mode, [optional] in object options); promise<object> openunique(in string path, [optional] in object options); promise<void> copy(in string sourcepath, in string destpath, [optional] in object options); promise<bool> exists(in string path); promise<string> getcurrentdirectory(); promise<void> makedir(in string path, [optional] in object options); promise<void> move(in string sourcepath, in string destpath); promise<uint8array> read(in string path, [optional] in object options); promise<v...
... void copy( in string sourcepath, in string destpath [optional] in object options) throws os.file.error arguments sourcepath the full path of the file to copy.
...And 8 more matches
NSS Tools
the links for each tool take you to the source code, documentation, plans, and related links for each tool.
... currently, you must download the nss 3.1 source and build it to create binary files for the nss tools.
... for information about downloading the nss source, see https://developer.mozilla.org/nss/building.
...And 8 more matches
Hacking Tips
getting the bytecode of a function (from js shell) the shell has a small function named dis to dump the bytecode of a function with its source notes.
... js> function f () { return 1; } js> dis(f); flags: loc op ----- -- main: 00000: one 00001: return 00002: stop source notes: ofs line pc delta desc args ---- ---- ----- ------ -------- ------ 0: 1 0 [ 0] newline 1: 2 0 [ 0] colspan 2 3: 2 2 [ 2] colspan 9 getting the bytecode of a function (from gdb) in jsopcode.cpp, a function named js::disassembleatpc can print the bytecode of a script.
...if gdb does not load the unwinder by default, you can force it to, by using the source command with the js-gdb.py file.
...And 8 more matches
SpiderMonkey Internals
compiler the compiler consumes javascript source code and produces a script which contains bytecode, source annotations, and a pool of string, number, and identifier literals.
... the script also contains objects, including any functions defined in the source code, each of which has its own, nested script.
...the emitter does some constant folding and a few codegen optimizations; about the fanciest thing it does is to attach source notes to the script for the decompiler's benefit.
...And 8 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas.
... sx optional the x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
... sy optional the y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
...And 8 more matches
WebGL constants - Web APIs
var debuginfo = gl.getextension('webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_webgl); the webgl tutorial has more information, examples, and resources on how to get started with webgl.
... src_color 0x0300 passed to blendfunc or blendfuncseparate to multiply a component by the source elements color.
... one_minus_src_color 0x0301 passed to blendfunc or blendfuncseparate to multiply a component by one minus the source elements color.
...And 8 more matches
An overview of HTTP - HTTP
WebHTTPOverview
http is a protocol which allows the fetching of resources, such as html documents.
...it then parses this file, making additional requests corresponding to execution scripts, layout information (css) to display, and sub-resources contained within the page (usually images and videos).
... the web browser then mixes these resources to present to the user a complete document, the web page.
...And 8 more matches
Web Performance
if your animations are really complex, you may have to rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed.
... navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation events.
... resource timings are detailed network timing measurements regarding the loading of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible.
...And 8 more matches
operator - SVG: Scalable Vector Graphics
value over | in | out | atop | xor | lighter | arithmetic default value over animatable yes over this value indicates that the source graphic defined in the in attribute is placed over the destination graphic defined in the in2 attribute.
... in this value indicates that the parts of the source graphic defined in the in attribute that overlap the destination graphic defined in the in2 attribute, replace the destination graphic.
... out this value indicates that the parts of the source graphic defined in the in attribute that fall outside the destination graphic defined in the in2 attribute, are displayed.
...And 8 more matches
Finding window handles - Archive of obsolete content
comparing to the method above, by using this method, you don't have to compile your component with nsiwidget.h and other bunchs of h files that should not be exposed to outside, and could change every time firefox updates, all you need is nsibasewindow.idl(it's not in gecko_sdk, get this from the latest firefox source, or http://mxr.mozilla.org/mozilla/sourc...basewindow.idl), and use xpidl to compile it to .h file, although that's stll a unfrozen interface, but it should be a lot better.
... recall that nsibasewindow -> nativehandle returns the following in the different operating systems: windows - hwnd mac os x - nswindow* linux - gdkwindow* (it will be gdkwindow* no matter what desktop/window manager) is in use, for explanation why see the article: standard os libraries - unix section) windows components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) ...
... .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms633539%28v=vs.85%29.aspx * bool winapi setforegroundwindow( * __in_ hwnd hwnd * ); */ var setforegroundwindow = user32.declare('setforegroundwindow', ctypes.winapi_abi, ctypes.bool, // return bool ctypes.voidptr_t // hwnd ); var hwnd = ctypes.voidptr_t(ctypes.uint64(hwndstring)); var rez_setforegroundwindow = setforegroundwindow(hwnd); console.log('rez_setforegroundwindow:', rez_setforegroundwindow, rez_setforegroundwindow.tostring(...
...And 7 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
these can be idl files describing xpcom interfaces, which are used to generate normal c++ header files for inclusion in your source files.
... source files now it's time to create the makefile and source files in the src/ subdirectory.
...add the following line at the end of the file: ac_add_options --enable-extensions=default,myextension now launch make from the mozilla root: make -f client.mk build even if you have an up-to-date firefox build, you'll have to wait a while for make to recurse over the entire mozilla source tree looking for new stuff (on my machine, which is pretty fast, this takes a good 10-15 minutes).
...And 7 more matches
URIs and URLs - Archive of obsolete content
overview handling network and locally retrievable resources is a central part of necko.
... resources are identified by uri "uniform resource identifier" (taken from rfc 2396): uniform uniformity provides several benefits: it allows different types of resource identifiers to be used in the same context, even when the mechanisms used to access those resources may differ; it allows uniform semantic interpretation of common syntactic conventions across different types of resource identifiers; it allows introduction of new types of resource identifiers without interfering with the way that existing identifiers are used; and, it allows the identifiers to be reused in many different contexts, thus permitting new applications or protocols to leverage a pre-existing, large, and widely-used set of resource identifiers.
... resource a resource can be anything that has identity.
...And 7 more matches
Result Generation - Archive of obsolete content
« previousnext » rdf in this section, we'll look at generating template output using rdf datasources.
...<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rel="http://www.xulplanet.com/rdf/"> <rdf:description rdf:about="http://www.xulplanet.com/rdf/a"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/b"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/c"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> <rdf:description rdf:about="http://www.xulplanet.com/rdf/c"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> </rdf:rdf> for a xul template query, you first ne...
...there are two types of nodes in rdf, resources which usually represent 'things', and literals which are values like the names, dates or sizes of those things, and so on.
...And 7 more matches
SQLite Templates - Archive of obsolete content
« previousnext » templates may use a datasource that is retrieved from an sqlite database, such as those used by the mozstorage api.
...this will cause the datasource to be treated as an sqlite database.
... the datasources attribute may be set to one of two possible types of values.
...And 7 more matches
Special Condition Tests - Archive of obsolete content
for the bookmarks toolbar, the outer content is inserted into an <hbox>, but at lower levels, the content will be inserted into a <menu> in case you aren't clear, the tag that must match for the outer iteration is the root element, the one with the datasources attribute on it.
...here is a previous example, rewritten to use the parent matching syntax: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <rule parent="vbox"> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> previously, an assign element was used to assign the tagname of the result to a variable, which was then compared in a rule condition.
...the end effect is the same output, however, the source code is simpler.
...And 7 more matches
Using Remote XUL - Archive of obsolete content
it is difficult to discern the site's basic structure and available resources, which makes it hard to locate a particular page or find the one with the information you want.
... source | rendered step 2: an iframe for displaying the web site content now that we have a basic xul document, we need a way to display pages from the mozilla.org web site.
... source | rendered step 3: menus and buttons the mozilla.org web site uses an html navigation bar on the left-hand side of its pages to provide site navigation.
...And 7 more matches
XUL Questions and Answers - Archive of obsolete content
he said the code will be open-source, but it is not released yet (as of oct 2006).
... there are several options for displaying graphics and animation in xul: <html:canvas> svg <xul:image> (static images or animated gif; support for apng is planned) plugins templates with non-rdf datasources?
... support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
html and accessibility as you learn more about html — read more resources, look at more examples, etc.
...additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain.
... note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
html and accessibility as you learn more about html — read more resources, look at more examples, etc.
...additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain.
... note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense.
...And 7 more matches
Positioning - Learn web development
we'd like you to follow along with the exercises on your local computer, if possible — grab a copy of 0_basic-flow.html from our github repo (source code here) and use that as a starting point.
... note: you can see the example at this point live at 1_static-positioning.html (see source code).
... note: you can see the example at this point live at 2_relative-positioning.html (see source code).
...And 7 more matches
Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom...
...related to blocking), many web api features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it, accessing a video stream from a web cam, or broadcasting the display to a vr headset.
...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 objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.
...And 7 more matches
Server-side web frameworks - Learn web development
# 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.
...an http post request to update a resource on the server will instead include the update information as "post data" within the body of the request.
... the second code snippet shows a view function (resource handler) for displaying all of our u09 teams.
...And 7 more matches
Deployment and next steps - Learn web development
in this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your svelte learning journey.
... objective: learn how to prepare our svelte app for production, and what learning resources you should visit next.
...if you are not interested at all in typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more.
...And 7 more matches
A bird's-eye view of the Mozilla framework
prerequisites this article assumes you have access to mozilla sources and are familiar with the directory structure of the source tree.
... the code samples in the article are based on mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.9a1) gecko/20051104 seamonkey/1.1a from a new source tree checked out 11/04/05.
... let’s consider a resource description framework (rdf) example, where rdf is a framework for describing and interchangingmetadata, that is, information about information.
...And 7 more matches
Web Replay
this non-determinism originates from two sources: intra-thread and inter-thread.
... it is not enough, however, to just record all these non-deterministic sources and reproduce those behaviors exactly in the replaying process.
... care must be taken for efficiency when taking/restoring snapshots and for managing system resources when restoring.
...And 7 more matches
nsIHTMLEditor
efontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean entirelist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pa...
...stenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); ...
... void insertfromdrop( in nsidomevent aevent ); parameters aevent inserthtml() insert some html source at the current location.
...And 7 more matches
Using the clipboard
initialize the transferring object with the nsiloadcontext obtained from the window that is the source of the clipboard data.
...components.utils.import('resource://gre/modules/services.jsm'); // create a constructor for the built-in supports-string class.
...var res = nssupportsstring(); // store the javascript string that we want to wrap in the new nsisupportsstring object res.data = str; return res; } // create a constructor for the built-in transferable class const nstransferable = components.constructor("@mozilla.org/widget/transferable;1", "nsitransferable"); // create a wrapper to construct an nsitransferable instance and set its source to the given window, when necessary function transferable(source) { var res = nstransferable(); if ('init' in res) { // when passed a window object, find a suitable privacy context for it.
...And 7 more matches
Type conversion
ecfunction", ctypes.default_abi, ctypes.void_t, ctypes.char.ptr); somecfunction(buffer); // here ctypes.char.array(10)() is converted to ctypes.char.ptr type implicit conversion can be tested in the following way: var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' boolean type target type source converted value ctypes.bool js boolean src js number (0 or 1) if src == 0: false if src == 1: true var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = true; console.log(mystruct.v.tostring()); // 'true' mystruct.v = false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log(mystruct.v.tos...
...tring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 10; // throws error mystruct.v = "a"; // throws error integer types target type source converted value ctypes.char16_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.char16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystruct.v.tostring()); // "\x01" mystruct.v = "x"; console.log(mystruct.v.tostring()); // "x" mystruct.v = "xx"; // throws error var mys...
...truct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // 65 mystruct.v = true; console.log(mystruct.v.tostring()); // 1 mystruct.v = "x"; // throws error integer/float types are implicitly convertible if any data of source type could be representable in the target type.
...And 7 more matches
HTMLLinkElement - Web APIs
the htmllinkelement interface represents reference information for external resources and the relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlanchorelement).
... htmllinkelement.href is a domstring representing the uri for the target resource.
... htmllinkelement.hreflang is a domstring representing the language code for the linked resource.
...And 7 more matches
WebGLRenderingContext.blendFuncSeparate() - Web APIs
syntax void gl.blendfuncseparate(srcrgb, dstrgb, srcalpha, dstalpha); parameters srcrgb a glenum specifying a multiplier for the red, green and blue (rgb) source blending factors.
... srcalpha a glenum specifying a multiplier for the alpha source blending factor.
... if a constant color and a constant alpha value are used together as source (srcrgb) and destination (dstrgb) factors, a gl.invalid_enum error is thrown.
...And 7 more matches
Adding 2D content to a WebGL context - Web APIs
the complete source code for this project is available on github.
... // vertex shader program const vssource = ` attribute vec4 avertexposition; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; void main() { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; } `; it's worth noting that we're using a vec4 attribute for the vertex position, which doesn't actually use a 4-component vector; that is, it could be handled as a vec2 or vec3 depend...
... const fssource = ` void main() { gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0); } `; initializing the shaders now that we've defined the two shaders we need to pass them to webgl, compile them, and link them together.
...And 7 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
note: you can find the source code on github as step-sequencer; see the step-sequencer running live also.
...the techniques we are using are: name of voice technique associated web audio api feature "sweep" oscillator, periodic wave oscillatornode, periodicwave "pulse" multiple oscillators oscillatornode "noise" random noise buffer, biquad filter audiobuffer, audiobuffersourcenode, biquadfilternode "dial up" loading a sound sample to play audiocontext.decodeaudiodata(), audiobuffersourcenode note: this instrument was not created to sound good, it was created to provide demonstration code and represents a very simplified version of such an instrument.
...in floating point audio, 1 is a convenient number to map to "full scale" for mathematical operations on signals, so oscillators, noise generators and other sound sources typically output bipolar signals in the range -1 to 1.
...And 7 more matches
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.
... see mask-border-source.
... <'mask-border-slice'> the dimensions for slicing the source image into regions.
...And 7 more matches
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
the source for this interactive example is stored in a github repository.
... download this attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource.
... hreflang indicates the language of the linked resource.
...And 7 more matches
Content Security Policy (CSP) - HTTP
WebHTTPCSP
malicious scripts are executed by the victim's browser because the browser trusts the source of the content, even when it's not coming from where it seems to be coming from.
... csp makes it possible for server administrators to reduce or eliminate the vectors by which xss can occur by specifying the domains that the browser should consider to be valid sources of executable scripts.
... a csp compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling html attributes).
...And 7 more matches
CSP: frame-ancestors - HTTP
syntax one or more sources can be set for the frame-ancestors policy: content-security-policy: frame-ancestors <source>; content-security-policy: frame-ancestors <source> <source>; sources <source> can be one of the following: the frame-ancestors directive’s syntax is similar to a source list of other directives (e.g.
...only the sources listed below are allowed: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number, separated by spaces.
... the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 7 more matches
Performance fundamentals - Web Performance
memory is a resource, and free memory is a unused resource.
...when a system uses more memory than necessary to maintain some particular user state, the system is wasting a resource it could use to retain some other user state.
... startup performance application startup is punctuated by three user-perceived events, generally speaking: the first is the application first paint — the point at which sufficient application resources have been loaded to paint an initial frame the second is when the application becomes interactive — for example, users are able to tap a button and the application responds the final event is full load — for example when all the user's albums have been listed in a music player the key to fast startup is to keep two things in mind: upp is all that matters, and there's a "critical path" to...
...And 7 more matches
Monitoring downloads - Archive of obsolete content
a tooltip is included that displays the full source url of the file.
... dbconn.executesimplesql("create table items (source text, size integer," + " starttime integer, endtime integer," + " speed real, status integer)"); dbconn.close(); }, this is fairly simple stuff.
... that code looks like this: ondownloadstatechange: function(astate, adownload) { var statement; switch(adownload.state) { case components.interfaces.nsidownloadmanager.download_downloading: // add a new row for the download being started; each row includes the // source uri, size, and start time.
...And 6 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
imagine not having to re-write your application 3 times, or not supporting a less popular platform simply because you do not have the resources for parallel development!
...because gecko has a cross-platform architecture, is easily embeddable and is open source, it and the rich web applications it supports will be usable on any supported platform or device.
...open source and freely available, gecko is small in size and modular and achieves rendering speed superior to all other browser engines - which makes it perfect for embedding into both desktop applications such as browsers and new devices such as browsing appliances and set top boxes.
...And 6 more matches
Elements - Archive of obsolete content
it doesn't have to (and often it doesn't) point to some actual schema or a namespace-related resource.
...this way a more-or-less universal namespace declaration in your bindings could be like: <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml" xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg = "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> binding <!entity % binding-content "(resources?,content?,implementation?,handlers?)"> <!element binding %binding-content;> <!attlist binding id id #required extends cdata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding.
... a binding element may contain a resources tag, a content tag, a implementation tag and a handlers tag.
...And 6 more matches
Box Objects - Archive of obsolete content
the content tree stores the nodes as they are found in the source code.
...example 1 : source view <button label="click me" oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="hide" oncommand="document.getelementbyid('thelabel').hidden = true;"/> <button label="show" oncommand=...
...And 6 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
the user has requested a resource controlled by the server.
... the server requires client authentication before permitting access to the requested resource.
... the server determines whether the identified user is permitted to access the requested resource, and if so allows the client to access it.
...And 6 more matches
UI pseudo-classes - Learn web development
back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label (see it live here, and see the source code here).
... let's go in and look at a simple example of :valid/:invalid (see valid-invalid.html for the live version, and also check out the source code).
...our out-of-range.html demo (see also the source code) builds on top of the previous example to provide out-of-range messages for the numeric inputs, as well as saying whether they are required.
...And 6 more matches
Choosing the right approach - Learn web development
we'll probably add to this resource as time goes on.
... 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 objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations yes yes (recursive timeouts) yes (nested timeouts) no code example here the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr.
...And 6 more matches
Getting started with Svelte - Learn web development
svelte is a compiler that generates minimal and highly optimized javascript code from our sources; you'll need a terminal with node + npm installed to compile and build your app.
...svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files.
... src: this directory is where the source code for your application lives — where you'll be creating the code for your app.
...And 6 more matches
Handling common accessibility problems - Learn web development
i think it is more interesting than the last one.</p> in addition, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with.
... you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
...take for example our fake-div-buttons.html example (see source code).
...And 6 more matches
Obsolete Build Caveats and Tips
from firefox 10, the compilator is visual studio 2010; if you want to use it, you must use a previous version of it !), or 2005 professional from build_instructions those who need to work with the code for firefox 3/mozilla 1.9 and earlier can check out the latest source using cvs.
... from source_code/mercurial mozilla-2.0 (firefox 4.0) code for the firefox 4.0 (gecko 2.0) release lives in releases/mozilla-2.0.
... to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2.
...And 6 more matches
L20n HTML Bindings
<head> … <script src="l20n.js"></script> </head> create manifest use a localization manifest to define available languages and their resource files.
... <link rel="localization" href="../locales/manifest.json"> an example of the manifest file (all keys are required): { "locales": [ "en-us", "pl"], "default_locale": "en-us", "resources": [ "../locales/{{locale}}/strings.l20n", "/shared/{{locale}}/date.l20n"¨ ] } make html elements localizable use the data-l10n-id attribute on an html element to mark it as localizable.
...all content lives in the localization resources.
...And 6 more matches
Creating the Component Code
overview of the weblock module source as we mentioned in the previous section, components have layers.
... onion peel view of xpcom component creation before we begin looking at the various parts of the component and how they'll be implemented in the source, let's look at the module in weblock.cpp to see where we're going.
... the source we're referring to is listed in its entirety at the end of this chapter (see weblock1.cpp).
...And 6 more matches
nsIAnnotationService
aname); boolean itemhasannotation(in long long aitemid, in autf8string aname); void removepageannotation(in nsiuri auri, in autf8string aname); void removeitemannotation(in long long aitemid, in autf8string aname); void removepageannotations(in nsiuri auri); void removeitemannotations(in long long aitemid); void copypageannotations(in nsiuri asourceuri, in nsiuri adesturi, in boolean aoverwritedest); void copyitemannotations(in long long asourceitemid, in long long adestitemid, in boolean aoverwritedest); void addobserver(in nsiannotationobserver aobserver); void removeobserver(in nsiannotationobserver aobserver); nsiuri getannotationuri(in nsiuri auri, in autf8string aname); constants con...
... copypageannotations() this method copies all annotations from the source to the destination uri.
... if the destination already has an annotation with the same name as one on the source, it will be overwritten if aoverwritedest is set.
...And 6 more matches
Network request details - Firefox Developer Tools
a 304), the cache tab displays details about that cached resource.
... these details include: last fetched: the date the resource was last fetched fetched count: the number of times in the current session that the resource has been fetched data size: the size of the resource.
... last modified: the date the resource was last modified.
...And 6 more matches
HTMLAreaElement - Web APIs
htmlareaelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
... htmlhyperlinkelementutils.href is a usvstring containing that reflects the href html attribute, containing a valid url of a linked resource.
... htmlareaelement.hreflang is a domstring containing that reflects the hreflang html attribute, indicating the language of the linked resource.
...And 6 more matches
HTMLMediaElement.srcObject - Web APIs
the srcobject property of the htmlmediaelement interface sets or returns the object which serves as the source of the media associated with the htmlmediaelement.
... the object can be a mediastream, a mediasource, a blob, or a file (which inherits from blob).
...until other browsers catch up, for mediasource, blob and file, consider falling back to creating a url with url.createobjecturl() and assign it to htmlmediaelement.src.
...And 6 more matches
LockManager.request() - Web APIs
use this to represent mutually exclusive access to a resource.
... request a "shared" lock when multiple instances of the code can share access to a resource.
...once the callback is invoked, no other running code on this orign can hold `my_resource` until the callback returns.
...And 6 more matches
MediaStreamTrack - Web APIs
mediastreamtrack.enabled a boolean whose value of true if the track is enabled, that is allowed to render the media source stream; or false if it is disabled, that is not rendering the media source stream but silence and blackness.
...this happens when the peeridentity property is set, or if the track comes from a cross-origin source.
...it doesn't change if the track is deassociated from its source.
...And 6 more matches
MediaStream Recording API - Web APIs
overview of the recording process the process of recording a stream is simple: set up a mediastream or htmlmediaelement (in the form of an <audio> or <video> element) to serve as the source of the media data.
... create a mediarecorder object, specifying the source stream and any desired options (such as the container's mime type or the desired bit rates of its tracks).
... once the source media is playing and you've reached the point where you're ready to record video, call mediarecorder.start() to begin recording.
...And 6 more matches
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.
... for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html.
...And 6 more matches
WebGLRenderingContext.blendFunc() - Web APIs
syntax void gl.blendfunc(sfactor, dfactor); parameters sfactor a glenum specifying a multiplier for the source blending factors.
... if a constant color and a constant alpha value are used together as source and destination factors, a gl.invalid_enum error is thrown.
... the formula for the blending color can be described like this: color(rgba) = (sourcecolor * sfactor) + (destinationcolor * dfactor).
...And 6 more matches
Lighting in WebGL - Web APIs
this is how many real-world light sources usually work.
... for our purposes, we're going to simplify the lighting model by only considering simple directional and ambient lighting; we won't have any specular highlights or point light sources in this scene.
... instead, we'll have our ambient lighting plus a single directional light source, aimed at the rotating cube from the previous demo.
...And 6 more matches
WebXR Device API - Web APIs
xrinputsource represents any input device the user can use to perform targeted actions within the same virtual space as the viewer.
... input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the xr device.
... other input devices such as keyboards, mice, and gamepads are not presented as xrinputsource instances.
...And 6 more matches
XRSession - Web APIs
WebAPIXRSession
inputsources read only returns a list of this session's xrinputsources, each representing an input device used to control the camera and/or scene.
... inputsourceschange an event of type xrinputsourceschangeevent sent to the xrsession when the list of active xr input sources has changed.
... also available through the oninputsourceschange event handler property.
...And 6 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
... here we define an <audio> element with multiple sources — we do this as not all browsers support the same audio formats.
... we do this using the <source> element, which takes the attributes src and type.
...And 6 more matches
<object> - HTML: Hypertext Markup Language
WebHTMLElementobject
the html <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
... the source for this interactive example is stored in a github repository.
... archivehtml 4 onlyobsolete since html5 a space-separated list of uris for archives of resources for the object.
...And 6 more matches
HTTP request methods - HTTP
WebHTTPMethods
http defines a set of request methods to indicate the desired action to be performed for a given resource.
... get the get method requests a representation of the specified resource.
... post the post method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.
...And 6 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
this tutorial was aimed at compiling all the right resources for extension development and putting them in the right context, but there's much more to learn, and knowing how to find it is part of what we felt was necessary to teach.
... let's look into the resources that have helped us the most.
... the mozilla source sometimes you need more than just a tutorial.
...And 5 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
getldapattributes("ldap2.int-evry.fr","ou=people,dc=int-evry,dc=fr","uid=" + env_user,"uid,cn,mail,labeleduri"); // close the try, and call the catch() } catch(e) { displayerror("lockedpref", e); } thunderbird.cfg (version 2 with ad) using thunderbird 9.0.1 and try to use a active directory (windows server 2008) as ldap-source did not work with version 1.
... so we needed to patch and recompile that source rpm (check bug 295329) ; patch: [root@b008-02 sources]# cat thunderbird-autoconfigandldap.patch diff -ur thunderbird-3.0/configure thunderbird-3.0.autoldap/configure --- thunderbird-3.0/configure 2009-06-29 11:37:21.677372297 +0200 +++ thunderbird-3.0.autoldap/configure 2009-06-29 14:41:11.547435040 +0200 @@ -12855,7 +12855,7 @@ moz_feeds=1 moz_jsdebugger=1 moz_jsloader=1 -moz_ldap_xpco...
...m= +moz_ldap_xpcom=1 moz_mail_news= moz_mork=1 moz_morkreader= and set --enable-extensions=pref in mozconfig file, in fedora source rpm it is: [root@b008-02 sources]# grep enable-extensions /root/rpmbuild/sources/thunderbird-mozconfig ac_add_options --enable-extensions=pref it seems worse this time , as even after applying those compilation options mentioned above, i now get the following error message while stating thunderbird with autoconfig (autoconf.js having pref('general.config.filename','thunderbird.cfg'); ) and thunderbird.cfg calling getldap* functions to retrieve cn and mail address of the current user.
...And 5 more matches
Venkman Internals - Archive of obsolete content
notes on venkman source code.
... as with any complex application, aspects of the design may not be clear for new readers of the source.
... questions why can't breakpoints be set on some source lines some of the time?
...And 5 more matches
The Joy of XUL - Archive of obsolete content
but overlays can also be specified externally, enabling the designer to superimpose them upon an application without changing the original source.
...the netscape public license (npl) and mozilla public license (mpl) require developers who alter original work (source code files that are provided with mozilla) to release the source code for these changes to their customers.
... overlays can be used to add features to mozilla without contaminating the original open source code with proprietary alterations.
...And 5 more matches
Introduction to RDF - Archive of obsolete content
« previousnext » in this section, we'll look at rdf (resource description framework).
... resource description framework we can use the tree elements to display a set of data, such as bookmarks or mail messages.
...the way to solve this is by using rdf datasources.
...And 5 more matches
nsIContentPolicy - Archive of obsolete content
t 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.
... this method is called before loading the resource specified by acontentlocation to determine whether or not to start loading the requested resource.
... arequestorigin {optional_inline}} the location of the resource that initiated this load request; can be null if inapplicable.
...And 5 more matches
Archived Mozilla and build documentation - Archive of obsolete content
in addition to being handy pointers to useful resources, bookmarks in mozilla can be used to make the address bar itself a power tool.
...this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e.
...the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to get the status of the code.
...And 5 more matches
RDF in Fifty Words or Less - Archive of obsolete content
the resource description framework, or "rdf", is really two things.
... first, rdf is a graph-based model for describing internetresources (like web pages and email messages), and how these resources relate to one another.
...to a mozilla developer, it means that the rdf data model (the "graph") can be used as a mechanism for integrating and organizing internet resources.
...And 5 more matches
Responsive design - Learn web development
note: see this simple liquid layout: example, source code.
... note: see this simple fixed-width layout: example, source code.
...on narrow screens the layout displays the boxes stacked on top of one another: on wider screens they move to two columns: note: you can find the live example and source code for this example on github.
...And 5 more matches
Fetching data from the server - Learn web development
these technologies allow web pages to directly handle making http requests for specific resources available on a server and formatting the resulting data as needed before it is displayed.
...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.
...add this next: request.responsetype = 'text'; fetching a resource from the network is an asynchronous operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown.
...And 5 more matches
Configuring Build Options
build options, including options not usable from the command-line, may appear in "confvars.sh" files in the source tree.
...the mozconfig file should be in your source directory (that is, /mozilla-central/mozconfig or /comm-central/mozconfig).
... create a blank mozconfig file: echo "# my first mozilla config" > mozconfig if your mozconfig isn't in your source directory, you can also use the mozconfig environment variable to specify the path to your mozconfig.
...And 5 more matches
How to implement a custom autocomplete search component
to use autocomplete with a xul textbox, all you need to do is set some attributes: <textbox type="autocomplete" autocompletesearch="history"/> the type="autocomplete" turns on the autocomplete mechanism and the autocompletesearch="history" sets the source for the autocomplete.
...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.
... building your custom autocomplete search components sometimes, you may want to build your own autocomplete source.
...And 5 more matches
NSS FAQ
MozillaProjectsNSSFAQ
it provides a complete open-source implementation of the crypto libraries used by mozilla and other companies in the firefox browser, aol instant messenger (aim), server products from red hat, and other products.
...for detailed information on the open-source nss project, see nss project page.
... openssl is an open source project that implements server-side ssl, tls, and a general-purpose cryptography library.
...And 5 more matches
Overview of NSS
open source crypto libraries proven application security architecture if you want to add support for ssl, s/mime, or other internet security standards to your application, you can use network security services (nss) to implement all your security features.
... nss provides a complete open-source implementation of the crypto libraries used by aol, red hat, google, and other companies in a variety of products, including the following: mozilla products, including firefox, thunderbird, seamonkey, and firefox os.
... aol instant messenger (aim) open source client applications such as evolution, pidgin, apache openoffice, and libreoffice.
...And 5 more matches
SpiderMonkey Build Documentation
building spidermonkey obsolete: the canonical documentation now lives at: https://firefox-source-docs.mozilla.org/js/build.html.
... use these instructions to build the latest spidermonkey source code.
... and of course, you'll need to get the spidermonkey source code.
...And 5 more matches
How to build an XPCOM component in JavaScript
you can browse existing xpcom interfaces at various locations in the mozilla source code, or using xpcomviewer, a gui for browsing registered interfaces and components.
...a sample makefile.in # this source code form is subject to the terms of the mozilla public # license, v.
...epth@ topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk # module specifies where header files from this makefile are installed # use dom if your component implements a dom api module = dom # name of the typelib xpidl_module = dom_apps # set to 1 if the module should be part of the gecko runtime common to all applications gre_module = 1 # the idl sources xpidlsrcs = \ helloworld.idl \ $(null) include $(topsrcdir)/config/rules.mk xpidl_flags += \ -i$(topsrcdir)/dom/interfaces/base \ -i$(topsrcdir)/dom/interfaces/events \ $(null) creating the component using xpcomutils in firefox 3 and later you can use import xpcomutils.jsm using components.utils.import to simplify the process of writing your component slightly.
...And 5 more matches
Finishing the Component
all of the mozilla source code is publicly available, and interfaces can be used easily enough.
...copy the headers and idl files that you need from the content/base/public source directory of the gecko build into this new directory.
...in the weblock component, the shouldload method looks like this: ns_imethodimp weblock::shouldload(print32 contenttype, nsiuri *contentlocation, nsisupports *ctxt, nsidomwindow *window, prbool *_retval) uniform resource locators the method passes in an interface pointer of type nsiuri, which is based on the uniform resource identifier, or uri.
...And 5 more matches
nsIDragService
void firedrageventatsource(in unsigned long amsg); obsolete since gecko 43 void firedrageventatsource(in mozilla::eventmessage aeventmessage); native code only!
... firedrageventatsource() obsolete since gecko 43 (firefox 43 / thunderbird 43 / seamonkey 2.40)this feature is obsolete.
... fire a drag event at the source of the drag.
...And 5 more matches
Migrating from Firebug - Firefox Developer Tools
switch between sources firebug has a script location menu listing all javascript sources related to the website.
... those sources can be static, i.e.
...in the devtools' debugger panel the scripts are listed at the left side within the sources side panel.
...And 5 more matches
DOMParser - Web APIs
WebAPIDOMParser
the domparser interface provides the ability to parse xml or html source code from a string into a dom document.
... note: xmlhttprequest can parse xml and html directly from a url-addressable resource, returning a document in its response property.
... you can perform the opposite operation—converting a dom tree into xml or html source—using the xmlserializer interface.
...And 5 more matches
ReadableStream.pipeThrough() - Web APIs
available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed.
... preventabort: if this is set to true, errors in the source readablestream will no longer abort the destination writablestream.
... the method will return a promise rejected with the source’s error, or with any error that occurs during aborting the destination.
...And 5 more matches
Streams API concepts - Web APIs
readable streams a readable stream is a data source represented in javascript by a readablestream object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from.
... there are two types of underlying source: push sources constantly push data at you when you’ve accessed them, and it is up to you to start, pause, or cancel access to the stream.
... pull sources require you to explicitly request data from them once connected to.
...And 5 more matches
Starting up and shutting down a WebXR session - Web APIs
getting the extension download the webxr api emulator for your supported browser below: google chrome mozilla firefox the source code for the extension is also available on github.
... other improvements include updating the emulator to rename the xr interface to xrsystem, introduce support for squeeze (grip) input sources, and add support for the xrinputsource property profiles.
... if you use xr input controllers, watch the inputsourceschange event to detect the addition or removal of xr input controllers, and the various select and squeeze action events.
...And 5 more matches
Using the Web Audio API - Web APIs
check out the final demo here on codepen, or see the source code on github.
...you have input nodes, which are the source of the sounds you are manipulating, modification nodes that change those sounds as desired, and output nodes (destinations), which allow you to save or hear those sounds.
... several audio sources with different channel layouts are supported, even within a single context.
...And 5 more matches
window.postMessage() - Web APIs
source a reference to the window object that sent the message; you can use this to establish two-way communication between two windows with different origins.
... if you do expect to receive messages from other sites, always verify the sender's identity using the origin and possibly source properties.
... if (event.origin !== "http://example.com") return; // event.source is popup // event.data is "hi there yourself!
...And 5 more matches
Border-image generator - CSS: Cascading Style Sheets
> <span id="out-border-outset" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-repeat: </span> <span id="out-border-repeat" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-source: </span> <span id="out-border-source" class="value"> </span> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 6...
...aurl(file); return false; }; freader.onload = function(e) { imagecontrol.loadremoteimage(e.target.result); }; var load = function load() { browse.click(); }; browse.setattribute('type', 'file'); browse.style.display = 'none'; browse.onchange = loadimage; return { load: load }; })(); var imagecontrol = (function imagecontrol() { var scale = 0.5; var imgsource = new image(); var imgstate = null; var selected = null; var topics = ['slice', 'width', 'outset']; var properties = {}; properties['border1'] = { fill : false, slice_values : [27, 27, 27, 27], width_values : [20, 20, 20, 20], outset_values : [0, 0, 0, 0], slice_units : [0, 0, 0, 0], width_units : [0, 0, 0, 0], outset_units : [0, 0, 0, 0], repeat : [1,...
...preview_area : 400, }; properties['border6'] = { fill : false, slice_values : [42, 42, 42, 42], width_values : [42, 42, 42, 42], outset_values : [0, 0, 0, 0], slice_units : [0, 0, 0, 0], width_units : [0, 0, 0, 0], outset_units : [0, 0, 0, 0], repeat : [2, 2], size : [350, 350], preview_area : 500, }; var loadlocalimage = function loadlocalimage(source) { var location = "images/" + source; imgsource.src = location; }; var loadremoteimage = function loadremoteimage(source) { imgsource.src = source; if (selected) selected.removeattribute('selected'); tool.setoutputcss('source', 'url("' + source + '")'); }; var pickimage = function pickimage(e) { if (e.target.classname === 'image') { selected = e.target; sel...
...And 5 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
<header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that 500 pixels wide.
...here i am keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide grid layout and accessibility.
...lass="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"><h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that 500 pixels wide.
...And 5 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
the source for this interactive example is stored in a github repository.
... filter: url(resources.svg#c1) filter functions blur() the blur() fucntion applies a gaussian blur to the input image.
...></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%;...
...And 5 more matches
Live streaming web audio and video - Developer guides
for example: <video src="rtsp://myhost.com/mymedia.format"> <!-- fallback here --> </video> media source extensions (mse) media source extensions is a w3c working draft that plans to extend htmlmediaelement to allow javascript to generate media streams for playback.
... note: you can find a guide to encoding hls and mpeg-dash for use on the web at setting up adaptive streaming media sources.
...it is supported via media source extensions which are used by javascript libraries such as dash.js.
...And 5 more matches
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<link> the html external resource link element (<link>) specifies relationships between the current document and an external resource.
...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.
... image and multimedia html supports various multimedia resources such as images, audio, and video.
...And 5 more matches
ETag - HTTP
WebHTTPHeadersETag
the etag http response header is an identifier for a specific version of a resource.
...additionally, etags help prevent simultaneous updates of a resource from overwriting each other ("mid-air collisions").
... if the resource at a given url changes, a new etag value must be generated.
...And 5 more matches
A typical HTTP session - HTTP
WebHTTPSession
see identifying resources on the web for more details.
... 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.
...the most common requests are get and post: the get method requests a data representation of the specified resource.
...And 5 more matches
Image file type and format guide - Web media technologies
additionally, their use for favicons has subsided in favor of using a png file and the <link> element, as described in providing icons for different usage contexts in <link>: the external resource link element.
...this slowed png adoption, but it is now commonly used, especially when precise reproduction of the source image is needed.
... svg files are text files containing source code that, when interpreted, draws the desired image.
...And 5 more matches
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
in this article, we look at how it is used in our js13kpwa example (see the source code also).
...if a resource is cached and available offline, return it first before trying to download it from the server.
... service workers in the js13kpwa app enough theory — let's see some source code!
...And 5 more matches
Same-origin policy - Web security
the same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.
...for example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resource.
... here are some examples of resources which may be embedded cross-origin: javascript with <script src="…"></script>.
...And 5 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
reference materials to get an idea of what kinds of functions embedded xpcom can handle, take a look at the api reference and the interface definitions from xpidl in the actual source code.
... you can perform a full-text search of the firefox source code in mozilla cross-reference using character strings, filenames, etc as search keys.
... if you’re having trouble with any of the details of the interface, it is helpful to search on the source code for usage examples within firefox.
...And 4 more matches
Setting Up a Development Environment - Archive of obsolete content
« previousnext » getting the right tools there are 3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.
...it's free, open source, and cross-platform.
... we recommend git and github for source control, but any decent software configuration management system will do.
...And 4 more matches
Promises - Archive of obsolete content
a task example like the following: components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function* () { var response = yield request("login", { username: user, password: password }); if (response.messages) { try { yield publish({ username: user, messages: response.messages }); } catch (e) { self.reporterror("publication failed", e); } } }); can be converted to a pure promise-bas...
... representative example usage components.utils.import("resource://gre/modules/osfile.jsm"); task.spawn(function* () { // retrieve file metadata to check modification time.
... representative example usage components.utils.import("resource://gre/modules/downloads.jsm"); task.spawn(function* () { // fetch a file in the background.
...And 4 more matches
Rule Compilation - Archive of obsolete content
a query contains instructions for how to retrieve a set of data from the datasource.
... the exact syntax is dependent on the type of datasource used in the template.
... for instance, for an sqlite datasource, an sql statement is used as the query.
...And 4 more matches
Template and Tree Listeners - Archive of obsolete content
nsirdfobserver - for rdf datasources, used to listen to changes in the underlying rdf datasource.
...var somelistener = { item: null, willrebuild : function(builder) { this.item = builder.getresourceatindex(builder.root.currentindex); }, didrebuild : function(builder) { if (this.item) { var idx = builder.getindexofresource(this.item) if (idx != -1) builder.root.view.selection.select(idx); } } }; tree.builder.addlistener(somelistener); this example is very simple and just saves and restores the selected index after a rebuild.
...the example above makes use of the getresourceatindex and getindexofresource methods.
...And 4 more matches
Using Recursive Templates - Archive of obsolete content
both the rdf and xml datasource types support recursion.
... for example, using this xml datasource: <people> <group name="male"> <person name="napoleon bonaparte"/> <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another level for each person.
... <groupbox type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node.
...And 4 more matches
Element Positioning - Archive of obsolete content
an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this.
...the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier.
...for example: example 3: source view <box flex="1"> <button label="happy"/> <button label="sad"/> </box> if you resize the window, the box will stretch to fit the window size.
...And 4 more matches
Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul.
...here is an example: example 2 : source view <hbox height="400"> <button label="copy" oncommand="this.parentnode.appendchild(this.nextsibling.clonenode(true));"/> <vbox> <button label="first"/> <button label="second"/> </vbox> </hbox> when the copy button is pressed..
...label and value properties examples here is a simple example which changes the label on a button: example 3 : source view <button label="hello" oncommand="this.label = 'goodbye';"/> when the button is pressed, the label is changed.
...And 4 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
rdf tree nsitreeview, nsixultreebuilder no this tree is generated from an rdf datasource.
... it is used when a tree has a datasources attribute, and has dont-build-content in its flags attribute.
... for this tree, the data comes directly from the rdf datasource.
...And 4 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
spidermonkey is the code name for the first ever javascript engine, an open source c implementation which can be found embedded in leading software products such as mozilla firefox, adobe acrobat, and aptana jaxer.
... 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 n...
...after the asset is retrieved and stored in a string, the proper namespaces are defined for this particular resource.
...And 4 more matches
Visual-js game engine - Game development
full name : visual-js gui for windows multiplatform 2d game engine creator : nikola lukic 2017 2018 open source visual-js project parts : -2d part : this is javascript game engine (server part node.js / client part js) js framework with windows gui editor and game instance creator.
... or you can use visual-js source editor.
... visual-js source editor (2d part only) is new and better way .in future visual staff will be better (real time simulator will be implemented).for now this place is good for coding .
...And 4 more matches
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine designed to support open internet standards such as html 5, css 3, the w3c dom, xml, javascript, and others.
...however, the source for all those components is available for free download from mozilla.org.
... because gecko is small, lightweight, and open source, other companies and organizations can easily reuse it.
...And 4 more matches
Cascade and inheritance - Learn web development
the h1 ends up being colored blue — these rules have an identical selector and therefore carry the same specificity, so the last one in the source order wins.
...the below h1 ends up being colored red — the class selector gives its rule a higher specificity, and so it will be applied even though the rule with the element selector appears further down in the source order.
...later ones overrule earlier ones: source order specificity importance we will look at these to see how browsers figure out exactly what css should be applied.
...And 4 more matches
Client-side form validation - Learn web development
find the source code on github at fruit-start.html and a live example below.
...try out the new behavior in the example below: note: you can find this example live on github as fruit-validation.html (see also the source code.) try submitting the form without a value.
...for="choose">would you prefer a banana or a cherry?</label> <input id="choose" name="i_like" required pattern="[bb]anana|[cc]herry"> <button>submit</button> </form> input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } this gives us the following update — try it out: note: you can find this example live on github as fruit-pattern.html (see also the source code.) in this example, the <input> element accepts one of four possible values: the strings "banana", "banana", "cherry", or "cherry".
...And 4 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
in the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr.
...so to cancel our above timeout, you'd do this: cleartimeout(mygreeting); note: see greeter-app.html for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (see the source code also).
...it then runs the function once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring(); document.getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime, 1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval.
...And 4 more matches
Introduction to events - Learn web development
inline event handlers — don't use these you might also see a pattern like this in your code: <button onclick="bgchange()">press me</button> function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } note: you can find the full source code for this example on github (also see it running live).
...we could rewrite our random color example to look like this: const btn = document.queryselector('button'); function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } btn.addeventlistener('click', bgchange); note: you can find the full source code for this example on github (also see it running live).
...for example, let's rewrite our random color example again slightly: function bgchange(e) { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; e.target.style.backgroundcolor = rndcol; console.log(e); } btn.addeventlistener('click', bgchange); note: you can find the full source code for this example on github (also see it running live).
...And 4 more matches
Mozilla’s UAAG evaluation report
a very good resource is the customizing document.
...(p1) c also known as view source.
...(p2) p can view event handlers through source view or dom inspector (tasks, tools, dom inspector) 9.7 move content focus optimally.
...And 4 more matches
AddonManager
to import the addonmanager object in the add-on sdk, use: const { addonmanager } = require("resource://gre/modules/addonmanager.jsm"); to import it in a normal bootstrapped extension or similar, use: cu.import("resource://gre/modules/addonmanager.jsm"); method overview promise?
...callback) void installaddonsfromwebpage(in string mimetype, in nsidomwindow source, in nsiuri uri, in addoninstall installs[]) void addinstalllistener(in installlistener listener) void removeinstalllistener(in installlistener listener) promise?
...callback) void addaddonlistener(in addonlistener listener) void removeaddonlistener(in addonlistener listener) void addtypelistener(in typelistener listener) void removetypelistener(in typelistener listener) nsiuri geturiforresourceinfile(in nsifile afile, in string apath) properties overview attribute type description addontypes dictionary a dictionary that maps type id to addontype.
...And 4 more matches
Application Translation with Mercurial
getting the current texts in english and your locale obtaining the english texts with the source code get the source code by downloading the following file: firefox desktop or firefox for android: download the mozilla-<branch>.hg file (e.g.
...comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g.
...now go to the directory where you want to put the source code.
...And 4 more matches
Index
these resources are for anyone with an interest in the technical aspects involved in localization.
... 10 localization notes guide, internationalization, localization, mozilla localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add comments to the localizable files themselves, too.
... 24 localizing with mercurial build documentation, internationalization, localization in mozilla, we use the the mercurial version control system (hg) to manage our source code and localizations.
...And 4 more matches
Initial setup
hg (mercurial) mercurial is the revision control environment that houses the main mozilla source code as well as localized code for each official mozilla localization.
... svn svn is a revision control environment that mozilla uses to house mozilla source websites and their localizations for each official mozilla localization.
... hg (mercurial) as noted above, we use mercurial for maintaining mozilla source code and localized code.
...And 4 more matches
Introduction to NSPR
the current implementation of nspr allows developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix.
...a thread has a limited number of resources that it truly owns.
... these resources include the thread stack and the cpu register set (including pc).
...And 4 more matches
JSS Provider Notes
if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature.
...ng rc4 none none rc2 cbc nopadding pkcs5padding the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness.
... keygenerator supported algorithms notes aes des desede (des3 ) rc4 the securerandom argument passed to init() is ignored, because nss does not support specifying an external source of randomness.
...And 4 more matches
Mozilla-JSS JCA Provider notes
if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature.
... aes ecb nopadding cbc nopadding pkcs5 padding rc4 none none rc2 cbc nopadding pkcs5padding the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness.
... keygenerator supported algorithms notes aes des desede (des3) rc4 the securerandom argument passed to init() is ignored, because nss does not support specifying an external source of randomness.
...And 4 more matches
Rhino JavaScript compiler
overview the javascript compiler translates javascript source into java class files.
... compiler command line java org.mozilla.javascript.tools.jsc.main [options] file1.js [file2.js...] where options are: -extends java-class-name specifies that a java class extending the java class java-class-name should be generated from the incoming javascript source file.
... each global function in the source file is made a method of the generated class, overriding any methods in the base class by the same name.
...And 4 more matches
Bytecode Descriptions
format: jof_object classconstructor operands: (uint32_t nameindex, uint32_t sourcestart, uint32_t sourceend) stack: ⇒ constructor create and push a default constructor for a base class.
...the sourcestart/sourceend offsets are the start/end offsets of the class definition in the source buffer, used for tostring().
... they must be valid offsets into the source buffer, measured in code units, such that scriptsource->substring(cx, start, end) is valid.
...And 4 more matches
JSAPI User Guide
hello world using the spidermonkey library to build spidermonkey from source, see spidermonkey build documentation.
...build it from source instead.
...when your application is done with spidermonkey altogether, use js_shutdown to free any remaining cached resources.
...And 4 more matches
JS_DecompileScript
return the source code of the script or the function.
... description js_decompilescript returns the source code of script.
...otherwise, it returns the original source code of the script.
...And 4 more matches
Signing Mozilla apps for Mac OS X
apple's code signing guide is also a good resource on the subject.
... --resource-rules /path/to/coderesources specifies a file to use when generating the rules to be applied to the code signing.
... when you're signing mozilla applications with v1 signatures, you'll need to specify a custom coderesources file here.
...And 4 more matches
nsIFile
to create an nsifile from a path you can use fileutils.jsm: var fileutils = cu.import("resource://gre/modules/fileutils.jsm").fileutils var nsifile = new fileutils.file( filename ) note: nsilocalfile was merged with this interface in gecko 14.
...if you need to know the size of the combined data and resource forks use nsilocalfilemac.getfilesizewithresfork().
...any meta data, such as a resource fork on the mac, is not included in the measurement of the file size.
...And 4 more matches
Plug-in Basics - Plugins
notice in view-source that this information is simply gathered from the javascript.
...a plug-in consumes no resources other than disk space when it is not loaded.
...when the browser starts, it enumerates the available plug-ins (this step varies according to platform), reads resources from each plug-in file to determine the mime types for that plug-in, and registers each plug-in library for its mime types.
...And 4 more matches
Set a breakpoint - Firefox Developer Tools
the source pane context menu in the source pane, you can handle setting breakpoints by bringing up the context menu over a line number.
...you can set an unconditional breakpoint using the context menu (see above), or by: clicking on the line number for the line you want to break at in the source pane.
... highlighting the line you want to break at in the source pane and pressing ctrl + b (windows/linux) or cmd + b (macos).
...And 4 more matches
Debugger.Memory - Firefox Developer Tools
there are four representations kept in memory: source code.
... spidermonkey retains a copy of most javascript source code.
... compressed source code.
...And 4 more matches
Canvas API - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
... easeljs is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
... fabric.js is an open-source canvas library with svg parsing capabilities.
...And 4 more matches
HTMLAnchorElement - Web APIs
htmlanchorelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
... htmlhyperlinkelementutils.href is a usvstring that is the result of parsing the href html attribute relative to the document, containing a valid url of a linked resource.
... htmlanchorelement.hreflang is a domstring that reflects the hreflang html attribute, indicating the language of the linked resource.
...And 4 more matches
HTMLObjectElement - Web APIs
the htmlobjectelement interface provides special properties and methods (beyond those on the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources.
... htmlobjectelement.archive is a domstring that reflects the archive html attribute, containing a list of archives for resources for this object.
... htmlobjectelement.data returns a domstring that reflects the data html attribute, specifying the address of a resource's data.
...And 4 more matches
Performance - Web APIs
it's part of the high resolution time api, but is enhanced by the performance timeline api, the navigation timing api, the user timing api, and the resource timing api.
... performance.clearresourcetimings() removes all performance entries with a entrytype of "resource" from the browser's performance data buffer.
... performance.setresourcetimingbuffersize() sets the browser's resource timing buffer size to the specified number of "resource" type performance entry objects.
...And 4 more matches
Range.compareBoundaryPoints() - Web APIs
syntax compare = range.compareboundarypoints(how, sourcerange); return value compare a number, -1, 0, or 1, indicating whether the corresponding boundary-point of the range is respectively before, equal to, or after the corresponding boundary-point of sourcerange.
... parameters how a constant describing the comparison method: range.end_to_end compares the end boundary-point of sourcerange to the end boundary-point of range.
... range.end_to_start compares the end boundary-point of sourcerange to the start boundary-point of range.
...And 4 more matches
ReadableStream.pipeTo() - Web APIs
available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed.
... preventabort: if this is set to true, errors in the source readablestream will no longer abort the destination writablestream.
... the method will return a promise rejected with the source’s error, or with any error that occurs during aborting the destination.
...And 4 more matches
Using the Screen Capture API - Web APIs
logicalsurface a boolean which if true indicates that the capture should include offscreen areas of the source, if there are any.
...it doesn't establish a restriction on the size of the source itself.
... note: constraints never cause changes to the list of sources available for capture by the screen sharing api.
...And 4 more matches
WebGL: 2D and 3D graphics for the web - Web APIs
WebAPIWebGL API
resources raw webgl: an introduction to webgl a talk by nick desaulniers that introduces the basics of webgl.
... pixi.js is a fast, open-source 2d webgl renderer.
... playcanvas is an open-source game engine.
...And 4 more matches
Basic concepts behind Web Audio API - Web APIs
several sources — with different types of channel layout — are supported even within a single context.
... audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination.
... inside the context, create sources — such as <audio>, oscillator, or stream.
...And 4 more matches
Web audio spatialization basics - Web APIs
as if its extensive variety of sound processing (and other) options wasn't enough, the web audio api also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3d game.
...if you just want a simple stereo panning effect, our stereopannernode example (see source code) should give you everything you need.
...see the 3d spatialization demo live (and see the source code also).
...And 4 more matches
WindowOrWorkerGlobalScope.fetch() - Web APIs
the fetch() method of the windoworworkerglobalscope mixin starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.
... windoworworkerglobalscope is implemented by both window and workerglobalscope, which means that the fetch() method is available in pretty much any context in which you might want to fetch resources.
... the fetch() method is controlled by the connect-src directive of content security policy rather than the directive of the resources it's retrieving.
...And 4 more matches
Operable - Accessibility
success criteria how to conform to the criteria practical resource 2.1.1 keyboard (a) all functionality should be accessible using keyboard controls, unless it cannot be done using the keyboard (e.g.
... success criteria how to conform to the criteria practical resource 2.2.1 timing is adjustable (a) for functionality with time limits (e.g.
... success criteria how to conform to the criteria practical resource 2.3.1 three flashes, or below threshold (a) content doesn't contain any aspect that flashes more than three times per second, or flashing content is below acceptable flash and red flash thresholds.
...And 4 more matches
MIME types (IANA media types) - HTTP
for example, for the mime type text, the subtype might be plain (plain text), html (html source code), or calendar (for icalendar/.ics) files.
... text list at iana text-only data including any human-readable content, source code, or textual data such as comma-separated value (csv) formatted data.
...: bytes 100-200/1270 eta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="vieport" content --3d6b6a416f9b5 content-type: text/html content-range: bytes 300-400/1270 -color: #f0f0f2; margin: 0; padding: 0; font-family: "open sans", "helvetica --3d6b6a416f9b5-- importance of setting the correct mime type most web servers send unrecognized resources as the application/octet-stream mime type.
...And 4 more matches
If-Match - HTTP
WebHTTPHeadersIf-Match
for get and head methods, the server will send back the requested resource only if it matches one of the listed etags.
... for put and other non-safe methods, it will only upload the resource in this case.
... there are two common use cases: for get and head methods, used in combination with a range header, it can guarantee that the new ranges requested comes from the same resource than the previous one.
...And 4 more matches
HTTP Messages - HTTP
WebHTTPMessages
for example, get indicates that a resource should be fetched or post means that data is pushed to the server (creating or modifying a resource, or generating a temporary document to send back).
...not all requests have one: requests fetching resources, like get, head, delete, or options, usually don't need one.
... bodies can be broadly divided into two categories: single-resource bodies, consisting of one single file, defined by the two headers: content-type and content-length.
...And 4 more matches
Redirections in HTTP - HTTP
they imply that the original url should no longer be used, and replaced with the new one.search engine robots, rss readers, and other crawlers will update the original url for the resource.
... temporary redirections sometimes the requested resource can't be accessed from its canonical location, but it can be accessed from another place.
...temporary redirections are also used when creating, updating, or deleting resources, to show temporary progress pages.
...And 4 more matches
Digital audio concepts - Web media technologies
these molecules affect the ones adjacent to them, and so forth, propagating the vibration in the form of a wave outward from the source until the amplitude of the wave (its volume) fades away with distance.
... the position of each audio source within the audio signal is called a channel.
... each channel contains a sample indicating the amplitude of the audio being produced by that source at a given moment in time.
...And 4 more matches
Lazy loading - Web Performance
lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed.
... between 2011 and 2019, the median resource weight increased from ~100kb to ~400kb for desktop and ~50kb to ~350kb for mobile.
... one of the methods we can use to tackle this problem is to shorten the critical rendering path length by lazy loading resources that are not critical for the first render to happen.
...And 4 more matches
Filter effects - SVG: Scalable Vector Graphics
<svg width="250" viewbox="0 0 200 85" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlightin...
...g> <fecomposite in="specout" in2="sourcealpha" 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 <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <fegaussianblur> takes in "sourcealpha", which is the alpha channel of the source graphic, applies a blur of 4, and stores the result in a temporary buffer named "blur".
...And 4 more matches
util/object - Archive of obsolete content
globals functions merge(source, arguments) merges all of the properties of all arguments into the first argument.
...properties are merged with descriptors onto the source object.
... "sf" }); b === a // true b.jetpacks // "are yes" b.foo // 50 b.bar // 6 b.location // "sf" // merge also translates property descriptors var c = { "type": "addon" }; var d = {}; object.defineproperty(d, "name", { value: "jetpacks", configurable: false }); merge(c, d); var props = object.getownpropertydescriptor(c, "name"); console.log(props.configurable); // true parameters source : object the object that other properties are merged into.
...And 3 more matches
Downloading Files - Archive of obsolete content
components.utils.import("resource://gre/modules/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 windo...
...var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, privacy); if you don't need detailed progress information, you might be happier with nsidownloader.
... downloading binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/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"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the browser window that the url // we are downloading comes from.
...And 3 more matches
Miscellaneous - Archive of obsolete content
var osstring = services.appinfo.os; detecting the host application and version // get the name of the application running us services.appinfo.name; // returns "firefox" for firefox services.appinfo.version; // returns "2.0.0.1" for firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639...
... see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#4674 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
...put this code in the components/certsservice.js file: const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); const gobserver = cc['@mozilla.org/observer-service;1'].getservice(ci.nsiobserverservice); const gioservice = cc["@mozilla.org/network/io-service;1"].getservice(ci.nsiioservice); function certsservice() {} certsservice.prototype = { observe: function(asubject, atopic, adata) { switch(atopic) { case "app-startup": gobserver...
...And 3 more matches
Appendix D: Loading Scripts - Archive of obsolete content
speed: script tags may or may not be loaded from pre-compiled bytecode in the fastload cache (gecko 1.x) or startup cache (gecko 2), which means they don't necessarily need to read as source and compiled with each restart.
...// the following may be used instead at the top-level: // // let context = this if (components.utils.getglobalforobject) // gecko 2.x var context = components.utils.getglobalforobject({}); else // gecko 1.x context = {}.__parent__; loadscript("script.js", context); the sub-script loader the mozijssubscriptloader can be used to load local scripts from the chrome:, resource:, and file: protocols into any javascript object.
...for instance, the file “resource://foo/bar.js” loaded from “resource://foo/baz.js” will appear as “resource://foo/baz.js -> resource://foo/bar.js” in stack traces.
...And 3 more matches
Tabbed browser - Archive of obsolete content
furthermore another meaning of 'browser' in this document and in some firefox source is "the tabbrowser element" in a firefox xul window.
... xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", "nsisessionstore"); // create new tab, but don't load the content.
... components.utils.import('resource://gre/modules/services.jsm'); services.obs.addobserver(httpobs, 'http-on-modify-request', false); //services.obs.removeobserver(httpobs, 'http-on-modify-request'); //uncomment this line, or run this line when you want to remove the observer var httpobs = { observe: function (asubject, atopic, adata) { if (atopic == 'http-on-modify-request') { /*start - do not edit here*/ ...
...And 3 more matches
Index of archived content - Archive of obsolete content
page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browsers xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build ...
...irefox extensions migrating from internal linkage to frozen linkage migrating raw components to add-ons multiple item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuitive ui chapter 4: using xpcom—implementing advanced processes chapter 5: let's build a firefox extension chapter 6: firefox extensions and xul a...
... priority content prism blogposts build bundlelibrary bundles configuration extensions faq hostwindow installer scripting styling proxy ui pydom rdf api rdf datasource how-to reading textual data remote xul remote debugging rsyncing the cvs repository running windows debug builds downloaded from tinderbox sxsw 2007 presentations safe browsing safe browsing: design documentation safely loading uris same origin policy for xbl space manager detailed design...
...And 3 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
sheets (css): css level 1, css level 2.1 and parts of css level 3 document object model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
...clicking on the link will open mozilla's internal view source window with the offending line highlighted.
...xmlhttprequest(); myxmlhttprequest.open("get", "example1.xsl", false); myxmlhttprequest.send(null); // get the xml document and import it xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xml", false); myxmlhttprequest.send(null); var xmlsource = myxmlhttprequest.responsexml; var resultdocument = xsltprocessor.transformtodocument(xmlsource); after creating an xsltprocessor, you load the xslt file using xmlhttprequest.
...And 3 more matches
addFile - Archive of obsolete content
method of install object syntax public int addfile ( string registryname, installversion version, string xpisourcepath, object localdirspec, string relativelocalpath, boolean forceupdate); public int addfile ( string registryname, string version, string xpisourcepath, object localdirspec, string relativelocalpath, boolean forceupdate); public int addfile ( string xpisourcepath); public int addfile ( string registryname, string xpisourcepath, object localdirspec, string relativelocalpath); public int addfile ( string registryname, string version, string...
... xpisourcepath, object localdirspec, string relativelocalpath); parameters the addfile method has the following parameters: registryname the pathname in the client version registry about the file.
...this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathname.note that the registry pathname is not the location of the software on the machine; it is the location of information about the software inside the client version registry.
...And 3 more matches
Building Hierarchical Trees - Archive of obsolete content
with an rdf datasource, this would usually be an rdf container such as a seq and the tree would display its children.
... for an xml datasource, the tree might display a node's children as the children in the tree, making the tree display a hierarchy similar to that in the xml document.
...if you want to put rows inside the photo rows, you will either need to make each photo resource a container (for this rdf datasource, this will usually be an rdf seq), or use the containment attribute to specify additional properties that indicate containership.
...And 3 more matches
Building Trees - Archive of obsolete content
to use the tree builder, you need to add a flags attribute to the root node: <tree datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content"> the dont-build-content flag causes no content to be built for the template.
...here is an example (using an rdf 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://purl.org/...
...the content builder generates content in the template body and substitutes data from the datasource right away.
...And 3 more matches
Containment Properties - Archive of obsolete content
however, the simple query syntax may also iterate over a single predicate pointing out of a resource, rather than use the children.
...<vbox datasources="template-guide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate.
...if the resource 'http://www.xulplanet.com/rdf/a' was also an rdf seq with some children, then those children would also be added to the results.
...And 3 more matches
Multiple Queries - Archive of obsolete content
the following is the basic structure of a template with multiple queries: <listbox datasources="..." ref="..."> <queryset> <query> ...
...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://purl.org/dc/elements/1.1/title" object="canal"/> </query> <act...
...this is because the builder notices that the photos are in an rdf seq in the datasource and arranges them in the order they appear in the seq.
...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://purl.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="...
...the resource uris correspond to their actual urls although this isn't necessary.
...first, we set the datasources and ref attributes as needed: <vbox datasources="template-guide-ex2.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> this time, we need to use a new statement, the member condition as well as a triple.
...And 3 more matches
Simple Query Syntax - Archive of obsolete content
the subject of the binding is the result member resource, the predicate is the string that comes after 'rdf:' and the object isn't necessary as the value is replaced directly in the attribute.
...the special value 'rdf:*' means the uri of the result resource, rather than referring to a predicate.
...you can only filter on predicates pointing out of the member resource.
...And 3 more matches
List Controls - Archive of obsolete content
example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute.
...the following example demonstrates these additional features: example 2 : source view <listbox rows="3"> <listitem label="butter pecan" value="bpecan" /> <listitem label="chocolate chip" value="chocchip" /> <listitem label="raspberry ripple" value="raspripple" /> <listitem label="squash swirl" value="squash" /> </listbox> the example has been changed to display only 3 rows at a time.
... the following example is of a listbox with two columns and three rows: example 3 : source view <listbox> <listcols> <listcol/> <listcol/> </listcols> <listitem> <listcell label="george" /> <listcell label="house painter" /> </listitem> <listitem> <listcell label="mary ellen" /> <listcell label="candle maker" /> </listitem> <listitem> <listcell label="roger" /> <listcell label="swashbuckler" /> </listitem> </listbox> header rows list...
...And 3 more matches
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
example tree with two columns example 1 : source view <tree flex="1"> <treecols> <treecol id="namecolumn" label="name" flex="1"/> <treecol id="addresscolumn" label="address" flex="2"/> </treecols> <treechildren/> </tree> first, the entire table is surrounded with a tree element.
...they are used only as the source for the data for the view.
... that the treeitems are unlike other xul elements is a common source of confusion for xul developers.
...And 3 more matches
XUL accessibility guidelines - Archive of obsolete content
intro to accessibility, assistive technologies, and mozilla resources.
... lars (linux accessibility resource site).
...refer to the following resources when setting keyboard shortcuts.
...And 3 more matches
query - Archive of obsolete content
ArchiveMozillaXULquery
the attributes and content of the query are dependent on the type of datasource being used.
... for rdf datasources, the query should contain one content element as well as member and/or triple elements.
... for xml datasources, the query should have an expr attribute and may optionally contain assign elements.
...And 3 more matches
triple - Archive of obsolete content
the subject of a triple is an rdf resource.
...for example, for a bookmark resource, the name and url would be predicates.
...it can be a variable reference, an rdf resource uri, or an rdf literal value.
...And 3 more matches
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
follow the instructions for meeting build requirements and getting the source, then come back here since the build process itself will be slightly different.
... got source?
...source) directory.
...And 3 more matches
Audio for Web games - Game development
audio sprites audio sprites borrow their name from css sprites, which is a visual technique for using css with a single graphic resource to break it into a series of sprites.
...aria-describedby="horns-play-label"> <span id="horns-play-label">play</span> </button> </li> <li data-loading="true"> <a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="clavi-play-label"> <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <a href="http://jplayer.org/">jplayer.org</a></p> </section> all of these tracks are the same tempo and are designed to be synchronized with each other, so we need to make sure they are loaded and available to the api before we are able to play them.
... let offset = 0; function playtrack(audiobuffer) { const tracksource = audioctx.createbuffersource(); tracksource.buffer = audiobuffer; tracksource.connect(audioctx.destination) if (offset == 0) { tracksource.start(); offset = audioctx.currenttime; } else { tracksource.start(0, audioctx.currenttime - offset); } return tracksource; } finally, let's loop over our <li> elements, grab the correct file for each one and then allow playback by...
...And 3 more matches
How do you make sure your website works properly? - Learn web development
"404" means "resource not found", and that's why we didn't see the image.
...here are the most common statuses: 200: ok the resource you asked for was delivered.
... 301: moved permanently the resource has moved to a new location.
...And 3 more matches
How to build custom form controls - Learn web development
if you want to learn more about this topic, you should check out the following helpful resources: uxmatters.com uxdesign.com the ux design section of smashingmagazine note: also, in most systems there is a way to open the <select> element with the keyboard to look at all the available choices (this is the same as clicking the <select> element with a mouse).
... .select .option { padding: .2em .3em; /* 2px 3px */ } .select .highlight { background: #000; color: #ffffff; } so here's the result with our three states: basic state active state open state check out the source code bringing your control to life with javascript now that our design and structure are ready, we can write the javascript code to make the control actually work.
... window.addeventlistener("load", function () { document.body.classlist.remove("no-widget"); document.body.classlist.add("widget"); }); without js with js check out the source code note: if you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the <select> elements, and to dynamically add the dom tree representing the custom control after every <select> element in the page.
...And 3 more matches
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.
...if you want to make the source of the quotation available on the page you need to make it available in the text via a link or some other appropriate way.
... there is a <cite> element, but this is meant to contain the title of the resource being quoted, e.g.
...And 3 more matches
Introduction to web APIs - Learn web development
image source: overloaded plug socket by the clear communication people, on flickr.
... mediaelementaudiosourcenode, which represents an <audio> element containing sound you want to play and manipulate inside the audio context.
... we start by creating an audiocontext instance inside which to manipulate our track: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); next, we create constants that store references to our <audio>, <button>, and <input> elements, and use the audiocontext.createmediaelementsource() method to create a mediaelementaudiosourcenode representing the source of our audio — the <audio> element will be played from: const audioelement = document.queryselector('audio'); const playbtn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event...
...And 3 more matches
Understanding client-side JavaScript frameworks - Learn web development
we are not aiming to exhaustively teach you everything you need to know about react/reactdom, or vue, or some other specific framework; the framework teams' own docs (and other resources) do that job already.
...react resources our final article provides you with a list of react resources that you can use to go further in your learning.
...ember resources and troubleshooting our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
...And 3 more matches
Application cache implementation overview
when load of the resource fails fallback steps are performed (see “falling back on a resource load failure” chapter).
... associating the top level document with offline cache this happens between document load start and the first sub-resource download start and is not about associating nsiapplicationcache object with the channel, but with the document object the load is performed for.
...loading subresources of a document using offline cache each sub resource loading channel is set inheritapplicationcache flag.
...And 3 more matches
Chrome registration
there are three basic types of chrome providers: content the main source file for a window description comes from the content provider, and it can be any file type viewable from within mozilla.
...this allows translators to plug in a different chrome package to translate an application without altering the rest of the source code.
... resource aliases can be created using the resource instruction: resource aliasname uri/to/files/ [flags] this will create a mapping for resource://<aliasname>/ uris to the path given.
...And 3 more matches
Creating a Language Pack
please consult the documentation on localized builds on firefox-source-docs.
... creating a langpack we will now merge the localized files from x-testing locale with the en-us files from the original source.
... $ make ident fx_revision 237dccbcb967 buildid 20091126033851 you can now go back to your source hg clone.
...And 3 more matches
Addon
overview of required methods void iscompatiblewith(in string appversion, in string platformversion) void findupdates(in updatelistener listener, in integer reason, in string appversion, in string platformversion) overview of optional methods void uninstall() void canceluninstall() boolean hasresource(in string path) nsiuri getresourceuri(in string path) void getdatadirectory(in datadirectorycallback callback) required properties attribute type description appdisabled read only boolean true if this add-on cannot be used in the application based on version compatibility, dependencies, and blocklisting.
... sourceuri read only nsiuri the uri that this add-on was installed from.
... void canceluninstall( ) hasresource() checks whether a file resource is available for this add-on.
...And 3 more matches
PromiseWorker.jsm
promiseworker.jsm path: resource://gre/modules/promiseworker.jsm a javascript code module used by the main thread to create a worker thread and communicate with it.
... promiseworker.js path: resource://gre/modules/workers/promiseworker.js a javascript file used by the worker thread, which is created by promiseworker.jsm in main thread, to communicate with the main thread.
...the code below is what should be copied and pasted: importscripts('resource://gre/modules/workers/require.js'); let promiseworker = require('resource://gre/modules/workers/promiseworker.js'); // instantiate abstractworker (see below).
...And 3 more matches
XPCOMUtils.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/xpcomutils.jsm"); using xpcomutils exposing a javascript class as a component using these utility methods requires four key steps: import xpcomutils.jsm, as explained previously.
...ents" is the array created in the previous section if ("generatensgetfactory" in xpcomutils) var nsgetfactory = xpcomutils.generatensgetfactory(components); // gecko 2.0+ else var nsgetmodule = xpcomutils.generatensgetmodule(components); // gecko 1.9.x method overview function definelazygetter(aobject, aname, alambda); function definelazymodulegetter(aobject, aname, aresource, [optional] asymbol); function definelazyservicegetter(aobject, aname, acontract, ainterfacename); function generatensgetfactory(componentsarray); function generateci(classinfo); function generateqi(interfaces); void importrelative(that, path, scope); generator itersimpleenumerator(enumerator, interface); generator iterstringenumerat...
... function definelazymodulegetter( aobject, aname, aresource, asymbol ); parameters aobject the object to define the lazy getter on.
...And 3 more matches
L10n Checks
the easiest way is to just run: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ sudo python setup.py install or, if you're on windows: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ python setup.py install running it mercurial source (source) mode l10n checks gathers the directories to compare from an ini file, usually found in $app/locales/l10n.ini.
...options reference locale in the source and xpi modes you can change the default reference locale (en-us) by setting the -r parameter, e.g.: check-l10n-completeness -r pl browser/locales/l10n.ini ../l10n/ de output mode you can change the look and feel of the output by setting the -o parameter to 0 (tree; default), 1 (full tree) or 2 (full relative paths), e.g.: check-l10n-completeness -o 2 browser/locales/l10n.ini ../l10n/ de en-us ...
...in the locale directory in the source mode you can tell l10n checks to look for the en-us locale in the directory containing all other locales instead of the directory containing the source by setting the -l parameter (useful for e.g.
...And 3 more matches
Localizing XLIFF files for iOS
source english strings are contained in <source> child tags.
... here is an example of such a <trans-unit> <trans-unit id="add to bookmarks"> <source>add to bookmarks</source> </trans-unit> your translations must be contained inside <target> child tags.
... go through the full xliff page adding <target></target> below each <source> tag set to help you to identify strings that need to be translated.
...And 3 more matches
NSPR's Position On Abrupt Thread Termination
if a thread was to abruptly terminate, there is no recording of what resources it owns and should therefore be reclaimed.
... those resources are in fact, owned by the process and shared by all the threads within the process.
... in the general course of events when programming with threads, it is very advantageous for a thread to have resources that it and only it knows about.
...And 3 more matches
NSS Developer Tutorial
tabs are used heavily in many nss source files.
... miscellaneous goto can be used, to simplify resource deallocation, before returning from a function.
...unfortunately, this can be a source of integer overflow bugs on 64-bit systems.
...And 3 more matches
certutil
--merge merge a source database into the target database.
... --source-dir certdir identify the certificate database directory to upgrade.
... --source-prefix certdir give the prefix of the certificate and key databases to upgrade.
...And 3 more matches
SpiderMonkey 1.8.5
the latest version of spidermonkey can always be found on the source download page.
...you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a4574365938222adca0a6bd33329cb32).
... spidermonkey 1.8.5 is not binary-compatible with previous releases, nor is it source-code compatible.
...And 3 more matches
Preface
although, xpcom can be used in many environments which are unrelated to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate xpcom's functionality.
...if you already have a mozilla build or the source from mozilla 1.2 or later, then you can use the xpcom framework available there.
... if you don't already have the mozilla source, then an even easier way to get and use xpcom is to download the gecko sdk, which is a collection of libraries and tools that features the xpcom component framework.
...And 3 more matches
nsIDownloadManager
to get the service, use: var downloadmanager = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); method overview nsidownload adddownload(in short adownloadtype, in nsiuri asource, in nsiuri atarget, in astring adisplayname, in nsimimeinfo amimeinfo, in prtime astarttime, in nsilocalfile atempfile, in nsicancelable acancelable, in boolean aisprivate); void addlistener(in nsidownloadprogresslistener alistener); void canceldownload(in unsigned long aid); void cleanup(); void endbatchupdate(); obsolete since gecko 1.9.1 void flush...
... datasource nsirdfdatasource read only.
... nsidownload adddownload( in short adownloadtype, in nsiuri asource, in nsiuri atarget, in astring adisplayname, in nsimimeinfo amimeinfo, in prtime astarttime, in nsilocalfile atempfile, in nsicancelable acancelable, in boolean aisprivate ); parameters adownloadtype the download type for the transfer.
...And 3 more matches
XPIDL
the only constants supported are those which become integer types when compiled to source code; string constants and floating point constants, though parseable, cannot be made into a header or xpt file.
... source and binary compatibility some consumers of idl interfaces create binary plugins that expect the interfaces to be stored in a specific way in memory.
...when a change to an interface made by an xpidl developer requires that third-party binary addons change their source code, we say that it affects source compatibility.
...And 3 more matches
Debugger-API - Firefox Developer Tools
debugger has three essential qualities: it is a source level interface: it operates in terms of the javascript language, not machine language.
...given a debugger.script, one can set breakpoints, translate between source positions and bytecode offsets (a deviation from the “source level” design principle), and find other static characteristics of the code.
... omitted from this picture are debugger.source instances, which represent javascript compilation units.
...And 3 more matches
Examine and edit CSS - Firefox Developer Tools
link to css file at the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the style editor.
... you can copy the location of the source file: right-click the link and select "copy location".
... the inspector understands css source maps.
...And 3 more matches
AudioBuffer - Web APIs
once put into an audiobuffer, the audio can then be played by being passed into an audiobuffersourcenode.
...for longer sounds, objects implementing the mediaelementaudiosourcenode are more suitable.
... audiobuffer.copytochannel() copies the samples to the specified channel of the audiobuffer, from the source array.
...And 3 more matches
AudioListener - Web APIs
in a previous version of the specification, the dopplerfactor and speedofsound properties and the setposition() method could be used to control the doppler effect applied to audiobuffersourcenodes connected downstream — these would be pitched up and down according to the relative speed of the pannernode and the audiolistener.
... these features had a number of problems: only audiobuffersourcenodes were pitched up or down, not other source nodes.
... the behavior to adopt when an audiobuffersourcenode was connected to multiple pannernodes was unclear.
...And 3 more matches
BaseAudioContext.createBuffer() - Web APIs
the createbuffer() method of the baseaudiocontext interface is used to create a new, empty audiobuffer object, which can then be populated by data, and played via an audiobuffersourcenode for more details about audio buffers, check out the audiobuffer reference page.
...the asynchronous method decodeaudiodata() does the same thing — takes compressed audio, say, an mp3 file, and directly gives you back an audiobuffer that you can then set to play via in an audiobuffersourcenode.
... now let's look at a more complex createbuffer() example, in which we create a three second buffer, fill it with white noise, and then play it via an audiobuffersourcenode.
...And 3 more matches
BaseAudioContext.decodeAudioData() - Web APIs
this is the preferred method of creating an audio source for web audio api from an audio track.
...usually you'll want to put the decoded data into an audiobuffersourcenode, from which it can be played and manipulated how you want.
...we then pass this buffer into a decodeaudiodata() function; the success callback takes the successfully decoded pcm data, puts it into an audiobuffersourcenode created using audiocontext.createbuffersource(), connects the source to the audiocontext.destination and sets it to loop.
...And 3 more matches
DataTransfer.effectAllowed - Web APIs
the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of relationship or connection will be created between the source and drop locations.
... this property should be set in the dragstart event to set the desired drag effect for the drag source.
... copy a copy of the source item may be made at the new location.
...And 3 more matches
Fetch API - Web APIs
WebAPIFetch API
the fetch api provides an interface for fetching resources (including across the network).
... for making a request and fetching a resource, use the windoworworkerglobalscope.fetch() method.
...this makes it available in pretty much any context you might want to fetch resources in.
...And 3 more matches
HTMLImageElement.sizes - Web APIs
syntax let sizes = htmlimageelement.sizes; htmlimageelement.sizes = sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fallback size.
... each source size descriptor is comprised of a media condition, then at least one whitespace character, then the source size value to use for the image when the media condition evaluates to true.
... media conditions each source size descriptor consists of a media condition as defined by the media queries standard.
...And 3 more matches
HTMLImageElement.srcset - Web APIs
the htmlimageelement property srcset is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances.
... syntax htmlimageelement.srcset = imagecandidatestrings; let srcset = htmlimageelement.srcset; value a usvstring containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the <img> element represented by the htmlimageelement.
... each image candidate string must begin with a valid url referencing a non-interactive graphic resource.
...And 3 more matches
HTMLVideoElement - Web APIs
you should either provide your video in a single format that all the relevant browsers supports, or provide multiple video sources in enough different formats that all the browsers you need to support are covered.
... htmlvideoelement.videoheight read only returns an unsigned integer value indicating the intrinsic height of the resource in css pixels, or 0 if no media is available yet.
... htmlvideoelement.videowidth read only returns an unsigned integer value indicating the intrinsic width of the resource in css pixels, or 0 if no media is available yet.
...And 3 more matches
Drag Operations - Web APIs
the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of relationship or connection will be created between the source and drop locations.
... you can specify which of the three operations are allowed for a drag source by setting the effectallowed property within a dragstart event listener.
... if the chosen effect were "move", then the original data should be removed from the source of the drag within the dragend event.
...And 3 more matches
MediaRecorder.start() - Web APIs
a blob is created and the data is collected in it until the time slice period elapses or the source media ends.
...if the source is still playing, a new blob is created and recording continues into that, and so forth.
... when the source stream ends, state is set to inactive and data gathering stops.
...And 3 more matches
MediaTrackSettings - Web APIs
the device id is a origin-unique string identifying the source of the track; this is usually a guid.
... this value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling mediadevices.getusermedia().
...the group id is a browsing session-unique string identifying the source group of the track.
...And 3 more matches
Performance API - Web APIs
the interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource).
... performanceresourcetiming provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.
... performance timeline level 2 candidate recommendation adds serializer to the performanceentry interface as well as adding the performanceobserver interface and callback resource timing level 1 candidate recommendation adds the performanceresourcetiming interface.
...And 3 more matches
RTCInboundRtpStreamStats - Web APIs
bytesreceived a 64-bit integer which indicats the total numer of bytes that have been received so far for this media source.
... fecpacketsdiscarded an integer value indicating the number of rtp forward error correction (fec) packets which have been received for this source, for which the error correction payload was discarded.
... fecpacketsreceived an integer value indicating the total number of rtp fec packets received for this source.
...And 3 more matches
Storage Access API - Web APIs
the api provides methods that allow embedded resources to check whether they currently have access to their first-party storage, and to request access to their first-party storage from the user agent.
... concepts and usage most browsers implement a number of storage access policies that restrict access to cookies and site data for embedded, cross-origin resources.
... these restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party context.
...And 3 more matches
TrackDefault.TrackDefault() - Web APIs
syntax var trackdefault = new trackdefault(type, language, label, kinds, bytestreamtrackid); parameters type a domstring specifying a media segment data type for the sourcebuffer to contain.
... language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language information for a new track.
... label a domstring specifying a default label for the sourcebuffer to use when an initialization segment does not contain label information for a new track.
...And 3 more matches
WebGLRenderingContext.blendEquationSeparate() - Web APIs
syntax void gl.blendequationseparate(modergb, modealpha); parameters modergb a glenum specifying how the red, green and blue components of source and destination colors are combined.
... must be either: gl.func_add: source + destination (default value), gl.func_subtract: source - destination, gl.func_reverse_subtract: destination - source, when using the ext_blend_minmax extension: ext.min_ext: minimum of source and destination, ext.max_ext: maximum of source and destination.
... when using a webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.max: maximum of source and destination.
...And 3 more matches
WebGLRenderingContext.bufferData() - Web APIs
possible values: gl.static_draw: the contents are intended to be specified once by the application, and used many times as the source for webgl drawing and image specification commands.
... gl.dynamic_draw: the contents are intended to be respecified repeatedly by the application, and used many times as the source for webgl drawing and image specification commands.
... gl.stream_draw: the contents are intended to be specified once by the application, and used at most a few times as the source for webgl drawing and image specification commands.
...And 3 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
while reading this article and the accompanying source code, it's helpful to keep in mind that the display for a 3d headset is a single screen, divided in half.
... setup and utility functions next, we declare the variables and constants used throughout the application, starting with those used to store webgl and webxr specific information: let polyfill = null; let xrsession = null; let xrinputsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene.
...refer to that if you're interested in the glsl source code for the basic shaders used here.
...And 3 more matches
Using IIR filters - Web APIs
also see the source code on github.
...musicdsp.org is also a great resource if you want to read more about different filters and how they are implemented digitally.
... using an iirfilter in an audio graph let's create our context and our filter node: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = audioctx.createiirfilter(feedforward, feedback); we need a sound source to play.
...And 3 more matches
Accessibility Information for Web Authors - Accessibility
accessible web page authoring ibm has put together a simple, practical resource for web authors to learn accessibility the fast and painless way.
... highly recommended, an excellent resource.
... dive into accessibility by mark pilgrim an excellent, easy-to-understand resource (available in english and in 9 other languages) on accessible website authoring, which goes into greater depth.
...And 3 more matches
border-image-repeat - CSS: Cascading Style Sheets
the border-image-repeat css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.
... the source for this interactive example is stored in a github repository.
... values stretch the source image's edge regions are stretched to fill the gap between each border.
...And 3 more matches
<color> - CSS: Cascading Style Sheets
buttonhighlight the color of the border facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border.
... buttonshadow the color of the border away from the light source for 3-d elements that appear 3-d due to that layer of surrounding border.
... threeddarkshadow the color of the darker (generally outer) of the two borders away from the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border.
...And 3 more matches
Creating a cross-browser video player - Developer guides
working example our example video player displays a clip from an open source movie called tears of steel, and includes typical video controls.
... note: you can see the example running live, or check out the source code on github.
... <figure id="videocontainer"> <video id="video" controls preload="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?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="...
...And 3 more matches
Overview of events and handlers - Developer guides
initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the user.
...event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the html content of a page, the interaction of a user with the contents of the page e.g., clicks a button.
...the innovation of the dynamic approach allows for a page to be partially rendered even when the browser has not finished retrieving all resources; this approach also allows for event driven actions, which javascript leverages.
...And 3 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
the source for this interactive example is stored in a github repository.
... additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing image or video data files a filelist listing the chosen files multiple a boolean which, if present, indicates that the user may choose more than one file accept the accept attribute value is a string that defines the file types the file input should accept.
...*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live.
...And 3 more matches
Basics of HTTP - HTTP
http is an extensible protocol that relies on concepts like resources and uniform resource identifiers (uris), simple message structure, and client-server communication flow.
... resources and uris a brief introduction to the concept of resources, identifiers, and locations on the web.
... identifying resources on the web describes how web resources are referenced and how to locate them.
...And 3 more matches
List of default Accept values - HTTP
(source) safari, chrome text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 (source) safari 5 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 this is an improvement over earlier accept headers as it no longer ranks image/png above text/html internet explorer 8 image/jpeg, application/x-ms-applica...
...source safari */* chrome image/webp,image/apng,image/*,*/*;q=0.8 source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 image/png,image/svg+xml,image/*;q=0.8, */*;q=0.5 see fiddler is better with internet explorer 9 (ieinternals' msdn blog) values for a video when a video is ...
... user agent value comment firefox earlier than 3.6 no support for <video> firefox 3.6 and later video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5 see bug 489071 source chrome */* source internet explorer 8 or earlier no support for <video> values for audio resources when an audio file is requested, like via the <audio> html element, most browsers use specific values.
...And 3 more matches
Digest - HTTP
WebHTTPHeadersDigest
the digest response http header provides a digest of the requested resource.
... in rfc 7231 terms this is the selected representation of a resource.
... the selected representation depends on the content-type and content-encoding header values: so a single resource may have multiple different digest values.
...And 3 more matches
PATCH - HTTP
WebHTTPMethodsPATCH
the http patch request method applies partial modifications to a resource.
... a patch request is considered a set of instructions on how to modify a resource.
... contrast this with put; which is a complete representation of a resource.
...And 3 more matches
Function.prototype.toString() - JavaScript
the tostring() method returns a string representing the source code of the function.
... the source for this interactive example is stored in a github repository.
... syntax function.tostring() return value a string representing the source code of the function.
...And 3 more matches
The "codecs" parameter in common media types - Web media technologies
this value defines the function used to map the gamma (delightfully called the "opto-electrical transfer function" in technical parlance) from the source to the display.
... the constraint set flags byte is comprised of one-bit boolean flags, with the most significant bit being referred to as flag 0 (or constraint_set0_flag, in some resources), and each successive bit being numbered one higher.
... specifying an avc profiles using the profile id and constraints components of the codecs parameter profile number (hex) constraints byte constrained baseline profile (cbp) cbp is primarily a solution for scenarios in which resources are constrained, or resource use needs to be controlled to minimize the odds of the media performing poorly.
...And 3 more matches
Using dns-prefetch - Web Performance
dns-prefetch is an attempt to resolve domain names before resources get requested.
... when a browser requests a resource from a (third party) server, that cross-origin’s domain name must be resolved to an ip address before the browser can issue the request.
...then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind.
...And 3 more matches
in - SVG: Scalable Vector Graphics
WebSVGAttributein
if no value is provided and this is the first filter primitive, then this filter primitive will use sourcegraphic as its input.
... fourteen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
... sourcealpha this keyword represents the graphics elements that were the original input into the <filter> element.
...And 3 more matches
<feDiffuseLighting> - SVG: Scalable Vector Graphics
multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.
... usage context categoriesfilter primitive elementpermitted contentany number of descriptive elements and exactly one light source element, in any order.
... example the following example show the effect of the <fediffuselighting> element on a circle with each light source available.
...And 3 more matches
url - Archive of obsolete content
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.
... parameters source : string a string to be converted into a url.
... if source is not a valid uri, this constructor will throw an exception.
...And 2 more matches
Preferences - Archive of obsolete content
if you haven't yet, read other documents about mozilla preferences on mdn (links below in resources section).
... note: this article doesn't cover all available methods for manipulating preferences; please refer to the xpcom reference pages listed in resources section for the complete list of methods.
...look in the resources section below for the link to a list of preferences-related interfaces.
...And 2 more matches
XPCOM Objects - Archive of obsolete content
another useful resource is this xpcom reference.
... this is generated from source, and it's kept relatively up to date.
... it shows the relationships between components and interfaces, but it's more of a source browser than a documentation reference.
...And 2 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // keep track of whether this is the first run.
...cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep track of whether this is the first run.
... </image> <url type="application/x-suggestions+json" template="https://api.example.com/suggestions"> <param name="q" value="{searchterms}"/> </url> <url type="text/html" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="search-box"/> </url> <url type="application/x-moz-keywordsearch" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="keyword"/> </url> <searchform>https://www.example.com/search</searchform> </searchplugin> bootstrap.js const { classes: cc, interfaces: ci, utils: cu, results: cr } = co...
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
apicawatch site performance monitoring tool uses firefox as part of its monitoring package astyle css editor editing tool atmail webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv service basilisk pre-servo xul-based web browser uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.5m downloads and ~400,000 ac...
... digital signage and interactive kiosk tools also used in firecast easystart mozilla firefox web browser web browser usage stats from global stats fossamail email client for windows platform, based on mozilla thunderbird developed by moonchild productions, creator of the pale moon web browser flickr uploadr image upload tool see flickr uploadr: open source and powered by xulrunner foxkeh clock clock frizione javascript development, testing and deployment environment uses mozilla rhino geckofx embeddable gecko gjs javascript bindings for gnome globalmojo browser that raises money for your favorite causes gluescript a javascript engine which can be used as a ge...
...er for java uses mozilla rhino nextcms (fr) cms nightingale music player community run effort to continue songbird support for linux olpc web browser browser oneteam jabber client opendocument viewer viewer opengate's tools cd burner, file browser, and hardware diagnostic softwares opengate is the opensource side of the easyneuf project, “a free software computer, easy and preinstalled” open mashups development tool openoffice.org office suite uses nss openswan implementation of ipsec for linux uses nss orca browser web browser gecko-based version of avant browser pale moon web browser optimized browser developed by moonc...
...And 2 more matches
Porting NSPR to Unix Platforms - Archive of obsolete content
however, if you are not familiar with the structure of the nspr source tree and its build system, it may take you extra time.
...the classic nspr source files are in <tt>mozilla/nsprpub/pr/src/threads</tt> and <tt>mozilla/nsprpub/pr/src/io</tt>.
...pthreads nspr has relatively orthogonal source code in the thread management, thread synchronization, and i/o area.
...And 2 more matches
Bindings - Archive of obsolete content
to do this all we need to do is add the necessary data to the rdf datasource and add another <triple> element to the template's statements.
...the ?photo variable is filled in with the known value and then the arc is looked up the datasource, filling in the value for the ?description variable.
...let assume though, that we are only going to add a description to one of the photos in the datasource; the other two photos will not have a description.
...And 2 more matches
Using Multiple Queries to Generate More Results - Archive of obsolete content
recall that when the member resource for a query matches several rules, only the earliest query that matches will have content generated for it.
... if resources don't overlap, we can generate content for two different parts of the rdf data.
... if we add the following data about people to the neighbourhood datasource: <rdf:description rdf:about="http://www.xulplanet.com/rdf/myneighbourhood"> <r:people> <rdf:seq> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/1"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/2"/> </rdf:seq> </r:people> </rdf:description> <rdf:description rdf:about="http://www.xulplanet.com/rdf/person/1" dc:title="nathan"/> <rdf:description rdf:about="http://www.xulplanet.com/rdf/person/2" dc:title="karen"/> we can then use two queries to generate results from different parts of the datasource.
...And 2 more matches
Adding Event Handlers - Archive of obsolete content
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.
...an example of responding to a button being pressed: example 1 : source view <button label="ok" oncommand="alert('button was pressed!');"/> since the command event will bubble, it is also possible to place the event listener on an enclosing element.
... example 2 : source view <vbox oncommand="alert(event.target.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled.
...And 2 more matches
Box Model Details - Archive of obsolete content
example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible.
...example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible.
...layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels.
...And 2 more matches
Focus and Selection - Archive of obsolete content
here is an example: example 1 : source view <button label="button 1" tabindex="2"/> <button label="button 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the focus event the focus event is used to respond when the focus is given to an element.
...example 2 : source view <script> function displayfocus(){ var elem=document.getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function.
...example 3 : source view <window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </scri...
...And 2 more matches
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
example 1 : source view <grid flex="1"> <columns> <column flex="2"/> <column flex="1"/> </columns> <rows> <row> <button label="rabbit"/> <button label="elephant"/> </row> <row> <button label="koala"/> <button label="gorilla"/> </row> </rows> </grid> two rows and two columns have been added to a grid.
...for example: example 2 : source view <grid flex="1"> <columns> <column/> <column flex="1"/> </columns> <rows> <row> <label control="doctitle" value="document title:"/> <textbox id="doctitle" flex="1"/> </row> <row> <label control="docpath" value="path:"/> <hbox flex="1"> <textbox id="docpath" flex="1"/> <button label="browse..."/> </hbox> </row> </...
... example 3 : source view <grid> <rows> <row/> <row/> <row/> </rows> <columns> <column> <label control="first" value="first name:"/> <label control="middle" value="middle name:"/> <label control="last" value="last name:"/> </column> <column> <textbox id="first"/> <textbox id="middle"/> <textbox id="last"/> </column> </columns> </grid> this g...
...And 2 more matches
Manipulating Lists - Archive of obsolete content
here is an example: example 1 : source view <script> function additem(){ document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'.
... getting the selected item these two properties are commonly inspected during a select event, as in the following example: example 2 : source view <listbox id="thelist" onselect="alert(this.selecteditem.label);"> <listitem label="short"/> <listitem label="medium"/> <listitem label="tall"/> </listbox> the select event is fired for a listbox when an item in the list is selected.
... example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="e...
...And 2 more matches
More Button Features - Archive of obsolete content
example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css list-style-image style property 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.
...example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical" dir="reverse"/> the example here shows all four types of alignment of buttons.
...And 2 more matches
XULRunner tips - Archive of obsolete content
d (inspector@mozilla.org) containing one line of text -- the exact path to the root directory of dom inspector (where the install.rdf is) like this one: /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/ now create a javascript file with the following code and include it in the main window of your application: function startdomi() { // load the window datasource so that browser windows opened subsequent to dom // inspector show up in the dom inspector's window list.
... var windowds = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"] .getservice(components.interfaces.nsiwindowdatasource); var tmpnamespace = {}; var sl = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .createinstance(components.interfaces.mozijssubscriptloader); sl.loadsubscript("chrome://inspector/content/hooks.js", tmpnamespace); tmpnamespace.inspectdomdocument(document); } now create a hook in your application window to start dom inspector, like this one: <button label="start inpector" oncommand="startdomi()"/> start your application and dom inspector will be installed.
...(i keep them in source control to be sure i can maintain compatibility) component viewer need custom build, first of all.
...And 2 more matches
Tamarin Tracing Build Documentation - Archive of obsolete content
tamarin source versions the following instructions are for obtaining and building the tamarin tracing source code.
...dbot windows mobile (pocket pc 5.0) armv4t supported, acceptance and performance tests automated in buildbot raw image (no os) armv5 supported, acceptance and performance tests not done linux (nokia n810) armv5 supported, acceptance and performance tests not done current build status the current tamarin tracing build status can be found at tamarin tracing build status getting the tamarin source the tamarin tracing source resides in mercurial at tamarin tracing.
... $ make cppflags=-davmplus_verbose windows mobile to build for arm: $ python ../configure.py --target=arm-windows --enable-shell; make to build for thumb: $ python ../configure.py --target=thumb-windows --enable-shell; make platform-specific builds project files for specific platforms/ides (microsoft visual studio, xcode, etc) are included in the source tree under tamarin-tracing/platform, but are not formally supported.
...And 2 more matches
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
with processes, organizations can make release schedules, implement marketing plans, analyze resource allocations, and make adjustments when needed.
...bottom line, organizations have them because they save money, time, and resources.
...by following the guidelines that have been put into place, organizations like aol can enhance user experience, interoperability, code reuse, shared resources, and goodwill while reducing costs.
...And 2 more matches
Index - Game development
18 building up a basic demo with playcanvas 3d, animation, beginner, canvas, games, playcanvas, tutorial, webgl, camera, lighting, rendering of course, it depends on your approach — designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files.
...you can play the full version of the hungry fridge game directly in your browser, install it from the firefox marketplace or check the source code of the demo along with all the other resources on the gamepad api content kit.
...this article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples.
...And 2 more matches
Initialize the framework - Game development
after completing this tutorial you can find the source code for this section at gamedev-phaser-content-kit/demos/lesson01.html.
...yle> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(480, 320, phaser.canvas, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function update() {} </script> </body> </html> downloading the phaser code next, we need to go through the process of downloading the phaser source code and applying it to our html document.
... choose an option that suits you best — i would recommend the min.js option as it keeps the source code smaller, and you are unlikely need to go through the source code anyway.
...And 2 more matches
Visual JS GE - Game development
visual-js gameengine is a small but comprehensive canvas/websocket-based game engine with gui source editor only for windows.
... resource js objects used for adding images for animation purposes.
... after this has finished processing, restart the web page by entering the following in the console: resource.test_res.
...And 2 more matches
CORS - MDN Web Docs Glossary: Definitions of Web-related terms
cors (cross-origin resource sharing) is a system, consisting of transmitting http headers, that determines whether browsers block frontend javascript code from accessing responses for cross-origin requests.
... the same-origin security policy forbids cross-origin access to resources.
... but cors gives web servers the ability to say they want to opt into allowing cross-origin access to their resources.
...And 2 more matches
What text editors are available? - Learn web development
extensible atom mit/bsd free windows, mac, linux forum online manual yes bluefish gpl 3 free windows, mac, linux mailing list, wiki online manual yes brackets mit/bsd free windows, mac, linux forum, irc github wiki yes coda closed source $99 mac twitter, forum, e-mail ebook yes codelobster closed source free windows, mac, linux forum, e-mail no end user doc yes emacs gpl 3 free windows, mac, linux faq, mailing list, news group online manual yes espresso closed source $75 mac faq, e-mail no end user doc, but plug-in doc yes ...
... gedit gpl free windows, mac, linux mailing list, irc online manual yes kate lgpl, gpl free windows, mac, linux mailing list, irc online manual yes komodo edit mpl free windows, mac, linux forum online manual yes notepad++ gpl free windows forum wiki yes pspad closed source free windows faq, forum online help yes sublime text closed source $70 windows, mac, linux forum official, unofficial yes textmate closed source $50 mac twitter, irc, mailing list, e-mail online manual, wiki yes textwrangler closed source free mac faq, forum pdf manual no vim specific open license free wi...
...ndows, mac, linux mailing list online manual yes visual studio code open source under mit licence/ specific licence for product free windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or installing a text editor of your choice.
...And 2 more matches
Creating hyperlinks - Learn web development
hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address.
... a url, or uniform resource locator is simply a string of text that defines where something is located on the web.
... linking to non-html resources — leave clear signposts when linking to a resource that will be downloaded (like a pdf or word document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window, or loads a flash movie), you should add clear wording to reduce any confusion.
...And 2 more matches
Debugging HTML - Learn web development
these are often harder to fix than syntax errors, as there isn't an error message to direct you to the source of the error.
...you will see something like this: this immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown): <h1>html debugging examples</h1> <p>what causes errors in html?
...<strong>strong <em>strong emphasised?</strong> what is this?</em> <li>unclosed attributes: another common source of html problems.
...And 2 more matches
Making asynchronous programming easier with async and await - Learn web development
status: ${response.status}`); } else { return await response.blob(); } } myfetch().then((blob) => { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }).catch(e => console.log(e)); you can try typing in the example yourself, or running our live example (see also the source code).
... you can find both of these examples on github: simple-fetch-async-await-try-catch.html (see source code) simple-fetch-async-await-promise-catch.html (see source code) awaiting a promise.all() async/await is built on top of promises, so it's compatible with all the features offered by promises.
... converting this to async/await (see live demo and source code), this now looks like so: async function fetchanddecode(url, type) { let response = await fetch(url); let content; if (!response.ok) { throw new error(`http error!
...And 2 more matches
Client-side storage - Learn web development
note: in the line <script src="index.js" defer></script> of the source for our finished version, the defer attribute specifies that the contents of the <script> element will not execute until the page has finished loading.
... if you are having trouble with it, feel free to check it against our live example (see the source code also).
...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.
...And 2 more matches
Drawing graphics - Learn web development
this article provides an introduction to canvas, and further resources to allow you to learn more.
... let's start by getting an image source to embed in our canvas.
... the browser works out complex details such as making the animation run at a consistent speed, and not wasting resources animating things that can't be seen.
...And 2 more matches
Multimedia: Images - Learn web development
this requires the source to be available as in a vector graphic format.
...doesn't support progressive display and the image decoding is not hardware accellerated and therefore resource intensive on the browser's main thread.
...this can be done via the <picture> element with the help of a <source> element equipped with a type attribute.
...And 2 more matches
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.
... the body of a successful response to a request would contain the requested resource (e.g.
... static sites the diagram below shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested).
...And 2 more matches
Introduction to client-side frameworks - Learn web development
start learning ember angular angular is an open-source web application framework led by the angular team at google and by a community of individuals and corporations.
... frameworks are not the source of our problems.
...there may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.
...And 2 more matches
Handling common HTML and CSS problems - Learn web development
for example: <video id="video" controls preload="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"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p> </video> this example includes a simple link allowing you to download...
... } body { width: 400px; margin: 0 auto; } <form> <div> <label for="date">enter a date:</label> <input id="date" type="date"> </div> <div> <label for="time">enter a time:</label> <input id="time" type="time"> </div> </form> note: you can also see this running live as forms-test.html on github (see the source code also).
... let's look at an example — a simple box styled with css, which has some styling provided by various css3 features: note: you can also see this example running live on github as button-with-fallback.html (also see the source code).
...And 2 more matches
Software accessibility: Where are we today?
because most popular desktop and productivity applications are not open source, this forced disabled people to rely on the companies which produce this software to make it accessible.
...enter open source software microsoft was on the right track with microsoft active accessibility, but because the source code to most popular desktop applications which are used in large corporations is not publicly available, they were never made fully accessible.
... in open source, however, making the necessary modifications to make them accessible is very possible.
...And 2 more matches
Index
680 resources for publishers add-ons, extensions, distribution, publication now your add-on is published on amo, check out the following resources: 681 retiring your extension extensions, webextension, end-of-life, publication there may be occasions where you want to retire one of your extensions.
... 683 source code submission add-ons, extensions, review policy, distribution to complete the review process at addons.mozilla.org (amo), reviewers must be able to read the code in your extension.
...in this case, when you upload your extension to amo, you will need to provide your source code and instructions for building that source code, where build processes render your extension’s code hard to read.
...And 2 more matches
Makefile - variables
variable name description add_to_def_file cpp_sources cpp_unit_tests a list of source files to compile as unit tests.
... csrcs a list of c source files to compile.
... defines additional preprocessor defines for c++ expand_mozlibname exports a list of exported header files and sources to install for external use.
...And 2 more matches
CustomizableUI.jsm
if you want to use it from a jsm or another context without a window reference, you need to import it yourself: components.utils.import("resource:///modules/customizableui.jsm"); introduction the module is intended for two primary purposes: allow adding, moving and removing customizable widgets.
... source_builtin string "builtin", a constant indicating the widget is built-in.
... source_external string "external", a constant indicating the widget is externally provided (e.g., by add-ons or other items not part of the builtin widget set).
...And 2 more matches
Download
whether partial data can actually be retained depends on the saver and the download source, and may not be known before the download is started.
...this depends on the saver and the download source.
... source read only downloadsource source of this download.
...And 2 more matches
Localization and Plurals
components.utils.import("resource://gre/modules/pluralform.jsm"); methods: get these methods make use of the browser's current locale specified by chrome://global/locale/intl.properties's pluralrule value.
...ber * * @param anum * the number to decide which plural form to use * @param awords * a semi-colon (;) separated string of words to pick the plural form * @return the appropriate plural form of the word */ string pluralform get(int anum, string awords) here is an example of using this method: // load pluralform and for this example, assume english components.utils.import("resource://gre/modules/pluralform.jsm"); // pluralform.get expects a semi-colon separated list of words let downloads = "download;downloads"; // pretend this number came from somewhere else let num = 10; // display the correct plural form for 10 downloads: "you have 10 downloads.") print("you have " + num + " " + pluralform.get(num, downloads) + "."); // try again with a different value: "you have 1 do...
...the following would be better: components.utils.import("resource://gre/modules/pluralform.jsm"); let downloads = "you have one download.;you have #1 downloads."; let num = 10; // for english, this would display "you have 10 downloads." print(pluralform.get(num, downloads).replace("#1", num); notice in the above example that the code can be written to support placeholders or not use placeholders in some forms of the string.
...And 2 more matches
Localizing with Pontoon
resource selector (homepage) switches between project resources to localize, like subpages or localization files.
... hidden if no resources available for project.
... go opens project-resource-locale selection.
...And 2 more matches
Mozilla Development Tools
naturally, source code for all of these tools is also available.
... mozilla source code (mercurial and cvs) "trunk" development for gecko 1.9.1/firefox 3.5 and beyond uses the mercurial source code version control system.
...if you are doing active development, checking out source code from one of these is preferable to downloading an archived snapshot, as you get up-to-the-minute changes.
...And 2 more matches
NSPR Contributor Guide
abstract: nspr accepts contributions in the form of bugfixes, new features, libraries, platform ports, documentation, test cases and other items from many sources.
...use a coding style consistent with the source file you are changing.
...source file descriptions.
...And 2 more matches
An overview of NSS Internals
it's free and open source software, and many other software projects have decided to use it.
...once the application is done with a handle, it should be released, allowing nss to free the associated resources.
...when done, you call a finalization function that will flush out any pending data and free the resources.
...And 2 more matches
Utilities for nss samples
util.h /* this source code form is subject to the terms of the mozilla public * license, v.
...*/ typedef struct { enum { pw_none = 0, /* no password */ pw_fromfile = 1, /* password stored in a file */ pw_plaintext = 2 /* plain-text password passed in buffer */ /* pw_external = 3 */ } source; char *data; /* depending on source this can be the actual * password or the file to read it from */ } secupwdata; /* * printasascii */ extern void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len); /* * printashex */ extern void printashex(prfiledesc* out, const unsigned char *data, unsigned int len); /* * getdigit */ extern int getdigit(char c...
... * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * seedfromnoisefile */ extern secstatus seedfromnoisefile(const char *noisefilename); /* * filesize */ extern long filesize(const char* filename); /* * readderfromfile */ extern secstatus readderfromfile(secitem *der, const char *infilename, prbool ascii); #endif /* _util_h */ util.c /* this source code form is subject to the terms of the mozilla public * license, v.
...And 2 more matches
NSS tools : certutil
--source-dir certdir identify the certificate database directory to upgrade.
... --source-prefix certdir give the prefix of the certificate and key databases to upgrade.
... certutil --upgrade-merge -d [sql:]directory [-p dbprefix] --source-dir d irectory --source-prefix dbprefix --upgrade-id id --upgrade-token-name n ame [-@ password-file] for example: $ certutil --upgrade-merge -d sql:/home/my/sharednssdb --source-dir /opt /my-app/alias/ --source-prefix serverapp- --upgrade-id 1 --upgrade-token -name internal the --merge command only requires information about the location of the original database; since it do...
...And 2 more matches
Introduction to the JavaScript shell
the javascript shell (js) is a command-line program included in the spidermonkey source distribution.
... the name must be one of the parameter keys (such as 'maxbytes', 'maxmallocbytes' or 'gcnumber') defined by for_each_gc_param in https://searchfox.org/mozilla-central/source/js/src/builtin/testingfunctions.cpp#464.
... for example, if you enter the javascript function below: function test() { var i = 3; print(i+2); } then run the command dis(test);, you get this output: main: 00000: uint16 3 00003: setvar 0 00006: pop 00007: name "print" 00010: pushobj 00011: getvar 0 00014: uint16 2 00017: add 00018: call 1 00021: pop 00022: stop source notes: 0: 0 [ 0] newline 1: 3 [ 3] decl offset 0 2: 7 [ 4] newline 3: 18 [ 11] xdelta 4: 18 [ 0] pcbase offset 11 dissrc([function]) disassembles the javascript bytecode for the entire program, or for the specified function, showing the source lines.
...And 2 more matches
JSErrorReport
syntax jserrorreport(); properties name type description filename const char * indicates the source file or url that produced the error condition.
... lineno unsigned line number in the source that caused the error.
... column unsigned zero-based column index in line in the source that caused the error.
...And 2 more matches
JS_DecompileFunctionBody
generate the source code representing the body of a function, minus the function keyword, name, parameters, and braces.
... indent unsigned if it's not js_dont_pretty_print, js_decompilefunction returns pretty printed source code of the function.
... description js_decompilefunctionbody generates the source code of a function's body, minus the function keyword, name, parameters, and braces, from a function's compiled form, fun.
...And 2 more matches
SpiderMonkey 1.8.7
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a4574365938222adca0a6bd33329cb32).
... spidermonkey 1.8.7 is not binary-compatible with previous releases, nor is it source-code compatible.
... jsapi_ldflags := $(filter -l%,$(jsapi_ldflags)) $(filter -l%,$(jsapi_ldflags))\ $(filter -%_namespace,$(jsapi_ldflags))\ $(filter -wl%,$(jsapi_ldflags)) jsapi_ldflags := $(filter-out $(mozjs_install_name_opt),$(jsapi_ldflags)) endif jsapi_ldflags := $(filter-out %libffi.a,$(jsapi_ldflags)) ldflags += $(jsapi_ldflags) future direction the spidermonkey 1.8.5 source release includes an experimental library versioning scheme.
...And 2 more matches
Building the WebLock UI
the overlay section, where we discuss how to import scripts, images, and other resources from mozilla into your own ui, is by far the more complicated of the two.
... other resources this chapter describes the remaining files that must be added to and packaged up with the weblock component to provide user interface for web locking.
... other front end resources in some ui packages, localization resources are also defined.
...And 2 more matches
Using XPCOM Components
in fact, a search of the mozilla source code reveals that this cookiemanager component is called only from javascript.
... mozilla also has some tools that can find and display information about the interfaces available in gecko such as the xpcom component viewer, described below, and mxr, which is a web-based source code viewing tool.
...in the source code you view in mxr, interfaces that have been frozen are marked at the top with @status frozen.
...And 2 more matches
XPCOM Stream Guide
MozillaTechXPCOMGuideStreams
the spout is a source of water.
... primitive input streams type native class contract id interface how to bind to a data source generic nsstorageinputstream n/a nsiinputstream, nsiseekablestream storagestream.newinputstream(); string (8-bit characters) nsstringstream @mozilla.org/io/string-input-stream;1 nsistringinputstream stream.setdata(data, length); file nsfileinputstream @mozilla.org/network/file-input-stream;1 nsifileinputstream stream.init...
... netutil.jsm provides apis for copying an input stream to an output stream (the asynccopy() method), getting an input stream from another source (the asyncfetch() method), and reading an input stream into a string (the readinputstreamtostring() method).
...And 2 more matches
nsIConsoleService
in this example nsiscripterror, which implements nsiconsolemessage, is used to include information about the source file and line number of the error.
... function mylogtoconsole(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); scripterror.init(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory); consoleservice.logmessage(scripterror); } amessage — the string to be logged.
... asourcename — the url for a file associated with an error.
...And 2 more matches
nsIProtocolHandler
note: starting with firefox 3, one of uri_loadable_by_anyone, uri_dangerous_to_load, uri_is_ui_resource, or uri_is_local_file must be set on every protocol handler.
... uri_is_ui_resource 1<<8 the uris for this protocol refer to resources that are part of the application's user interface.
... there are cases in which such resources may be made accessible to untrusted content such as web pages, so this is less restrictive than uri_dangerous_to_load but more restrictive than uri_loadable_by_anyone.
...And 2 more matches
nsIScriptError2
method overview void initwithwindowid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid); attributes attribute type description innerwindowid unsigned long long the inner window id with which the error is associated.
... methods initwithwindowid() void init( in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid ); parameters message the text of the message to add to the log.
... sourcename the url of the file in which the error occurred.
...And 2 more matches
nsIXSLTProcessor
thod overview void clearparameters(); nsivariant getparameter(in domstring namespaceuri, in domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidomdocument transformtodocument(in nsidomnode source); nsidomdocumentfragment transformtofragment(in nsidomnode source, in nsidomdocument output); methods clearparameters() removes all set parameters from this nsixsltprocessor.
... transformtodocument() transforms the node source applying the stylesheet imported by importstylesheet().
... nsidomdocument transformtodocument( in nsidomnode source ); parameters source the node to be transformed.
...And 2 more matches
Xray vision
gecko runs javascript from a variety of different sources and at a variety of different privilege levels.
... /* the sandbox script: * redefines object.prototype.tosource() * creates a person() constructor that: * defines a value property "firstname" using assignment * defines a value property which shadows "constructor" * defines a value property "address" which is a simple object * defines a function fullname() * using defineproperty, defines a value property on person "lastname" * using defineproperty, defines an accessor property on person "middlename"...
..., which has some unexpected accessor behavior */ var sandboxscript = 'object.prototype.tosource = function() {'+ ' return "not what you expected?";' + '};' + 'function person() {' + ' this.constructor = "not a constructor";' + ' this.firstname = "joe";' + ' this.address = {"street" : "main street"};' + ' this.fullname = function() {' + ' return this.firstname + " " + this.lastname;'+ ' };' + '};' + 'var me = new person();' + 'object.defineproperty(me, "lastname", {' + ' enumerable: true,' + ' configurable: tr...
...And 2 more matches
Index
see nsiactivitymanager.idl and nsiactivity.idl files for source documentation.
... 31 gloda indexing this page provides a big-picture summary of what the indexer does; please see the source for nitty-gritty details or if this page seems to be wrong.
... 34 mail and rdf mozilla mail exposes many of it's data structures to rdf through a few datasources.
...And 2 more matches
Mail client architecture overview
the mail reader gecko (xul and html rendering) rdf (dynamic widgets) js (menus, events) libmime mail datasources mail javascript folder/message management msgdb imap/nntp/pop3 necko (networking) sections in grey refer to modules outside of mail/news the base module the base module provides a generic interface to a set of protocol-independant messaging services.
... datasources - datasources are the glue code that reflect mail data such as folders and messages into rdf.
... rdf will use the datasource to create user interfaces based on this data.
...And 2 more matches
Using COM from js-ctypes
#include <sapi.h> struct myispvoicevtbl; struct myispvoice { struct myispvoicevtbl* lpvtbl; }; struct myispvoicevtbl { /* start inherit from iunknown */ void* queryinterface; void* addref; ulong (__stdcall *release)(struct myispvoice*); /* end inherit from iunknown */ /* start inherit from ispnotifysource */ void* setnotifysink; void* setnotifywindowmessage; void* setnotifycallbackfunction; void* setnotifycallbackinterface; void* setnotifywin32event; void* waitfornotifyevent; void* getnotifyeventhandle; /* end inherit from ispnotifysource */ /* start inherit from ispeventsource */ void* setinterest; void* getevents; void* getinfo; /* end inherit ...
...from ispeventsource */ /* start ispvoice */ void* setoutput; void* getoutputobjecttoken; void* getoutputstream; void* pause; void* resume; void* setvoice; void* getvoice; hresult (__stdcall *speak)(struct myispvoice*, lpcwstr pwcs, dword dwflags, ulong* pulstreamnumber); void* speakstream; void* getstatus; void* skip; void* setpriority; void* getpriority; void* setalertboundary; void* getalertboundary; void* setrate; void* getrate; void* setvolume; void* getvolume; void* waituntildone; void* setsyncspeaktimeout; void* getsyncspeaktimeout; void* speakcompleteevent; void* isuisupported; void* displayui; /* end ispvoice */ }; int main(void) { if (succeeded(...
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); // some groundwork let is64bit; if (ctypes.voidptr_t.size == 4 /* 32-bit */) { is64bit = false; } else if (ctypes.voidptr_t.size == 8 /* 64-bit */) { is64bit = true; } let winabi = is64bit ?
...And 2 more matches
Using js-ctypes
this is as simple as including the following line of code in the desired javascript scope: components.utils.import("resource://gre/modules/ctypes.jsm") loading a native library once you've imported the code module, you can call the ctypes.open() method to load each native library you wish to use.
... components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("c:\\windows\\system32\\user32.dll"); /* declare the signature of the function we are going to call */ var msgbox = lib.declare("messageboxw", ctypes.winapi_abi, ctypes.int32_t, ctypes.int32_t, ctypes.jschar.ptr, ctypes.js...
... note: this example will not work on 64bit os x, see below for core foundation for 64bit os x /* build a str255 ("pascal style") string from the passed-in string */ function makestr(str) { return string.fromcharcode(str.length) + str; } components.utils.import("resource://gre/modules/ctypes.jsm"); var carbon = ctypes.open("/system/library/frameworks/carbon.framework/carbon"); stdalert = carbon.declare("standardalert", /* function name */ ctypes.default_abi, /* abi type */ ctypes.int16_t, /* return type */ ctypes.int16_t, /* alert type */ ...
...And 2 more matches
Initialization and Destruction - Plugins
plug-ins consume no resources, other than disk space, if not referenced.
...use this function to allocate the memory and resources shared by all instances of your plug-in.
... nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which releases the memory or resources allocated by np_initialize.
...And 2 more matches
URLs - Plugins
uniform resource locator (url) protocols provide a means for locating and accessing resources that are available on the internet and on intranets.
... file (host-specific filenames) locates files on a specific host computer rather than an internet resource.
...obsolete since gecko 2.0 http (hypertext transfer protocol) locates resources on the internet.
...And 2 more matches
Using the Debugger map scopes feature - Firefox Developer Tools
this feature is useful when debugging source-mapped code.
... it enables you to see the variables from the original source.
... select the "bundle.js" file in the sources panel on the left and then set a breakpoint at line 102 in the increment function.
...And 2 more matches
Settings - Firefox Developer Tools
debugger enable source maps enable source map support in the debugger.
... style editor show original sources when a css preprocessor supporting source maps is used, this enables the style editor to display the original, preprocessor, sources rather than the generated css.
... learn more about style editor support for css source maps.
...And 2 more matches
Console messages - Firefox Developer Tools
if the resource is an image, the image will be opened in a new tab.
... if the resource is a stylesheet, you will see the css rules, etc.
... js javascript errors contain a "learn more" link that takes you to the javascript error reference containing additional advice for fixing issues: source maps the web console understands source maps.
...And 2 more matches
AudioContext - Web APIs
it's recommended to create one audiocontext and reuse it instead of initializing a new one each time, and it's ok to use a single audiocontext for several different audio source and pipeline concurrently.
... audiocontext.close() closes the audio context, releasing any system audio resources that it uses.
... audiocontext.createmediaelementsource() creates a mediaelementaudiosourcenode associated with an htmlmediaelement.
...And 2 more matches
BaseAudioContext.createStereoPanner() - Web APIs
the createstereopanner() method of the baseaudiocontext interface creates a stereopannernode, which can be used to apply stereo panning to an audio source.
... example in our stereopannernode example (see source code) html we have a simple <audio> element along with a slider <input> to increase and decrease pan value.
... in the javascript we create a mediaelementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
...And 2 more matches
BaseAudioContext - Web APIs
baseaudiocontext.createbiquadfilter() creates a biquadfilternode, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc baseaudiocontext.createbuffer() creates a new, empty audiobuffer object, which can then be populated by data and played via an audiobuffersourcenode.
... baseaudiocontext.createbuffersource() creates an audiobuffersourcenode, which can be used to play and manipulate audio data contained within an audiobuffer object.
... baseaudiocontext.createconstantsource() creates a constantsourcenode object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
...And 2 more matches
Cache - Web APIs
WebAPICache
if there isn't a matching font, the code fetches the font from the network and uses cache.put() to cache the fetched resource.
...note that in this example, only font resources are cached.
... console.log(' found response in cache:', response); return response; } // otherwise, if there is no entry in the cache for event.request, response will be // undefined, and we need to fetch() the resource.
...And 2 more matches
DataTransfer.dropEffect - Web APIs
in a dragend event, for instance, if the desired dropeffect is "move", then the data being dragged should be removed from the source.
...the possible values are: copy a copy of the source item is made at the new location.
... link a link is established to the source at the new location.
...And 2 more matches
MediaDevices.getDisplayMedia() - Web APIs
note: browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the which audio source or sourcoes are supported.
... notfounderror no sources of screen video are available for capture.
... notreadableerror the user selected a screen, window, tab, or other source of screen data, but a hardware or operating system level error or lockout occurred, preventing the sharing of the selected source.
...And 2 more matches
MediaTrackSettings.deviceId - Web APIs
the mediatracksettings dictionary's deviceid property is a domstring which uniquely identifies the source for the corresponding mediastreamtrack for the origin corresponding to the browsing session.
... syntax var deviceid = mediatracksettings.deviceid; value a domstring whose value is an origin-unique identifier for the track's source.
... this id is valid across multiple browsing sessions for the same origin and is guaranteed to be different for all other origins, so you can safely use it to request the same source be used for multiple sessions, for example.
...And 2 more matches
SecurityPolicyViolationEvent - Web APIs
properties securitypolicyviolationevent.blockeduriread only a usvstring representing the uri of the resource that was blocked because it violates a policy.
... securitypolicyviolationevent.referrerread only a usvstring representing the referrer of the resources whose policy was violated.
... securitypolicyviolationevent.sampleread only a domstring representing a sample of the resource that caused the violation, usually the first 40 characters.
...And 2 more matches
Using readable streams - Web APIs
you can find the full source code there, as well as links to the examples.
... consuming a fetch as a stream the fetch api allows you to fetch resources across the network, providing a modern alternative to xhr.
...the first object is required, and creates a model in javascript of the underlying source the data is being read from.
...And 2 more matches
URL.createObjectURL() - Web APIs
syntax const objecturl = url.createobjecturl(object) parameters object a file, blob, or mediasource object to create an object url for.
... return value a domstring containing an object url that can be used to reference the contents of the specified source object.
... using object urls for media streams in older versions of the media source specification, attaching a stream to a <video> element required creating an object url for the mediastream.
...And 2 more matches
WebGLRenderingContext.makeXRCompatible() - Web APIs
this is why the webglcontextlost and webglcontextrestored events are used: the first gives you the opportunity to discard anything you won't need anymore, while the second gives you the opportunity to load resources and prepare to render the scene in its new context.
... javascript the code that handles starting up graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected, reload the resources for the current scene.
... */ outputcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(currentscene); }); async function onstartedxrsession(xrsession) { try { await gl.makexrcompatible(); } catch(err) { switch(err) { case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); ...
...And 2 more matches
WebGLRenderingContext - Web APIs
the webgl tutorial has more information, examples, and resources on how to get started with webgl.
... webglrenderingcontext.blendcolor() sets the source and destination blending factors.
... webglrenderingcontext.getshadersource() returns the source code of a webglshader as a string.
...And 2 more matches
WebRTC Statistics API - Web APIs
rtccodecstats rtcstats csrc statistics for a single contributing source (csrc) that contributed to one of the connection's inbound rtp streams.
... rtcrtpcontributingsourcestats rtcstats data-channel statistics related to one rtcdatachannel on the connection.
... rtcicecandidatestats rtcstats media-source statistics about the media produced by the mediastreamtrack attached to an rtp sender.
...And 2 more matches
Background audio processing using AudioWorklet - Web APIs
create module that defines a audio worklet processor class, based on audioworkletprocessor which takes audio from one or more incoming sources, performs its operation on the data, and outputs the resulting audio data.
... process(inputlist, outputlist, parameters) { const sourcelimit = math.min(inputlist.length, outputlist.length); for (let inputnum = 0; inputnum < sourcelimit; inputnum++) { let input = inputlist[inputnum]; let output = outputlist[inputnum]; let channelcount = math.min(input.length, output.length); for (let channelnum = 0; channelnum < channelcount; channelnum++) { let samplecount = input[channelnum].length; for (let i = ...
...0; i < samplecount; i++) { let sample = input[channelnum][i]; /* manipulate the sample */ output[channelnum][i] = sample; } } }; return true; } note that when determining the number of sources to process and send through to the corresponding outputs, we use math.min() to ensure that we only process as many channels as we have room for in the output list.
...And 2 more matches
Web Locks API - Web APIs
while held, no other script executing in the same origin can acquire the same lock, which allows a web app running in multiple tabs or workers to coordinate work and the use of resources.
... web locks concepts and usage a lock is an abstract concept representing some potentially shared resource, identified by a name chosen by the web app.
... navigator.locks.request('my_resource', async lock => { // the lock has been acquired.
...And 2 more matches
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
the src css descriptor of the @font-face rule specifies the resource containing font data.
... 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.
...if a user agent doesn't support the specified formats, it skips downloading the font resource.
...And 2 more matches
border-image-slice - CSS: Cascading Style Sheets
the border-image-slice css property divides the image specified by border-image-source into regions.
... the source for this interactive example is stored in a github repository.
...for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
...And 2 more matches
image() - CSS: Cascading Style Sheets
image-src optional zero or more <url>s or <string>s specifying the image sources, with optional image fragment identifiers.
... image fragments one key difference between url() and image() is the ability to add a media fragment identifier — a starting point along the x and y axis, along with a width and height — onto the image source to display only a section of the source image.
...the #xywh=#,#,#,# media fragment syntax is 'backwards compatible' in that a media fragment will be ignored if not understood, and won't break the source call when used with url().
...And 2 more matches
mask-border-repeat - CSS: Cascading Style Sheets
the mask-border-repeat css property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.
... values stretch the source image's edge regions are stretched to fill the gap between each border.
... repeat the source image's edge regions are tiled (repeated) to fill the gap between each border.
...And 2 more matches
mask-composite - CSS: Cascading Style Sheets
values for the composition the current mask layer is referred to as source, while all layers below it are referred to as destination.
... add the source is placed over the destination.
... subtract the source is placed, where it falls outside of the destination.
...And 2 more matches
mask - CSS: Cascading Style Sheets
WebCSSmask
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 repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <mask-reference> sets the mask image source.
... formal definition initial valueas each of the properties of the shorthand:mask-image: nonemask-mode: match-sourcemask-repeat: no-repeatmask-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: 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 f...
...| <repeat-style> | <geometry-box> | [ <geometry-box> | no-clip ] | <compositing-operator> | <masking-mode>where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...And 2 more matches
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
it controls how your html source code is turned into web pages and, as such, changes to it are rare.
... calling document.write() during parsing prior to html5, gecko and webkit allowed calls to document.write() during parsing to insert content into the source stream.
... this behavior was inherently racy, as the content was inserted into a timing-dependent point in the source stream.
...And 2 more matches
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
WebHTMLElementembed
this content is provided by an external application or other source of interactive content such as a browser plug-in.
... the source for this interactive example is stored in a github repository.
... height the displayed height of the resource, in css pixels.
...And 2 more matches
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
integrity this attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation.
... see subresource integrity.
...it is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
...And 2 more matches
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
WebHTMLElementtrack
the source for this interactive example is stored in a github repository.
...it may indicate the cue's source (e.g.
... chapters chapter titles are intended to be used when the user is navigating the media resource.
...And 2 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>.
... examples the example below shows the source for a set of elements marked up with itemprop attributes, followed by a table showing the resulting structured data.
...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 2 more matches
HTTP authentication - HTTP
as both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed.
... access forbidden if a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the 403 forbidden status code.
...from firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 1423146), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.
...And 2 more matches
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).
... http/1.1 clarified ambiguities and introduced numerous improvements: a connection can be reused, saving the time to reopen it numerous times to display the resources embedded into the single original document retrieved.
...these are defined in specifications like cross-origin resource sharing (cors) or the content security policy (csp).
...And 2 more matches
Cache-Control - HTTP
expiration max-age=<seconds> the maximum amount of time a resource is considered fresh.
... revalidation and reloading must-revalidate indicates that once a resource becomes stale, caches must not use their stale copy without successful validation on the origin server.
...the resource, if unexpired, is unchanged on the server and therefore the client should not send a conditional revalidation for it (e.g.
...And 2 more matches
Cross-Origin-Embedder-Policy - HTTP
the http cross-origin-embedder-policy (coep) response header prevents a document from loading any cross-origin resources that don't explicitly grant the document permission (using corp or cors).
...allows the document to fetch cross-origin resources without giving explicit permission through the cors protocol or the cross-origin-resource-policy header.
... require-corp a document can only load resources from the same origin, or resources explicitly marked as loadable from another origin.
...And 2 more matches
If-None-Match - HTTP
for get and head methods, the server will send back the requested resource, with a 200 status, only if it doesn't have an etag matching the given ones.
... for other methods, the request will be processed only if the eventually existing resource's etag doesn't match any of the values listed.
... header type request header forbidden header name no syntax if-none-match: "<etag_value>" if-none-match: "<etag_value>", "<etag_value>", … if-none-match: * directives <etag_value> entity tags uniquely representing the requested resources.
...And 2 more matches
HTTP range requests - HTTP
single part ranges we can request a single range from a resource.
...the content-range response header indicates where in the full resource this partial message belongs.
...rt/byteranges; boundary=3d6b6a416f9b5 content-length: 282 --3d6b6a416f9b5 content-type: text/html content-range: bytes 0-50/1270 <!doctype html> <html> <head> <title>example do --3d6b6a416f9b5 content-type: text/html content-range: bytes 100-150/1270 eta http-equiv="content-type" content="text/html; c --3d6b6a416f9b5-- conditional range requests when resuming to request more parts of a resource, you need to guarantee that the stored resource has not been modified since the last fragment has been received.
...And 2 more matches
HTTP
WebHTTP
cross-origin resource sharing (cors) cross-site http requests are http requests for resources from a different domain than the domain of the resource making the request.
...web pages today very commonly load cross-site resources, including css stylesheets, images, scripts, and other resources.
... http headers http message headers are used to describe a resource, or the behavior of the server or the client.
...And 2 more matches
Functions - JavaScript
uneval() the uneval() method creates a string representation of the source code of an object.
... decodeuri() the decodeuri() function decodes a uniform resource identifier (uri) previously created by encodeuri or by a similar routine.
... decodeuricomponent() the decodeuricomponent() method decodes a uniform resource identifier (uri) component previously created by encodeuricomponent or by a similar routine.
...And 2 more matches
TypedArray.prototype.set() - JavaScript
the source for this interactive example is stored in a github repository.
...all values from the source array are copied into the target array, unless the length of the source array plus the offset exceeds the length of the target array, in which case an exception is thrown.
... typedarray if the source array is a typed array, the two arrays may share the same underlying arraybuffer; the javascript engine will intelligently copy the source range of the buffer to the destination range.
...And 2 more matches
JavaScript
asynchronous javascript discusses asynchronous javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
... tools & resources helpful tools for writing and debugging your javascript code.
... learn javascript an excellent resource for aspiring web developers — learn javascript in an interactive environment, with short lessons and interactive tests, guided by automated assessment.
...And 2 more matches
Authoring MathML - MathML
pros: you get static web pages: the latex source don't need to be parsed at each page load, the mathml code is exposed to web crawlers and you can put them easily on any web server.
...you can use the same .tex source for both latex and latexml.
...this command will generate an xhtml+mathml document foo.xml from a foo.tex latex source: mk4ht mzlatex foo.tex # linux/mac platforms mzlatex foo.tex # windows platform note that tex4ebook relies on tex4ht to generate epub documents.
...And 2 more matches
Media container formats (file types) - Web media technologies
it is derived from the resource interchange file format (riff), and as such is similar to other formats such as apple's aiff.
... maximizing compatibility with multiple containers to optimize compatibility, it's worth considering providing more than one version of media files, using the <source> element to specify each source within the <audio> or <video> element.
...then add child <source> elements within the <video> element, one for each version of the video you offer.
...And 2 more matches
Populating the page: how browsers work - Web Performance
in our example above, the request is definitely less than 14kb, but the linked resources aren't requested until the browser encounters the links during parsing, described below.
... when the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing.
...as this happens, the preload scanner will parse through the content available and request high priority resources like css, javascript, and web fonts.
...And 2 more matches
Understanding latency - Web Performance
latency is the time it takes for a packet of data to travel from source to a destination.
... on a connection with low latency, requested resources will appear almost immediately.
... on a connection with high latency, there will be a discernible delay between the time that a request is sent, and the resources are returned.
...And 2 more matches
Progressive loading - Progressive web apps (PWAs)
in this article we will go even further and improve the performance of the app by progressively loading its resources.
...this is all about deferring loading of as many resources as possible (html, css, javascript), and only loading those immediately that are really needed for the very first experience.
... it is faster to load all that information as one file rather than many small ones, but if the user doesn't need everything at the very beginning, we could load only what's crucial and then manage other resources when needed.
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
if you wish, you can point to multiple video files via <source> attributes, each with their own source and mime type: <video controls> <source src="videos/720/crystal720.mp4" type="video/mp4"> <source src="videos/720/crystal720.webm" type="video/webm"> </video> but you can go one step further.
... you can include media attributes on the <source> element containing media queries — the video loaded in the browser will depend on both the format the browser supports, and the results of the media tests.
... so for example: <video controls> <source src="videos/320/crystal320.mp4" type="video/mp4" media="all and (max-width: 480px)"> <source src="videos/320/crystal320.webm" type="video/webm" media="all and (max-width: 480px)"> <source src="videos/720/crystal720.mp4" type="video/mp4" media="all and (min-width: 481px)"> <source src="videos/720/crystal720.webm" type="video/webm" media="all and (min-width: 481px)"> </video> this allows your site to serve different video files based on the available space, in order to optimize the user's experience.
...And 2 more matches
xlink:show - SVG: Scalable Vector Graphics
the xlink:show attribute indicates how a linked resource should be opened and is meant for xlink-aware processors.
... only one element is using this attribute: <a> usage notes value new | replace | embed | other | none default value replace animatable no new this value specifies that the referenced resource is opened in a new window or tab.
... replace this value specifies that the referenced resource is opened in the same window or tab.
...And 2 more matches
<feComposite> - SVG: Scalable Vector Graphics
second set does not wipe out the background, with the result that the background sometimes shines through and is other cases is blended into itself (i.e., "double-counting").</desc> <filter id="overflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="inflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="in...
..." result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="outflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="out" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="atopflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="atop" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </fem...
...erge> </filter> <filter id="xorflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="xor" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="arithmeticflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" result="comp" operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </fil...
...And 2 more matches
Using custom elements - Web Components
over in our html, we use it like so: <popup-info img="img/alt.png" data-text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info> note: you can see the full javascript source code here.
... for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads.
... } } we will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code.
...And 2 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
2 common xslt errors xslt your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml.
... 11 resources xslt no summary!
... 15 for further reading needscontent, needshelp, transforming_xml_with_xslt, xml, xslt http://www.amazon.com/xslt-programme.../dp/0764543814 16 resources extensions, needscontent, needsexample, needslivesample, xml, xsl no summary!
...And 2 more matches
WebAssembly Concepts - WebAssembly
it is not primarily intended to be written by hand, rather it is designed to be an effective compilation target for low-level source languages like c, c++, rust, etc.
...mobile and other resource-constrained platforms can further amplify these performance bottlenecks.
...there are a number of online wasm assembler choices, such as: wasmfiddle wasmfiddle++ wasmexplorer these are great resources for people who are trying to figure out where to start, but they lack some of the tooling and optimizations of emscripten.
...And 2 more matches
context-menu - Archive of obsolete content
show an "edit page source" item when the user right-clicks a non-interactive part of the page: require("sdk/context-menu").item({ label: "edit page source", contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(document.url);' + '});', onmessage: function (pageurl) { editsource(pageurl); } }); show an "edit image" item when the menu is invoked on an...
... methods destroy() permanently removes the item from its parent menu and frees its resources.
... destroy() permanently removes the menu from its parent menu and frees its resources.
... methods destroy() permanently removes the separator from its parent menu and frees its resources.
tabs - Archive of obsolete content
this may come from http headers or other sources of mime information, and might be affected by automatic type conversions performed by either the browser or extensions.
...it has one of four possible values: "uninitialized": the tab's document is not yet loading "loading": the tab's document is still in the process of loading "interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading "complete": the tab's document and all resources are fully loaded once a tab's readystate has entered "interactive", you can retrieve properties such as the document's url.
...at this point the document itself is fully loaded and parsed, but resources such as stylesheets and images may still be loading.
...at this point the document and its resources, such as images and stylesheets, have finished loading.
dev/panel - Archive of obsolete content
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.
... mandatory url string a resource:// url pointing to an html file, typically in your add-on's "data" directory.
... mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
... to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = event.ports[0]; volcan.connect(debug...
util/match-pattern - Archive of obsolete content
for other schemes like file, resource, or data, use a scheme followed by an asterisk, as below.
... example pattern example matching urls example non-matching urls "*" http://example.com/ https://example.com/ ftp://example.com/ http://bar.com/foo.js http://foo.com/ file://example.js resource://me/my-addon/data/file.html data:text/html,hi there a domain name prefixed with an asterisk and dot matches any url of that domain or a subdomain, using any of http, https, ftp.
...to match local files, use file://*, and to match files loaded from your add-on's data directory, use resource://.
... example pattern example matching urls "file://*" file://c:/file.html file:///home/file.png "resource://*" resource://my-addon-at-me-dot-org/my-addon/data/file.html "data:*" data:text/html,hi there regular expressions you can specify patterns using a regular expression: var { matchpattern } = require("sdk/util/match-pattern"); var pattern = new matchpattern(/.*example.*/); the regular expression is subject to restrictions based on those applied to the html5 pattern attribute.
Rosetta - Archive of obsolete content
also, regarding some languages (like c), it is even not well defined the meaning of part of their semantics in respect to a scope that is more restricted than the full access to the resources they usually deal with – imagine, for example, the meaning of a c pointer within a html page!
..."" : odicts[smimetype](oscript.text); obaton.parentnode.insertbefore(ocompiled, obaton); } function reqerror (oerror) { throw new urierror("the script " + oerror.target.src + " is not accessible."); } function reqsuccess () { createscript(this.refscript, this); } function getsource (oscript) { var oreq = new xmlhttprequest(); oreq.onload = reqsuccess; oreq.onerror = reqerror; oreq.refscript = oscript; oreq.open("get", oscript.src, true); oreq.send(null); } function parsescript (oscript) { if (oscript.hasattribute("type") && !rignoremimes.test(oscript.getattribute("type").tolowercase())) { oscript.hasattribute("src") ?
... getsource(oscript) : createscript(oscript); } } function parsedocument () { for ( var ascripts = document.getelementsbytagname("script"), nidx = 0; nidx < ascripts.length; parsescript(ascripts[nidx++]) ); } var odicts = {}, rignoremimes = /^\s*(?:text\/javascript|text\/ecmascript)\s*$/; this.translatescript = parsescript; this.translateall = parsedocument; this.appendcompiler = function (vmimetypes, fcompiler) { if (arguments.length < 2) { throw new typeerror("rosetta.appendcompiler() \u2013 not enough arguments"); } if (typeof fcompiler !== "function") { throw new typeerror("rosetta.appendcompiler() \u2013 second argument must be a function"); } if (!array.isarray(vmimetypes)) { od...
... mime types here is a short list of the mime types associated to some programming languages: language mime type bash text/x-shellscript java text/x-java-source c text/x-c, text/x-csrc c++ text/x-c++, text/x-c++src python text/x-python there are no limitations to the mime types that can be used for the type attribute of the <script> element.
Extension Versioning, Update and Compatibility - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
...em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format (note that much of the information has been trimmed from this example for brevity in order to show the basic structure): <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
...--> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org"> <em:updates> <rdf:seq> <!-- the resource attribute points to an rdf:description entry below with a matching about attribute.
... the actual uri can be whatever you like --> <rdf:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"/> <rdf:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"/> </rdf:seq> </em:updates> <em:signature>migtma0gcsqgsib3dqebbquaa4gbamo1o2gwsccth1gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> <!-- this represents the same description within the li from the previous example --> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"> <em:version>2.2</em:version> <!-- trimmed the rest of the content...
Interaction between privileged and non-privileged pages - Archive of obsolete content
response.tosource() : response)); } } </script> </head> <body> <button onclick="return something.send_request({foo: 1}, something.callback)">send {foo: 1} with callback</button> <button onclick="return something.send_request({baz: 3}, something.callback)">send {baz: 3} with callback</button> <button onclick="return something.send_request({mozilla: 3})">send {mozilla: 3} without ca...
... * @see <https://developer.mozilla.org/docs/code_snippets/ * interaction_between_privileged_and_non-privileged_pages#security_notes> */ function geteventdata(event) { if (event.target.ownerdocument != targetdoc) throw "event from unexpected source"; return new xml(event.target.getattribute("eventdatafrompage")); } security notes never invoke the web page's javascript functions from your extension - doing this increases the chance of creating a security hole, where a malicious web page can trick the browser to run its code with extended privileges (just like your extension) with, for example, the ability to delete local files.
... it is highly recommended to check the source of the event (via event.target.ownerdocument.location) and make your extension ignore any events from pages not from your server.
... resources mozillazine forum discussion communication between html and your extension ...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
for each element that i explain in this chapter, i will illustrate it with a source code example.
...you can download a file with all the source code examples from: fixme: attache the translated tarball - paul task !.
... <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom).
... if multiple elements have the same ordinal value, they will be laid out in the same relative order they appear in the source code.
Local Storage - Archive of obsolete content
a full list of these flags can be found in the firefox source.
...if was used for most of its datasources, and you can still see it in use here and there, like in the install.rdf file.
...they allow you to automatically generate xul content using information from a datasource, and automatically update the content once the datasource changes.
... they were designed with rdf datasources in mind, but since firefox 3 they have been extended to support sqlite datasources as well.
Firefox addons developer guide - Archive of obsolete content
so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
...certainly appendix 2 doesn't care what version of firefox you're using, since it's just about open source software licenses.
... todo: all fixme notes inside the documents; add abbreviation definition to acronyms; add some link to the internal mdc documentation when it makes sense; indent source code; make sure documentation is relevant for all platforms: gnu/linux, macos, windows; add anchor links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add p...
...revious/next at the end of each chapter questions: opensource appendix.
Creating a Firefox sidebar extension - Archive of obsolete content
the extension needs to provide some special manifest files that control how it is installed and where its chrome resources are stored.
...the chrome manifest creates a lookup for all the resource types used by the extension.
... the emptysidebar extension resources code snippets:sidebar building an extension creating applications with mozilla packaging firefox/thunderbird extensions creating a firefox 1 sidebar original document information author: j.c.
... original source: http://occidopagus.nl/firefox/emptysidebar/ ...
Installing Dehydra - Archive of obsolete content
prerequisites mercurial 1.0 is needed to access source repositories.
...(alternately, build from source) a modern linux distribution.
...it is recommended to get the latest dehydra sources by checking out from mercurial.
...to generate preprocessed mozilla source files (*.ii), see the pork install instructions.
Developing New Mozilla Features - Archive of obsolete content
designate someone on your team to be involved with the mozilla.org cvs repository on a regular basis the ease of integrating your feature will increase if someone on your team is intimately involved with the source tree.
...if you absolutely don't have the resources to do this, then plan for extra integration time.
...but our developers are a precious commodity and their time is probably the most important resource we have.
...if you can find the resources, designate someone on your team as the liaison to mozilla.org for project management issues.
Documentation for BiDi Mozilla - Archive of obsolete content
the implementation is based on ibm's international components for unicode (icu), which was chosen after comparing and testing the available open-source implementations.
... other bidi functionality clipboard: based on bidi options in preferences, the text mode of the clipboard may be "logical", "visual" or "as source".
... in "as source" mode, the text copied into the clipboard is exactly the same (from a bidi point of view) as the original source.
...text pasted from the clipboard is treated exactly as if it came from a logical source.
Repackaging Firefox - Archive of obsolete content
first, set the source directory by clicking its "choose" button.
... the source directory is a directory that contains the windows installer, mac disk image (.dmg), and/or linux tarball of the standard firefox that you wish to customize.
...make sure you have the standard firefox install package in the source directory for each of these.
... the names of the source installer packages for each platform that are included in your source directory will appear next to each checkbox.
Frequently Asked Questions - Archive of obsolete content
why does mozilla show source code/gibberish instead of svg?
... if there's a grey area at the top of the source with the text "this xml file does not appear to have any style information associated with it" then the problem is with the svg file.
... if source code is displayed without a gray area at the top, or if you just see gibberish, then the problem is server misconfiguration.
...failing to respect the mime types servers send is incorrect and has been a source of security holes in other browsers.
Safely loading URIs - Archive of obsolete content
all three methods take three arguments: the first argument identifies the source of the uri, the second argument is the uri that one plans to load, and the third argument is a set of flags that can be used to impose additional restrictions on the uris that may be loaded.
... it's important to make sure that the first argument to these methods identifies the source of the uri.
... so if you're implementing a context menu and you add a "view image" option, the source of the image uri would be the page the image is in, not the chrome document the context menu code is in.
... differences between the methods the three methods differ from each other in how the source of the uri is identified and in what is known about the uri to be loaded.
Supporting per-window private browsing - Archive of obsolete content
detecting private browsing mode determining whether or not a given dom window is private is simple: import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.iswindowprivate(window).
... try { // firefox 20+ components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); if (!privatebrowsingutils.iswindowprivate(window)) { ...
...to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.getprivacycontextfromwindow(win), passing a window object that is related to the content in question.
...in some cases, there is no logical window object to use (such as when data or an action originate from some other source than web content).
Using Breakpoints in Venkman - Archive of obsolete content
the dots you see in the left margin of the source code view indicate which lines contain executable code, places where a hard breakpoint can be set.
... setting breakpoints clicking on one of these dots in the source code view will set a breapoint at that line.
... meta comments you can also embed scripted breakpoints directly into the source code you are debugging by using a venkman facility called meta comments.
...resources venkman introduction—previous article on venkman.
addDirectory - Archive of obsolete content
method of install object syntax public int adddirectory ( string xpisourcepath); public int adddirectory ( string registryname, string xpisourcepath, object localdirspec, string relativelocalpath); public int adddirectory ( string registryname, string version, string xpisourcepath, object localdirspec, string relativelocalpath); public int adddirectory ( string registryname, string version, string xpisourcepath, object localdirspec, string relativelocalpath, boolean forceupdate); public int adddirectory ( string registryname, installversion version, string xpisourcepath, object localdirspec, string relativelocalpath, boolean forceupdate); parameters t...
...a relative pathname is appended to the registry name of the package as specified by the package parameter to the initinstall method.this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathname.note that the registry pathname is not the location of the software on the computer; it is the location of information about the software inside the client version registry.
... xpisourcepath a string specifying the location of the directory within the xpi file.an empty string ("") causes the creation of a subdirectory node in the registry without actually unpacking any files, which may be useful when you are updating a package that contains subcomponents that could also be updated separately.
... when xpisourcepath is an empty string, registryname cannot be null.
patch - Archive of obsolete content
method of install object syntax int patch ( string registryname, string xpisourcepath, object localdirspec, string relativelocalpath); int patch ( string registryname, installversion version, string xpisourcepath, object localdirspec, string relativelocalpath); int patch ( string registryname, string version, string xpisourcepath, object localdirspec, string relativelocalpath); parameters the patch method has the following parameters: registryname the pathname in the client version registry for the component that is to be patched.this parameter can be an absolute pathname, such as /royalairways/royalsw/executable or a relative pathname, such as executable.
...this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathname.
... xpisourcepath a string specifying the location of the differences file within the xpi file.
...if this parameter is blank or null, xpisourcepath is used.
containment - Archive of obsolete content
« xul reference home containment type: uri this attribute specifies rdf properties (an rdf predicate) that indicate that a resource is a container.
... when generating content from a template this is used to determine which resources from the datasource are containers and thus can have child nodes and which ones are not containers.
... this attribute should be placed on the same element that the datasources and the ref attribute is on.
... it may be set to a space-separated list of rdf properties or resources.
Moving, Copying and Deleting Files - Archive of obsolete content
copying a file nsifile.copyto() is used to copy files or directories, and should be called on the source file to copy.
...if you do not want to rename the file, and use the same name as the source file, use a null string for the second argument.
... var file = io.newfile("home", "source.txt"); var destination = io.newfile("desktop", ""); file.copyto(destination, "destination.txt"); this example copies a file called 'source.txt' within the user's home directory to the desktop.
... in this case, we assume that 'source.txt' is a file.
Actions - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> </vbox> ...
...after all the results have been examined, the dom tree will look like the following: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> <button...
... id="http://www.xulplanet.com/rdf/b" label="http://www.xulplanet.com/rdf/b"/> <button id="http://www.xulplanet.com/rdf/c" label="http://www.xulplanet.com/rdf/c"/> <button id="http://www.xulplanet.com/rdf/d" label="http://www.xulplanet.com/rdf/d"/> </vbox> since the template tag is hidden, the effect will be like in the image, three buttons with the labels of the data in the datasource.
...of course, in this simple example you could really just make the toolbar the outer element with the datasources attribute rather than placing it inside the action.
Additional Template Attributes - Archive of obsolete content
« previousnext » referencing templates all the templates used so far have had the template placed inside the root element with the datasources attribute.
... <listbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" template="phototemplate"/> ...
...the datasources and ref attributes also differ for each usage, so it is possible to use a shared template to display the same structure multiple times but with different starting nodes in each case.
... <hbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template container="?start" member="?photo"> <rule> <image uri="?photo" src="?photo"/> </rule> </template> </hbox> in this example, the ?photo variable can be used instead of 'rdf:*' (although you can use either even if you specify the member variable).
Building Menus With Templates - Archive of obsolete content
here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-ty...
...the query generates a list of the person tags within the datasource and outputs the action body for each one.
...you might be wondering why we couldn't just put the datasources attribute on the menupopup instead and not have a menupopup inside the action body.
...here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" 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 ur...
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://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> ...
...as the datasource has three photos, one of which has a title of 'canal', this photo will match the first rule and the content's of that rule's action body will be generated.
...here is another example for an xml source: <radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender" rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </...
...n 1000 differently beforematch if a value comes before another alphabetically aftermatch if a value comes after another alphabetically startswithmatch if a value starts with a specific string endswithmatch if a value ends with a specific string containsmatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?letters" expr="string-length(@name) - 1"/> </query> <rule> <where subject="?name" rel="contains" value=" "/> <action> <label uri="?" value="?name has two names for a total length of ?letters"/> </action> </rule> </template> </vbox> this example contains only o...
Static Content - Archive of obsolete content
this item doesn't need to be generated from the datasource.
... <menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/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://purl.org/dc/elements/1.1/title" object="?countrytitle"/> ...
...note that the workaround of loading the datasource beforehand as mentioned for the last example isn't necessary, as the existence of the static content is another effective workaround.
... <radiogroup datasources="template-guide-photos4.rdf" ref="http://www.daml.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"/> ...
Cross Package Overlays - Archive of obsolete content
our foverlay.xul example source <?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="browser-toolbox"> <toolbar id="findfile_toolbar"> <label control="findfile_filename" value="search for files named:"/> <textbox id="findfile_filename"/> <label control="findfile_dir" value="directory:"/> <textbox id="findfile_dir"/> <button label="browse...
... to add this overlay to the manifest file, we need to add two resources.
... <rdf:seq about="urn:mozilla:overlays"> <rdf:li resource="chrome://navigator/content/navigator.xul"/> </rdf:seq> this declares that we are adding a overlay window, a child of the root overlay node (urn:mozilla:overlays).
...the following example shows how: <rdf:seq about="urn:mozilla:stylesheets"> <rdf:li resource="chrome://messenger/content/messenger.xul"/> </rdf:seq> <rdf:seq about="chrome://messenger/content/messenger.xul"> <rdf:li>chrome://blueswayedshoes/skin/myskinfile.css</rdf:li> </rdf:seq> next, we'll see how to create an installer for a xul application.
Document Object Model - Archive of obsolete content
the attributes are declared in the source, for example, flex="1", is a flex attribute set to the value 1.
... the children are the child tags of the element and will be nested inside the element in the source.
...an element corresponds to a tag is the xul source, but you may also find text nodes, comment nodes and a few other types in a document tree.
... find files example so far: source view see also a re-introduction to javascript javascript reference next we'll learn how to modify the dom.
Features of a Window - Archive of obsolete content
as in html, you can use the window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() function to open the second window.
... see also window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() next, we'll look at how to open secondary dialogs.
Input Controls - Archive of obsolete content
the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text.
... example 2 : source view <textbox multiline="true" value="this is some text that could wrap onto multiple lines."/> like the html textarea, you can use the rows and cols attributes to set the size.
... example 3 : source view <radiogroup> <radio id="orange" label="orange"/> <radio id="violet" selected="true" label="violet"/> <radio id="yellow" label="yellow"/> </radiogroup> attributes like buttons, check boxes and radio buttons are made up of a label and an image, where the image switches between checked and unchecked when it is pressed.
...seamonkey or waterfox and remote-xul-manager from https://github.com/jvillalobos/remote-xul-manager find files example so far : source view in the next section, we will look at some elements for entering and selecting numbers.
More Event Handlers - Archive of obsolete content
example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
...example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){ alert('button was pressed!'); } function boxpressed(event){ alert('box was pressed!'); event.stoppropagation(); } var button = document.getelementbyid("okbutton"); button.addeventlistener('command',buttonpressed,true); var outerbox = document.getelementbyid("outerbox"); outerbo...
...example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="event.preventdefault();"> <menuitem label="glass"/> <menuitem label="plastic"/> </menupopup> </button> alternatively, for attribute event listeners, you can just return false from the code.
...here is an example which displays the current mouse coordinates: example 4 : source view <script> function updatemousecoordinates(e){ var text = "x:" + e.clientx + " y:" + e.clienty; document.getelementbyid("xy").value = text; } </script> <label id="xy"/> <hbox width="400" height="400" onmousemove="updatemousecoordinates(event);"/> in this example, the size of the box has been set explicitly so the effect is easier to see.
More Menu Features - Archive of obsolete content
the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> ...
... our find files example so far : source view adding checkmarks to menus many applications have menu items that have checks on them.
...example 2 : source view <toolbox> <menubar id="options-menubar"> <menu id="options_menu" label="options"> <menupopup> <menuitem id="backups" label="make backups" type="checkbox"/> <menuitem id="email" label="email administrator" type="checkbox" checked="true"/> </menupopup> </menu> </menubar> </toolbox> the type attribute has been added which is used to make the menu item ch...
...the example below demonstrates this: example 3 : source view <toolbox> <menubar id="planets-menubar"> <menu id="planet-menu" label="planet"> <menupopup> <menuitem id="jupiter" label="jupiter" type="radio" name="ringed"/> <menuitem id="saturn" label="saturn" type="radio" name="ringed" checked="true"/> <menuitem id="uranus" label="uranus" type="radio" name="ringed"/> <menuseparator/> <menuitem id="eart...
Popup Menus - Archive of obsolete content
the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <box context="clipmenu"> <label value="context click for menu"/> </box> here, the menupopup has been associated with a box.
... example 2 : source view <button label="save" tooltiptext="click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <description value="click here to see more information"/> <description value="really!" style="color: red;"/> </tooltip> </popupset> <button label="more" tooltip="moretip"/> these two buttons each have a tooltip.
...the example below demonstrates creating a back button with a popup menu: example 3 : source view <popupset> <menupopup id="backpopup" position="after_start"> <menuitem label="page 1"/> <menuitem label="page 2"/> </menupopup> </popupset> <button label="pop me up" popup="backpopup"/> our find files example let's add a simple popup menu to the find files dialog.
... our find files example so far : source view next, we'll look at how to create scrolling menus.
The Box Model - Archive of obsolete content
example 1 : source view <vbox> <button id="yes" label="yes"/> <button id="no" label="no"/> <button id="maybe" label="maybe"/> </vbox> the three buttons here are oriented vertically as was indicated by the box.
...the example below shows a simple login prompt: example 2 : source view <vbox> <hbox> <label control="login" value="login:"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" value="password:"/> <textbox id="pass"/> </hbox> <button id="ok" label="ok"/> <button id="cancel" label="cancel"/> </vbox> here four elements have been oriented vertically, two inner hbox tags and two button elements.
...example 3 : source view <vbox> <hbox> <vbox> <label control="login" value="login:"/> <label control="pass" value="password:"/> </vbox> <vbox> <textbox id="login"/> <textbox id="pass"/> </vbox> </hbox> <button id="ok" label="ok"/> <button id="cancel" label="cancel"/> </vbox> notice how the text boxes are now aligned with each other.
... example so far: source view in the next section, we will look at specifying the sizes of individual elements and how to constrain their sizes.
XUL Template Primer - Bindings - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.com/nc-rdf#friends" object="?friends"/> <member container="?friends" child="?friend"/> <triple subject="?friend" predicate="http://home.netscape.com/nc...
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description about="urn:root"> <nc:friends> <rdf:seq> <rdf:li> <rdf:description nc:name="alison appel"> <nc:address resource="#home"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="jack"> <nc:address resource="#doghouse"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="lumpy"/> </rdf:li> </rdf:seq> </nc:friends> </rdf:description> <rdf:description id="home" nc:street="437 hoffman"...
...the value of the object's variable will be computed by invoking the gettarget() method using the object's value as the asource argument, and the predicate's resource as the aproperty argument.
... (see the nsirdfdatasource interface for more details.) in our example, the <rule> will be instantiated three times: once each for alison, jack, and lumpy.
XUL Coding Style Guidelines - Archive of obsolete content
the author has collected a set of guidelines from various sources listed in the references section.
... making xul localizable -- mandatory in the past, ui (display) related resource descriptions are stored in *.rc (for windows client) or *.ad (for unix client) so that they can be localized for a specific language or culture.
... widget resources content data style info layout geometry how to make them localizable?
...some files live in the tree but aren't really part of the build; they're just there as programming examples or a kind of source documentation.
binding - Archive of obsolete content
properties object, predicate, subject examples fixme: (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width proper...
...it can be a variable reference, an rdf resource uri, or an rdf literal value.
...it can be a variable reference or an rdf resource uri.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, ...
bindings - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width o...
...it can be a variable reference, an rdf resource uri, or an rdf literal value.
...it can be a variable reference or an rdf resource uri.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(...
Deploying XULRunner - Archive of obsolete content
copy xulrunner/ to this directory when deploying with xulrunner 2.0 and above do the following: move chrome.manifest to the root directory, and adjust resource paths inside chrome.manifest accordingly with xulrunner 9.0 or 10.0 you may need to copy "mozutils.dll" and/or "mozcrt19.dll" from the xulrunner directory to the root directory.
...here's how the entire application bundle looks: myapp.app/ contents/ info.plist pkginfo resources/ application.ini app_icon.icns components/ ...
... resources/ application.ini app_icon.icns components/ ...
...you should copy this file from /library/frameworks/xul.framework/versions/1.8/xulrunner.) when deploying with xulrunner 2.0, move chrome.manifest to the root directory, and adjust resource paths inside chrome.manifest accordingly.
Gecko Compatibility Handbook - Archive of obsolete content
gecko is an embeddable browser, developed as part of the mozilla open source project and based on w3 standards rather than the proprietary approaches of the past.
...for example, dynapi is now maintained at sourceforge and offers a gecko-compatible version.
... useful resources beginning to intermediate web authors can look to the devedge web tune up wizard for pointers on areas where content needs to be updated to support gecko and other browsers that support the w3c standards.
...y problems mozilla web developer community references using web standards in your web pages browser detection and cross browser support updating dhtml web pages html element cross reference dom client object cross-reference introduction to cross-browser javascript and dynamic html gecko user agent strings developer tools mozilla's doctype sniffing the main page links to many more resources.
Plugins - Archive of obsolete content
the main source of documentation for npapi is the gecko plugin api reference.
...more information about these tools can be found on the external resources page.
...this can be useful when trying to determine if a plug-in is consuming too many resources.
... external resources for plugin creation external projects, frameworks, and blog posts that may be useful.
Introduction to SSL - Archive of obsolete content
the server also sends its own certificate and, if the client is requesting a server resource that requires client authentication, requests the client's certificate.
... is the authenticated client authorized to access the requested resources?
... the server checks what resources the client is permitted to access according to the server's access control lists (acls) and establishes a connection with appropriate access.
... if the server doesn't get to step 6 for any reason, the user identified by the certificate cannot be authenticated, and the user is not allowed to access any server resources that require authentication.
Common Firefox theme issues and solutions - Archive of obsolete content
source file: chrome://global/skin/media/videocontrols.css the solution to this issue is to add the following name space to the second line of the file right after, and in addition to, the existing @namespace: @namespace html url("http://www.w3.org/1999/xhtml"); you can generate the error console message by going to mozilla's mission page.
... resources amo editors theme testing guidelines when developing and testing your themes, please refer to the theme testing guidelines amo editors use to review themes.
... mozillazine themes forum mozillazine is not an official mozilla website, but it does have the largest community of firefox theme developers and is a great resource.
... mozillazine firefox nightly theme changes thread mozillazine's firefox nightly theme changes thread is a great resource for keeping up to date with the latest changes to the firefox ui and contains links to the bugzilla bug reports, which detail what changes were made.
Settings - Archive of obsolete content
the debugger has its own settings menu, which you can access from an icon in the toolbar: each setting is a simple on/off switch: auto prettify minified sources with this option enabled, the debugger will automatically detect minified js files and pretty-print them.
... show original sources enabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to javascript from a language like coffeescript.
... automatically black box minified sources new in firefox 33.
... automatically black box sources whose url ends with ".min.js".
Browser Detection and Cross Browser Support - Archive of obsolete content
for more specific gecko recommendations, please see the gecko compatibility handbook gecko although many web developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey.
...this script and variants of it can be found today on many web sites where it is a common source of detection problems.
...this is a common source of problems when using browsers based upon gecko as well as opera.
... cvs branch tag beginning in gecko 0.9.0 (netscape 6.1 in gecko 0.9.2), navigator.useragent contains the cvs branch tag of the source which was used to create the version of gecko being used in the browser.
LiveConnect Overview - Archive of obsolete content
working with wrappers in javascript, a wrapper is an object of the target language data type that encloses an object of the source language.
... in javascript 1.2 and earlier versions, the object is unwrapped and either of the following situations occur: if the unwrapped object has a booleanvalue method, the source object is converted to the return value.
... in javascript 1.2 and earlier versions, the object is unwrapped and either of the following situations occur: if the unwrapped object has a booleanvalue method, the source object is converted to the return value.
... in javascript 1.2 and earlier versions, the object is unwrapped and either of the following situations occur: if the unwrapped object has a booleanvalue method, the source object is converted to the return value.
Building Mozilla XForms - Archive of obsolete content
the following table gives you an overview of which version you want to build: firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_branch not developed any more last release: 0.8.5ff2 firefox 3.0 gecko 1.9.0 cvs, branch head not developed any more last release: 0.8.5ff3 firefox 3.5 gecko 1.9.1 xforms/schema-validation code does not build with firefox 3.5 any more not supported firefox 3.6 gecko 1.9.2 xforms/schema-validation code does not build wit...
...firefox 3.5 and up: get the source code if you want to build xforms for firefox up to 3.0, you already have the required source code, it's part of your cvs checkout.
...for xforms, you will need to add the following line: ac_add_options --enable-extensions="default,xforms" # if you're using a mozilla source before 2010-11-06 (e.g.
...switch to the root of your source directory and start the build with make -f client.mk build after the build finishes, you'll have a xforms.xpi in obj-*/dist/xpi-stage/xforms.xpi.
Using the Right Markup to Invoke Plugins - Archive of obsolete content
future netscape browsers based on mozilla source code will allow the use of a special param element to specify where to get plugins that are not present, but this feature is not available in netscape 7.
...adding an additional layer of convenience in the form of automatic retrieval is the subject of a bug 180411 in the mozilla open source code.
...here is an example: <object type="application/x-java-applet;jpi-version=1.4.1_01" width="460" height="160"> <param name="code" value="animator.class" /> <param name="imagesource" value="images/beans" /> <param name="backgroundcolor" value="0xc0c0c0" /> <param name="endimage" value="10" /> <param name="soundsource" value="audio"> <param name="soundtrack" value="spacemusic.au" /> <param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" /> <param name="pause" value="200" /> <p>you need the java plugin.
...the references section gathers resources about the use of the applet element.
Game distribution - Game development
if you want to make money out of game dev, you should secure your source code one way or another against people who could easily take it and sell it as their own.
... if you're working on a side project just for fun, then leaving the source open will benefit those who would like to learn from what you've created.
...it's easy to prepare a game for them as such an action involves little to no modification of the game itself — usually adding a manifest file containing necessary information in a zipped package containing all the resources is enough.
... electron — known as atom shell — is an open-sourced and cross-platform tool from github.
2D maze game with device orientation - Game development
you can check it out on github where it’s open sourced, read the online documentation and go through the big collection of examples.
... starting with the project you can see cyber orb source code on github.
... src: the javascript files with all the source code of the game defined inside.
...you can play the demo game cyber orb and check out its source code on github.
Plug-in Development Overview - Gecko Plugin API Reference
for this the version stamp of the embedded resource of the plug-in dll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quic...
... the resource code for this language and character set combination is 040904e4.
... note: the resource method described below is deprecated.
... if neither is present, gecko will check the plugins resources.
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
when multiple domains are used to serve multiple assets, browsers are able to download more resources simultaneously, resulting in a faster page load time and improved user experience.
... the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded.
... as browsers limit the number of active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially.
... with domain sharding, the required downloads are served from more than one domain, enabling the browser to simultaneously download needed resources.
CSS and JavaScript accessibility best practices - Learn web development
for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them).
... screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all.
... in addition, the errorfield is placed at the top of the source order (although it is positioned differently in the ui using css), meaning that users can find out exactly what's wrong with their form submissions and get to the input elements in question by going back up to the start of the page.
...maybe we want to provide a thumbnail image that shows a larger version of the image when it is moused over or focused (like you'd see on an e-commerce product catalog.) we've made a very simple example, which you can find at mouse-and-keyboard-events.html (see also the source code).
Advanced styling effects - Learn web development
you can find the examples in this section at box-shadow.html (see the source code too).
... 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in any way you want, for example to create a more realistic look with shadows based on multiple light sources.
... you can find a lot more examples than are available here in our blend-modes.html example page (see source code), and on the <blend-mode> reference page.
... note: for a full -webkit-background-clip: text code example, see background-clip-text.html (see also the source code).
Debugging CSS - Learn web development
the dom versus view source something that can trip up newcomers to devtools is the difference between what you see when you view the source of a webpage, or look at the html file you put on the server, and what you can see in the html pane of the devtools.
... while it looks roughly similar to what you can see via view source there are some differences.
... view source in comparison, is simply the html source code as stored on the server.
...you could start by doing view source on the page and copying the html into codepen, then grab any relevant css and javascript and include it too.
Fundamental CSS comprehension - Learn web development
grab the css resources text file — this contains a set of raw selectors and rulesets that you'll need to study and combine to answer part of this assessment.
... the first two rulesets in the css resource file are yours, for free!
... taking care of the selectors and rulesets provided in the css resource file: next up, we'd like you to look at the four selectors, and calculate the specificity for each one.
...you've got four pairs of selector and ruleset to match in your css resources.
Add a hitmap on top of an image - Learn web development
an image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource.
...to keep keyboard navigation intuitive, make sure the source order of <area> elements corresponds to the visual order of hotspots.
... in case of overlap, source order carries the day.
... href the url of the resource you’re linking to.
What’s in the head? Metadata in HTML - Learn web development
view the page's source (right/ctrl + click on the page, choose view page source from the context menu.) find the description meta tag.
...in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="the mozilla developer network (mdn) provides information about open web technologies including html, css, and apis for both web sites and html5 apps.
...for example, you'll find this in the source code of the mdn web docs homepage: <!-- third-generation ipad with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/...
...the main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.
From object to iframe — other embedding technologies - Learn web development
a quick example first though — try loading the previous example we showed above into your browser — you can find it live on github (see the source code too.) you won't actually see anything displayed on the page, and if you look at the console in the browser developer tools, you'll see a message telling you why.
...ia 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> independent html content as fallback for an unavailable resource not supported (<noembed> is obsolete) contained within <object>, after <param> elements note: <object> requires a data attribute, a type attribute, or both.
... here's an example that uses the <embed> element to embed a flash movie (see this live on github, and check the source code too): <embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowscriptaccess="samedomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> pretty horrible, isn't it?
... now let's look at an <object> example that embeds a pdf into a page (see the live example and the source code): <object data="mypdf.pdf" type="application/pdf" width="800" height="1200" typemustmatch> <p>you don't have a pdf plugin, but you can <a href="mypdf.pdf">download the pdf file.
Functions — reusable blocks of code - Learn web development
every time we manipulated a text string, for example: let mytext = 'i am a string'; let newstring = mytext.replace('string', 'sausage'); console.log(newstring); // the replace() string function takes a source string, // and a target string and replaces the source string, // with the target string, and returns the newly formed string or every time we manipulated an array: let myarray = ['i', 'love', 'chocolate', 'frogs']; let madeastring = myarray.join(' '); console.log(madeastring); // the join() function takes an array, joins // all the array items together into a single // string, and returns this...
...for now, we just wanted to clear up any possible confusion of method versus function — you are likely to meet both terms as you look at the available related resources across the web.
...in our random-canvas-circles.html example (see also the full source code) from our loops article, we included a custom draw() function that looked like this: function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } this function draws 100 random circles inside a <canvas> element...
... note: you can see this example running live on github (see also the source code).
Looping code - Learn web development
note: you can view the full source code on github too (also see it running live).
... note: you can view the full source code on github too (also see it running live).
... let's have a look again at our cats list example, but rewritten to use a while loop: let i = 0; while (i < cats.length) { if (i === cats.length - 1) { info += 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; } i++; } note: this still works just the same as expected — have a look at it running live on github (also view the full source code).
... let's rewrite our cat listing example again to use a do...while loop: let i = 0; do { if (i === cats.length - 1) { info += 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; } i++; } while (i < cats.length); note: again, this works just the same as expected — have a look at it running live on github (also view the full source code).
Working with JSON - Learn web development
note: we've made the json seen above available inside a variable in our jsontest.html example (see the source code).
...this is a very useful javascript object that allows us to make network requests to retrieve resources from a server via javascript (e.g.
... note: if you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.) note: if you are having trouble following the dot/bracket notation we are using to access the javascript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our javascript.
... you can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the xhr to return the raw json text, then used parse() to convert it to an actual javascript object.
What is web performance? - Learn web development
to summarize, many features impact performance including latency, application size, the number of dom nodes, the number of resource requests made, javascript performance, cpu load, and more.
... source order.
... your html index file's source order can significantly affect performance.
... the download of additional assets linked to from the index file is generally sequential, based on source order, but this can be manipulated and should definitely be optimized, realizing that some resources block additional downloads until their content is parsed and executed.
Multimedia: video - Learn web development
optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video preload, and consider streaming the video.
... optimize <source> order order video source from smallest to largest.
... for example, given video compressions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it understands.
... <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="web_banner.mp4" type="video/mp4"> </video> this hero-video code (above) is common to conference websites and corporate home pages.
Getting started with React - Learn web development
ackage-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── app.css ├── app.js ├── app.test.js ├── index.css ├── index.js ├── logo.svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source code for our application lives.
...indeed, the logo.svg file lives in our source directory.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
TypeScript support in Svelte - Learn web development
if you are not interested at all in typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more.
...we will also see which resources are available online to go further with learning svelte.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Strategies for carrying out testing - Learn web development
using analytics a much more accurate source of data, if you can get it, comes from an analytics app like google analytics.
... you may also consider using open source and privacy focussed analytics platforms like open web analytics and matomo.
... consider the following example (see the source code, and also the example running live): test criteria for this feature could be written like so: a and b grade: button should be activatable by the user's primary control mechanism, whatever it is — this should include mouse, keyboard, and touch.
...you tend to choose the hard drive space you want for each install; you could get away with probably 10gb, but some sources recommend up to 50gb or more, so the operating system will run reliably.
Client-side tooling overview - Learn web development
also well-worth looking at is webhint, a configurable, open-source linter for the web that surfaces best practices including approaches to accessibility, performance, cross-browser compatibility via mdn's browser compatibility data, security, testing for pwas, and more.
... source code control also known as version control systems (vcs), source code control is essential for backing work up and working in teams.
... git is the source code control system that most people use these days.
...with your code in a git repository, you can push it to your own server instance, or use a hosted source control website such as github, gitlab, or bitbucket.
Multiprocess on Windows
to include the typelib metadata, embed it in the proxy dll's resources.
...this is achieved by specifying rcinclude in the dll's moz.build, and then specifying the resources in an .rc file.
... you should always embed your typelib with its resource id set to 1.
... if your typelib is embedded in a proxy's resources, then use registerproxy().
Creating reftest-based unit tests
to run all the reftests, go to the directory where you save firefox's source code and run: ./mach reftest if you want to run a particular set of reftests, pass the path as an argument: ./mach reftest path/from/sourcedir/reftest.list and to run a single reftest just pass the path to the test file (not the reference file): ./mach reftest path/from/sourcedir/reftest-name.html there is no reftest equivalent to mach mochitest --keep-open, but temporarily adding the ref...
...create a directory (inside firefox's source code tree) and make that your current directory (i.e.
...<html><head><title>reftest0001</title> <body><strong>hello!</strong></body> </html> step 4 create a file named bar.html with the following: <html><head><title>reftest0001</title> <body><b>hello!</b></body> </html> step 5 create a file named reftest.list with the following: == foo.html bar.html you are now ready to run the test (but first you must go back to the root of firefox's source code tree): $ ./mach reftest path/to/reftest.list 2>&1 | grep reftest reftest pass: file:///users/ray/mozilla-central/path/to/foo.html $ congratulations!
... here is a list of reftest opportunities files in the source.
Experimental features in Firefox
nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
... nightly 73 no developer edition 73 no beta 73 no release 73 no preference name layout.css.constructable-stylesheets.enabled webrtc and media the following experimental features include those found in the webrtc api, the web audio api, the media session api, the media source extensions api, the encrypted media extensions api, and the media capture and streams api.
... nightly 71 yes developer edition 71 no beta 71 no release 71 no preference name dom.media.mediasession.enabled asynchronous sourcebuffer add and remove this adds the promise-based methods appendbufferasync() and removeasync() for adding and removing media source buffers to the sourcebuffer interface.
... nightly 62 no developer edition 62 no beta 62 no release 62 no preference name media.mediasource.experimental.enabled avif (av1 image file format) support with this feature enabled, firefox supports the av1 image file (avif) format.
Performance
better: addon.js as above // framescript.js components.utils.import("resource://my-addon/processmodule.jsm", {}).addframe(this) // processmodule.jsm const exported_symbols = ['addframe']; const precomputedconstants = // ...
...rvices.ppmm.broadcastasyncmessage("my-addon:update-configuration", {newconfig: main.serialize()}) } // processmodule.jsm const exported_symbols = ['getmaincopy']; var maincopy; services.cpmm.addmessagelistener("my-addon:update-configuration", function(message) { maincopy = message.data.newconfig; }) funtion getmaincopy() { return maincopy; } // framescript.js components.utils.import("resource://my-addon/processmodule.jsm") // getmaincopy() used by other functions don't register observers (and other callbacks to global services) in a frame script bad: //framescript.js services.obs.addobserver("document-element-inserted", { observe: function(doc, topic, data) { if(doc.ownerglobal.top != content) return; // bail out if this is for another tab decoratedocument(...
...} object.assign(contentypolicy.prototype, { classdescription: ..., classid: ..., contractid: ..., queryinterface: xpcomutils.generateqi([ci.nsicontentpolicy]), shouldload: function(type, location, origin, context) { let resultlist = services.cpmm.sendsyncmessage("my-addon:check-load", {destination: location, source: origin}) // <=== sync message!
... better: // addon.js function onunload() { services.mm.removedelayedframescript("resources://my-addon/framescript.js"); services.ppmm.removedelayedprocessscript("resources://my-addon/processcript.js"); services.mm.broadcastasyncmessage("my-addon:unload"); services.ppmm.broadcastasyncmessage("my-addon:unload"); } in the frame/process scripts: remove all kinds of listeners remove observer notifications remove custom categories and services nuke sandboxes unload jsms rest...
HTMLIFrameElement.setVisible()
the visible state is used to define the level of resources required by the browser <iframe>.
... if the visible state is set to true, it means that the browser <iframe> should have high priority over the resources needed to render and handle its content.
... on the contrary, if its visible state is set to false, it has low priority over the resources it needs.
...however, if the visible state is set to false, window.requestanimationframe will be called only when there are free resources to do it.
How Mozilla determines MIME Types
when loading an uri with a type that mozilla can not handle, a helper app dialog shows up, and the displayed information comes from these sources: ask the os for a handler of the given <extension, mime type> pair.
... the "data source" (that is, the list of helper applications) is searched for an entry with the mime type of the uri.
... the data source is the mimetypes.rdf file in the profile directory.
... if this fails, the data source is searched via the extension (content-disposition as above).
Code Samples
components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("yourextensionid", function(addon) { var addonlocation = addon.getresourceuri("").queryinterface(components.interfaces.nsifileurl).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?
... " + addon.hasresource("file.txt") ?
... "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.
... var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, onoperationcancelled: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = (addon.pendingoperations & addonmanager.pending_uninstall) != 0; } } } try { components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.addaddonlistener(listener); } catch (ex) {} ...
Localizing with Mercurial
in mozilla, we use the the mercurial version control system (hg) to manage our source code and localizations.
... cloning and updating repositories there are a couple of repostiories that contain en-us source files that most locales will want to deal with.
... here's how to get (or clone) your en-us source files for the first time: run the following command in the command line to get the source en-us files for firefox: hg clone https://hg.mozilla.org/mozilla-central/ this will create a clone of the mozilla-central repository in the directory mozilla-central.
... run the following commands in the command line to get the source en-us files for any combination of firefox, seamonkey, thunderbird: hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout the first command will create a clone of the comm-central repository.
NSPR build instructions
introduction the top level of the nspr source tree is the mozilla/nsprpub directory.
... although nsprpub is a subdirectory under mozilla, nspr is independent of the mozilla client source tree.
... build the libraries build the test programs for example, # check out the source tree from mercurial hg clone https://hg.mozilla.org/projects/nspr # create a build directory mkdir target.debug cd target.debug # run the configure script ../nspr/configure [optional configure options] # build the libraries gmake # build the test programs cd pr/tests gmake on mac os x, use make, which is gnu make.
... configure options although nspr uses autoconf, its configure script has two default values that are different from most open source projects.
PRThreadState
the time of release of the resources assigned to the thread cannot be determined in advance.
...this approach facilitates management of the process' critical resources.
... description a thread is a critical resource and must be managed.
...the join process permits strict synchronization of thread termination and therefore promotes effective resource management.
Threads
threading types and constants threading functions a thread has a limited number of resources that it truly owns.
... these resources include a stack and the cpu registers (including pc).
...threads are critical resources and therefore require some management.
...joining a thread provides definitive proof that the target thread has terminated and has finished with both the resources to which the thread has access and the resources of the thread itself.
JSS
MozillaProjectsNSSJSS
jss source should now be checked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss documentation is sorely out-of-date, updated information will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time.
... legacy jss information can still be found at: source: https://hg.mozilla.org/projects/jss issues: https://bugzilla.mozilla.org/buglist.cgi?product=jss wiki: /docs/mozilla/projects/nss/jss network security services for java (jss) is a java interface to nss.
... for information on downloading nss releases, see nss sources building testing.
... release notes 4.3.1 release notes 4.3 release notes older release notes build instructions building jss 4.4.x building jss 4.3.x older build instructions download or view source download binaries, source, and javadoc view the source online testing jss tests frequently asked questions jss faq information on jss planning can be found at wiki.mozilla.org, including: nss fips validation nss roadmap page community view mozilla cryptography forums...
NSS_3.12_release_notes.html
nss 3.12 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_rtm/src/.
...s_camellia_cbc camellia_block_size new macros for rsa (see blapit.h): rsa_max_modulus_bits rsa_max_exponent_bits new macros in certt.h: x.509 v3 ku_encipher_only cert_max_serial_number_bytes cert_max_dn_bytes pkix cert_rev_m_do_not_test_using_this_method cert_rev_m_test_using_this_method cert_rev_m_allow_network_fetching cert_rev_m_forbid_network_fetching cert_rev_m_allow_implicit_default_source cert_rev_m_ignore_implicit_default_source cert_rev_m_skip_test_on_missing_source cert_rev_m_require_info_on_missing_source cert_rev_m_ignore_missing_fresh_info cert_rev_m_fail_on_missing_fresh_info cert_rev_m_stop_testing_on_fresh_info cert_rev_m_continue_testing_on_fresh_info cert_rev_mi_test_each_method_separately cert_rev_mi_test_all_local_information_first cert_rev_mi_no_overall_info_requirem...
...unknown signature oid 1.3.14.3.2.29 causes sec_error_bad_signature, 3.11 ignores it bug 413010: cert_comparerdn may return a false match bug 417664: false positive crl revocation test on ppc/ppc64 nss_enable_pkix_verify=1 bug 404526: glibc detected free(): invalid pointer bug 300929: certificate policy extensions not supported bug 129303: nss needs to expose interfaces to deal with multiple token sources of certs.
...bug 420979: vfychain ignores -b time option when -p option is present bug 403563: implement the tls session ticket extension (ste) bug 400917: want exported function that outputs all host names for dns name matching bug 315643: test_buildchain_resourcelimits won't build bug 353745: klocwork null ptr dereference in pkcs12 decoder bug 338367: the gf2m_populate and gfp_populate should check the eccurve_map array index bounds before use bug 201139: ssltap should display plain text for null cipher suites bug 233806: support nist crl policy bug 279085: nss tools display public exponent as negative number bug 363480: ocspclnt needs option to take cert...
Necko Architecture
mimetype - mime <-> file extension mapping nkabout - about: protocol nkdata - data: protocol nkfile - file: protocol nkftp - ftp: protocol nkkeyword - keyword: protocol nkresrc - resource: protocol cnvts - stream converters stremcnv - stream converter service these libraries will change with time and illustrate the modularity of necko.
...the uri interface does resource-generic things like getting/setting the scheme, or getting/setting the spec (everything beyond the first colon ':').
...if you want to provide your own resource implementation for foo urls, you simply need to implement the nsiuri interface.
...streams provide a generic interface to the data and allow for many underlying implementations that permit multiple data sources to be used.
Renaming With Pork
this describes how to use pork to rewrite source code.
...make two copies of the source(analysis and test).
...apply the patch in the test sources.
... pork patches contain absolute paths in them and will touch generated sources if it comes across any.
Download Rhino
rhino is available for download both in source and compiled form.
... license rhino is open source.
... source in addition to getting the source from the zip files above, the source code for rhino can be found in github at https://github.com/mozilla/rhino.
... to get the source, use the command git clone https://github.com/mozilla/rhino.git rhino uses gradle as its build system.
How to embed the JavaScript engine
get the spidermonkey source code.
... you can download a source archive or use mercurial (hg) to pull the spidermonkey repository.
... on windows, do not install the spidermonkey source code under the msys root directory (which is usually c:\mozilla-build\msys).
...then click the view source button, and copy the code from the window that appears.
JS::CompileFunction
const char *name, unsigned nargs, const char *const *argnames, const char16_t *chars, size_t length, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, js::sourcebufferholder &srcbuf, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, const char *bytes, size_t length, js::mutablehandlefunction fun); name type description ...
... srcbuf js::sourcebufferholder &amp; source buffer containing the script function compile.
... chars, bytes, or srcbuf is a string containing the source code of the function.
... length is the length of the source code in characters.
Mozilla Projects
crash reporting firefox ships with an open-source crash reporting system.
... rhino rhino is an open-source implementation of javascript written entirely in java.
... spidermonkey: the mozilla javascript runtime standalone source code releases can be found on the releases page.
... it is completely free, open source and can be included in any tool whether open or closed, free or commercial.
Animated PNG graphics
MozillaTechAPNG
valid values for <code>blend_op are: value constant description 0 apng_blend_op_source all color components of the frame, including alpha, overwrite the current contents of the frame's output buffer region.
...for example, if the default image is included in the animation, and uses a blend_op of apng_blend_op_source, clearing is not necessary because the entire output buffer will be overwritten.
...o other chunks in between them from 0.8 removed crcs for ihdr and plte from actl the actl fctl and adat are now not copy safe, renamed them to actl, fctl and adat from 0.9 split render_op into dispose_op and blend_op from 0.10 no changes test encoder and sample images sample images are available from the apng implementation page at http://littlesvr.ca/apng/ an encoder (open source) is available in versions of the gecko engine starting with version 1.9 alpha 4.
... an application (open source) using the mozilla encoder to assemble apngs available here: http://littlesvr.ca/apng/apngedit.html see also portable network graphics (png) specification (second edition) extensions to the png specification, version 1.2.0 graphics interchange format 89a ...
Packaging WebLock
« previousnext » in this final part of the tutorial, we'll put all of the pieces of the web locking component - the library itself, the type library, the header file, and the user interface resources - into a package that can be installed on other systems.
... once you have the component and the other resources for weblock packaged properly (see the following section, archiving resources), the installation script for weblock is a simple one (see the weblock installation script).
... archiving resources once you have compiled all the resources that make up the weblock component and the files that make up the user interface that will be added to the browser, you can place these within a subdirectory called weblock.
...the component files are copied to the components directory of the gecko application, and the weblock subdirectory gets copied over into the chrome subdirectory, where its ui resources can be added dynamically to the xul-based gecko application.
Components.utils.import
note: prior to gecko 2.0, javascript code modules could only be loaded using file: or resource: urls.
... example components.utils.import("resource://gre/modules/xpcomutils.jsm", this); difference from mozijssubscriptloader the differences from mozijssubscriptloader: the behavior when importing/loading the same code from different locations: the subscript loader evaluates the specified code each time it is invoked, with the caller's global object.
... for example: var scope1 = {}, scope2 = {}; components.utils.import("resource://gre/modules/json.jsm", scope1); components.utils.import("resource://gre/modules/json.jsm", scope2); assert(scope2.xpcomutils === scope1.xpcomutils); ...returns true, whereas: var someurl = "resource://gre/modules/json.jsm"; var obj1 = {}, obj2 = {}; var loader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript(someurl, obj1); loader.loadsubscript(someurl, obj2); assert(obj2 === obj1); ...returns false.
... additional resources components.utils bug 238324 the documentation in xpccomponents.idl the tests in js/xpconnect/tests/unit/ importing sdk/commonjs modules into other code ...
nsIApplicationCacheService
netwerk/base/public/nsiapplicationcacheservice.idlscriptable this interface manages the set of application cache groups that manage offline resources for web applications.
... chooseapplicationcache() tries to find the best application cache to serve a specified resource.
... return value the nsiapplicationcache best able to serve the resource indicated by the key parameter.
... see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcachechannel nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsIAsyncStreamCopier
inherits from: nsirequest last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void asynccopy(in nsirequestobserver aobserver, in nsisupports aobservercontext); void init(in nsiinputstream asource, in nsioutputstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink); methods asynccopy() starts the copy operation.
...void init( in nsiinputstream asource, in nsioutputstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink ); parameters asource contains the data to be copied.
...asourcebuffered true if asource implements nsiinputstream.readsegments().
...aclosesource true if asource should be closed after copying.
nsIDOMXULElement
database nsirdfcompositedatasource read only.
... datasources domstring gets/sets the value of the element's datasources attribute.
... resource nsirdfresource read only.
... returns the nsirdfresource corresponding to the element's ref or id attribute, if any.
nsIDocShell
parentcharsetsource print32 indicates the source from which the character set being used was obtained.
...see character set source constants for defined values.
... load_cmd_pushstate 0x8 returned by the loadtype attribute when the page has used history.pushstate() character set source constants these constants are not exposed to script.
... they are used internally as values for the parentcharsetsource attribute.
nsIDownloadHistory
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void adddownload(in nsiuri asource, [optional] in nsiuri areferrer, [optional] in prtime astarttime); methods adddownload() adds a download to history.
... this will also notify observers that the uri asource is visited with the topic ns_link_visited_event_topic if asource has not yet been visited.
... void adddownload( in nsiuri asource, in nsiuri areferrer, optional in prtime astarttime optional ); parameters asource the source of the download we are adding to history.
...areferrer optional the referrer of source uri.
nsIDroppedLinkHandler
aallowsamedocument if false, drops are only allowed if the document of the source of the drag is different from the destination.
...if true, the source is not checked.
...this will occur if the source of the drag initiated a link for dragging that it itself cannot access.
... this prevents a source document from tricking the user into a dragging a chrome url for example.
nsIParserUtils
sanitizerdropmedia (1 << 5) flag for sanitizer: drops <img>, <video>, <audio>, and <source>, and flattens out svg.
... astring converttoplaintext( in astring src, in unsigned long flags, in unsigned long wrapcol ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value.) flags conversion option flags defined in nsidocumentencoder.
...that is, by default, for example <img> with a source pointing to an http server potentially controlled by a third party is not removed.
... astring sanitize( in astring src, in unsigned long flags ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value).
nsITransferable
requestingnode nsidomnode the source dom node this transferable was created from.
... khtmlcontext text/_moz_htmlcontext along with khtmlinfo, this is used to provide the context for a fragment of html source.
... khtmlinfo text/_moz_htmlinfo along with khtmlcontext, this is used to provide the context for a fragment of html source.
... kfilepromiseurlmime application/x-moz-file-promise-url the source url for a file promise.
nsIWindowWatcher
aname a window name assigned using window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open.
...see window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open for details.
nsIWorkerMessageEvent
1.0 66 introduced gecko 1.9.1 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void initmessageevent(in domstring atypearg, in boolean acanbubblearg, in boolean acancelablearg, in domstring adataarg, in domstring aoriginarg, in nsisupports asourcearg); attributes attribute type description data domstring the event's data.
... source nsisupports the event's source.
... void initmessageevent( in domstring atypearg, in boolean acanbubblearg, in boolean acancelablearg, in domstring adataarg, in domstring aoriginarg, in nsisupports asourcearg ); parameters atypearg the event type.
... asourcearg the source to place into the source attribute.
nsIXPConnect
nsistackframe createstackframelocation(in pruint32 alanguage, in string afilename, in string afunctionname, in print32 alinenumber, in nsistackframe acaller); void debugdump(in short depth); void debugdumpevalinjsstackframe(in pruint32 aframenumber, in string asourcetext); void debugdumpjsstack(in prbool showargs, in prbool showlocals, in prbool showthisprops); void debugdumpobject(in nsisupports acomobj, in short depth); [noscript,notxpcom] prbool definedomquickstubs(in jscontextptr cx, in jsobjectptr proto, in pruint32 flags, in pruint32 interfacecount, [array, size_is(interfacecount)] in nsiidptr interfacearray); jsval ...
...evalinsandboxobject(in astring source, in jscontextptr cx, in nsixpconnectjsobjectholder sandbox, in prbool returnstringonly); native code only!
...cription acaller missing description return value missing description exceptions thrown missing exception missing description debugdump() void debugdump( in short depth ); parameters depth missing description exceptions thrown missing exception missing description debugdumpevalinjsstackframe() void debugdumpevalinjsstackframe( in pruint32 aframenumber, in string asourcetext ); parameters aframenumber missing description asourcetext missing description exceptions thrown missing exception missing description debugdumpjsstack() void debugdumpjsstack( in prbool showargs, in prbool showlocals, in prbool showthisprops ); parameters showargs missing description showlocals missing description showthisprops missing description exception...
... jsval evalinsandboxobject( in astring source, in jscontextptr cx, in nsixpconnectjsobjectholder sandbox, in prbool returnstringonly ); parameters source the source of the script to evaluate.
nsIXULTemplateResult
the result may optionally be identified by an rdf resource.
... generally, the result and its id will be able to uniquely identify a node in the source data, such as an rdf or xml node.
... resource nsirdfresource resource for the result, which may be null.
... if set, the resource uri must be the same as the id property.
Working with data
); // outputs: `"2"` // now this is how to get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctypes.int.array(my.length).ptr).contents; mycasted.tostring(); // this outputs to browser console: `"ctypes.int.array(4)([1, 2, 3, 4])"` mycasted.addressofelement(1).contents; // this outputs `2` mycasted.addressofelement(1).contents.tostring(); // outputs: `"2"` source of this, and to see wrong ways of casting, and explanation on why this is the right way to cast an array (explained by matching constructor's) see here: githubgist :: _ff-addon-tutorial-jsctypes_castingarrays data and pointers a cdata object represents a c value in memory.
... note: the source c string is assumed to be utf-8, and is assumed to be null terminated.
... creating a 64-bit value using a string you can simply pass a string representation of a 64-bit number into the int64 or uint64 constructor, like this: var num1 = ctypes.int64("400000000000"); var num2 = ctypes.uint64("-0x1234567890abcdef"); as you can see, you can use this technique with both decimal and hexadecimal source strings.
... function add(a, b) { const max_int = math.pow(2, 32); var alo = ctypes.uint64.lo(a); var ahi = ctypes.uint64.hi(a); var blo = ctypes.uint64.lo(b); var bhi = ctypes.uint64.hi(b); var lo = alo + blo; var hi = 0; if (lo >= max_uint) { hi = lo - max_uint; lo -= max_uint; } hi += (ahi + bhi); return ctypes.uint64.join(hi, lo); }; this splits each of the two source numbers into their high and low components, then adds the low 32 bits of each, handling carry into the high 32 bits.
CData
method overview methods available on all cdata objects cdata address() string tosource() string tostring() properties properties of all cdata objects property type description constructor ctype the data type of the cdata object, as a ctype.
... tosource() returns the string "t(arg)", where t and arg are implementation-defined javascript expressions intended to represent the type of the cdata object and its value, respectively.
... string tosource() parameters none.
... in theory, in other words, the following javascript expression should return a copy of the original cdata object: eval(dataobject.tosource()); tostring() returns a string identifying the data.
CType
method overview methods available on all ctype objects ctype array([n]) string tosource() string tostring() properties properties of all ctype objects these properties are available on all ctype objects.
... tosource() returns a javascript expression that evaluates to a ctype describing the same c type as this object.
... string tosource(); parameters none.
... example ctypes.uint32_t.tosource() returns "ctypes.uint32_t".
Plug-in Development Overview - Plugins
for this the version stamp of the embedded resource of the plug-in dll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quic...
... the resource code for this language and character set combination is 040904e4.
... note: the resource method described below is deprecated.
... if neither is present, gecko will check the plugins resources.
DOM Inspector internals - Firefox Developer Tools
knowing this about the way viewers are written, we should now be at a place where we can look at the way the dom inspector source is organized.
... source code organization the contents of the top-level directory for the dom inspector repository should look like base/ js/ inspector-cmdline.js makefile.in build/ install.js makefile.in resources/ content/ … locale/ … skin/ … makefile.in install.rdf jar.mn makefile.in makefiles.sh almost all the interesting stuff is in resources/content/.
...(above, seamonkey and firefox, respectively.) there are several overlays from the resources/contents/ directory that do not fall into the category of host-integration overlays.
...the preference menuitems in the view menu that affect only the dom nodes viewer ("blink selected element", et cetera) are added by that viewer's popup overlay (resources/content/viewers/dom/popupoverlay.xul).
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
components.utils.import('resource://gre/modules/jsdebugger.jsm'); adddebuggertoglobal(window); (function () { // the debugger we'll use to observe a tab's allocation.
... function walk(site, children, indent) { var name, place; if (site) { name = site.functiondisplayname; place = ' ' + site.source + ':' + site.line + ':' + site.column; } else { name = '(root)'; place = ''; } console.log(indent + totals.get(site) + ': ' + name + place); for (let [child, grandchildren] of children) walk(child, grandchildren, indent + ' '); } walk(null, rootchildren, ''); } })(); in the scratchpad, ensure that no text is selected, and press the...
...after the count, we see the function name, and the source code location of the call site or allocation.
...(it is unclear why spanfactory allocated thirteen objects, despite being called only ten times.) source metadata generated from file: js/src/doc/debugger/tutorial-alloc-log-tree.md watermark: sha256:b56f6df61c39dbe19ca1f49752aea42207c804355513f4fea8249bdeb4cb056d changeset: 251fccc1f62b ...
Examine and edit HTML - Firefox Developer Tools
::before and ::after you can inspect pseudo-elements added using ::before and ::after: custom element definition when you open the inspector on a page that includes custom elements, you can view the class definition for the custom element in the debugger: inspect the element click on the word custom the source for the element's class will be displayed in the debugger.
...clicking the "reveal" link will highlight the element with the slot attribute as it exists outside the shadow dom this is very useful when you've got a <slot> element and you can't find the source of its content.
... open file in debugger (only when invoked over a link to a js source) opens the linked source in the debugger.
... open file in style-editor (only when invoked over a link to a css source) opens the linked source in the style editor.
AnalyserNode.getFloatFrequencyData() - Web APIs
analyser = audioctx.createanalyser(); // float32array should be the same length as the frequencybincount const mydataarray = new float32array(analyser.frequencybincount); // fill the float32array with data returned from getfloatfrequencydata() analyser.getfloatfrequencydata(mydataarray); drawing a spectrum the following example shows basic usage of an audiocontext to connect a mediaelementaudiosourcenode to an analysernode.
... for more complete applied examples/information, check out our voice-change-o-matic-float-data demo (see the source code too).
... <!doctype html> <body> <script> const audioctx = new audiocontext(); //create audio source //here, we use an audio file, but this could also be e.g.
... microphone input const audioele = new audio(); audioele.src = 'my-audio.mp3';//insert file name here audioele.autoplay = true; audioele.preload = 'auto'; const audiosourcenode = audioctx.createmediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.width = window.innerwidth; canvas.height = window.innerheight; document.body.appendchild(canvas); const canvas...
AudioBuffer.getChannelData() - Web APIs
example in the following example we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode.
...you can also run the code live, or view the source.
...een -1.0 and 1.0 for (var channel = 0; channel < channels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } // get an audiobuffersourcenode.
... // this is the audionode to use when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); } specification specification status comment web audio apithe definition of 'getchanneldata' in that specification.
AudioListener.setPosition() - Web APIs
pannernode objects use this position relative to individual audio sources for spatialisation.
...generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioNode - Web APIs
WebAPIAudioNode
examples include: an audio source (e.g.
... a source node has zero inputs but one or multiple outputs, and can be used to generate sound.
...for example, if your graph has a latency of 500ms, when the source node plays a sound, it will take half a second until that sound can be heard on your speakers (or even longer because of latency in the underlying audio device).
...source nodes are defined as nodes having a numberofinputs property with a value of 0.
BaseAudioContext.createGain() - Web APIs
syntax var gainnode = audiocontext.creategain(); return value a gainnode which takes as input one or more audio sources and outputs audio whose volume has been adjusted in gain (volume) to a level specified by the node's gainnode.gain a-rate parameter.
... the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmedias...
...treamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...
...if you still hear something, make sure you haven't // connected your source into the output in addition to using the gainnode.
DOMPoint.fromPoint() - Web APIs
the static dompoint method frompoint() creates and returns a new mutable dompoint object given a source point.
... the source point is specified as a dompointinit-compatible object, which includes both dompoint and dompointreadonly.
... syntax var point = dompoint.frompoint(sourcepoint); properties sourcepoint a dompointinit-compliant object, which includes both dompoint and dompointreadonly, from which to take the values of the new point's properties.
... return value a new dompoint object whose coordinate and perspective values are identical to those in the source point.
DOMPointReadOnly.fromPoint() - Web APIs
the static dompointreadonly method frompoint() creates and returns a new dompointreadonly object given a source point.
... the source point is specified as a dompointinit-compatible object, which includes both dompoint and dompointreadonly.
... syntax const point = dompointreadonly.frompoint(sourcepoint) properties sourcepoint a dompointinit-compliant object, which includes both dompoint and dompointreadonly, from which to take the values of the new point's properties.
... return value a new dompointreadonly object (which is identical to the source point).
DisplayMediaStreamConstraints.audio - Web APIs
likely sources are the computer's system audio output and the user's microphone, but there is no way to specify which source to use.
... if a boolean is specified, a value of true indicates that an audio track should be included in the stream returned by getdisplaymedia(), if an appropriate audio source exists and the user agent supports audio on display media.
... if a mediatrackconstraints object is given, and an audio source is available, an audio track matching the settings given in the constraints object is included in the mediastream returned by getdisplaymedia().
... if no audio source is available, or the user agent doesn't support audio tracks with getdisplaymedia(), the returned mediastream has no audio track, but no error occurs.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
in fact, much of our source code is full of these whitespace characters, and we only tend to get rid of it in a production build step to reduce code download sizes.
... </h1> this source code contains a couple of line feeds after the doctype and a bunch of space characters before, after, and inside the <h1> element, but the browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters didn’t exist at all: this is so that whitespace characters don't impact the layout of your page.
...the browser engine has essentially ignored all of the whitespace that was added in the source code.
...} or you could set negative margin on the list items: li { display: inline-block; width: 2rem; height: 2rem; margin-right: -0.25rem; } you can also solve this problem by putting your list items all on the same line in the source, which causes the whitespace nodes to not be created in the first place: <li></li><li></li><li></li><li></li><li></li> dom traversal and whitespace when trying to do dom manipulation in javascript, you can also encounter problems because of whitespace nodes.
Using Fetch - Web APIs
it also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
...the simplest use of fetch() takes one argument — the path to the resource you want to fetch — and returns a promise containing the response (a response object).
... fetch requests are controlled by the connect-src directive of content security policy rather than the directive of the resources it's retrieving.
...ers.jpg') .then(response => { if (!response.ok) { throw new error('network response was not ok'); } return response.blob(); }) .then(myblob => { myimage.src = url.createobjecturl(myblob); }) .catch(error => { console.error('there has been a problem with your fetch operation:', error); }); supplying your own request object instead of passing a path to the resource you want to request into the fetch() call, you can create a request object using the request() constructor, and pass that in as a fetch() method argument: const myheaders = new headers(); const myrequest = new request('flowers.jpg', { method: 'get', headers: myheaders, mode: 'cors', cache: 'default', }); fetch(myrequest) .then(response => response.blob()) .then(myblob => { myim...
FileReaderSync.readAsArrayBuffer() - Web APIs
exceptions the following exceptions can be raised by this method: notfounderror is raised when the resource represented by the dom file or blob cannot be found, e.g.
... securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the web (like it is a system file).
... notreadableerror is raised when the resource cannot be read due to a permission problem, like a concurrent lock.
... encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser.
FileReaderSync.readAsBinaryString() - Web APIs
exceptions the following exceptions can be raised by this method: notfounderror is raised when the resource represented by the dom file or blob cannot be found, e.g.
... securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the web (like it is a system file).
... notreadableerror is raised when the resource cannot be read due to a permission problem, like a concurrent lock.
... encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser.
FileReaderSync.readAsDataURL() - Web APIs
exceptions the following exceptions can be raised by this method: notfounderror is raised when the resource represented by the dom file or blob cannot be found, e.g.
... securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the web (like it is a system file).
... notreadableerror is raised when the resource cannot be read due to a permission problem, like a concurrent lock.
... encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser.
FileReaderSync.readAsText() - Web APIs
exceptions the following exceptions can be raised by this method: notfounderror is raised when the resource represented by the dom file or blob cannot be found, e.g.
... securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the web (like it is a system file).
... notreadableerror is raised when the resource cannot be read due to a permission problem, like a concurrent lock.
... encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser.
GlobalEventHandlers.onerror - Web APIs
when a resource (such as an <img> or <script>) fails to load, an error event using interface event is fired at the element that initiated the load, and the onerror() handler on the element is invoked.
... window.onerror window.onerror = function(message, source, lineno, colno, error) { ...
... 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.
... else { var message = [ 'message: ' + msg, 'url: ' + url, 'line: ' + lineno, 'column: ' + columnno, 'error object: ' + json.stringify(error) ].join(' - '); alert(message); } return false; }; when using the inline html markup (<body onerror="alert('an error occurred')">), the html specification requires arguments passed to onerror to be named event, source, lineno, colno, error.
HTMLEmbedElement - Web APIs
htmlembedelement.height is a domstring reflecting the height html attribute, containing the displayed height of the resource.
... htmlembedelement.src is a domstring that reflects the src html attribute, containing the address of the resource.
... htmlembedelement.type is a domstring that reflects the type html attribute, containing the type of the resource.
... htmlembedelement.width is a domstring that reflects the width html attribute, containing the displayed width of the resource.
HTMLMediaElement.load() - Web APIs
the htmlmediaelement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning.
... this method is generally only useful when you've made dynamic changes to the set of sources available for the media element, either by changing the element's src attribute or by adding or removing <source> elements nested within the media element itself.
... load() will reset the element and rescan the available sources, thereby causing the changes to take effect.
... usage notes calling load() aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the <audio> or <video> element and its src attribute or child <source> element(s).
IDBCursor.direction - Web APIs
possible values are: value description next this direction causes the cursor to be opened at the start of the source.
... nextunique this direction causes the cursor to be opened at the start of the source.
... prev this direction causes the cursor to be opened at the end of the source.
... prevunique this direction causes the cursor to be opened at the end of the source.
InterventionReportBody - Web APIs
sourcefile a string containing the path to the source file where the intervention occurred, if known, or null otherwise.
... linenumber a number representing the line in the source file in which the intervention occurred, if known, or null otherwise.
... columnnumber a number representing the column in the source file in which the intervention occurred, if known, or null otherwise.
... examples let options = { types: ['intervention'], buffered: true } let observer = new reportingobserver(function(reports, observer) { let firstreport = reports[0]; console.log(firstreport.type); // intervention console.log(firstreport.body.id); console.log(firstreport.body.message); console.log(firstreport.body.sourcefile); console.log(firstreport.body.linenumber); console.log(firstreport.body.columnnumber); }, options); specifications specification status comment reporting apithe definition of 'interventionreportbody' in that specification.
MediaConfiguration - Web APIs
for decoding, set the type to file or media-source.
... media-source: for media source files.
... example //create a video configuration to be tested const videodecoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
... } }; const audioencoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaDevices.getUserMedia() - Web APIs
that stream can include, for example, a video track (produced by either a hardware or virtual video source such as a camera, video recording device, screen sharing service, and so forth), an audio track (similarly, produced by a physical or virtual audio source like a microphone, a/d converter, or the like), and possibly other track types.
... notallowederror one or more of the requested source devices cannot be used at this time.
...on browsers that support managing media permissions with feature policy, this error is returned if feature policy is not configured to allow access to the input source(s).
... document source security because of the obvious security concern associated with getusermedia() if used unexpectedly or without security being carefully managed, it can only be used in secure contexts.
MediaError.code - Web APIs
WebAPIMediaErrorcode
media error code constants name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request.
... media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.
... media_err_src_not_supported 4 the associated resource or media provider object (such as a mediastream) has been found to be unsuitable.
... example this example creates a <video> element, establishes an error handler for it, and then sets the element's src attribute to the video resource to present in the element.
MediaRecorder.onerror - Web APIs
this exception can also occur when a request is made on a source that has been deleted or removed.
...this may be the case, for example, with sources obtained using getusermedia() when the user denies permission to use an input device.
... this also happens when a mediastreamtrack within the stream is marked as isolated due to the peeridentity constraint on the source stream.
...try again later."); break; case securityerror: shownotification("recording the specified source " + "is not allowed due to security " + "restrictions."); break; default: shownotification("a problem occurred while trying " + "to record the video."); break; } }; /* this would be a good place to create a worker to handle writing the buffers to disk periodically */ recorder.
MediaTrackConstraints.facingMode - Web APIs
"user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
... "environment" the video source is facing away from the user, thereby viewing their environment.
... "left" the video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
... "right" the video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.
MediaTrackSettings.facingMode - Web APIs
"user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
... "environment" the video source is facing away from the user, thereby viewing their environment.
... "left" the video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
... "right" the video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.
MediaTrackSettings.groupId - Web APIs
the mediatracksettings dictionary's groupid property is a browsing-session unique domstring which identifies the group of devices which includes the source for the mediastreamtrack.
... syntax var groupid = mediatracksettings.groupid; value a domstring whose value is a browsing-session unique identifier for a group of devices which includes the source of the track's contents.
...for example, a headset has two devices on it: a microphone which can serve as a source for audio tracks and a speaker which can serve as an output for audio.
... the actual value of the string, however, is determined by the source of the track, and there is no guarantee what form it will take, although the specification does recommend it be a guid.
Navigator.mozIsLocallyAvailable() - Web APIs
the navigator.mozislocallyavailable() method allows add-ons to determine whether or not a given resource is available.
... syntax navigator.mozislocallyavailable(uri, ifoffline); parameters uri the uri of the resource whose availability is to be checked, as a string.
... ifoffline allows you to specify whether or not the offline resources cache should be checked; specify true to consider the offline resources cache.
... example var available = navigator.mozislocallyavailable("my-image-file.png", true); if (available) { /* the offline resource is present */ } else { console.log("certain needed resources are not available offline"); } specifications not part of any specifications.
OfflineAudioContext.startRendering() - Web APIs
we use the audiocontext to load an audio track via xhr (audiocontext.decodeaudiodata), then the offlineaudiocontext to render the audio into an audiobuffersourcenode and play the track through.
... at this point we create another audio context, create an audiobuffersourcenode inside it, and set its buffer to be equal to the promise audiobuffer.
... note: for a working example, see our offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.c...
...onnect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.startrendering().then(function(renderedbuffer) { console.log('rendering completed successfully'); var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var song = audioctx.createbuffersource(); song.buffer = renderedbuffer; song.connect(audioctx.destination); play.onclick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications ...
OfflineAudioContext - Web APIs
we use the audiocontext to load an audio track via xhr (audiocontext.decodeaudiodata), then the offlineaudiocontext to render the audio into an audiobuffersourcenode and play the track through.
... at this point we create another audio context, create an audiobuffersourcenode inside it, and set its buffer to be equal to the promise audiobuffer.
... note: for a working example, see our offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.c...
...onnect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.startrendering().then(function(renderedbuffer) { console.log('rendering completed successfully'); var song = audioctx.createbuffersource(); song.buffer = renderedbuffer; song.connect(audioctx.destination); play.onclick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications specification status comment web audio apithe definition of 'of...
PannerNode.distanceModel - Web APIs
the distancemodel property of the pannernode interface is an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
...generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
PannerNode.maxDistance - Web APIs
the maxdistance property of the pannernode interface is a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further.
...generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
PannerNode.setOrientation() - Web APIs
the setorientation() method of the pannernode interface defines the direction the audio source is playing in.
...generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
PannerNode.setPosition() - Web APIs
the setposition() method of the pannernode interface defines the position of the audio source relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) the three parameters x, y and z are unitless and describe the source's position in 3d space using the right-hand cartesian coordinate system.
...generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
PannerNode.setVelocity() - Web APIs
the setvelocity() method of the pannernode interface defines the velocity vector of the audio source — how fast it is moving and in what direction.
...generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
PerformanceTiming - Web APIs
if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart.
...if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart.
... performancetiming.responsestart read only when the browser received the first byte of the response, from the server from a cache, or from a local resource.
... performancetiming.responseend read only when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server, the cache, or from a local resource.
RTCPeerConnection - Web APIs
n.methodsalso inherits methods from: eventtargetaddicecandidate()when a web site or app using rtcpeerconnection receives a new ice candidate from the remote peer over its signaling channel, it delivers the newly-received candidate to the browser's ice agent by calling rtcpeerconnection.addicecandidate().addstream() the obsolete rtcpeerconnection method addstream() adds a mediastream as a local source of audio or video.
...the answer is delivered to the returned promise, and should then be sent to the source of the offer to continue the negotiation process.createdatachannel() the createdatachannel() method on the rtcpeerconnection interface creates a new channel linked with the remote peer, over which any kind of data may be transmitted.createoffer()the createoffer() method of the rtcpeerconnection interface initiates the creation of an sdp offer for the purpose of starting a new webrtc connection t...
...if no stream matches, it returns null.gettransceivers()the rtcpeerconnection interface's gettransceivers() method returns a list of the rtcrtptransceiver objects being used to send and receive data on the connection.removestream() the rtcpeerconnection.removestream() method removes a mediastream as a local source of audio or video.
...a track is isolated if its content cannot be accessed by the owning document due to lack of authentication or if the track comes from a cross-origin source.
RTCRtpSender.replaceTrack() - Web APIs
the rtcrtpsender method replacetrack() replaces the track currently being used as the sender's source with a new mediastreamtrack.
... syntax trackreplacedpromise = sender.replacetrack(newtrack); parameters newtrack optional a mediastreamtrack specifying the track with which to replace the rtcrtpsender's current source track.
... media sources that have built-in encoders — such as hardware encoders — may not be able to provide the negotiated codec.
... software sources may not implement the negotiated codec.
RTCRtpStreamStats.ssrc - Web APIs
the rtcrtpstreamstats dictionary's ssrc property provides the synchronization source (ssrc), an integer which uniquely identifies the source of the rtp packets whose statistics are covered by the rtcstatsreport that includes this rtcrtpstreamstats dictionary.
... syntax var ssrc = rtcrtpstreamstats.ssrc; value the synchronization source (ssrc) is a 32-bit integer uniquely identifying the source of the rtp packets whose statistics are covered by the rtcstatsreport object of which this rtcrtpstreamstats object is a component.
...you should not make any assumptions based on the value of ssrc other than that any two objects with the same ssrc value refer to the same source.
...do not rely upon these values meaning anything other than "these objects are associated with the same source." specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.ssrc' in that specification.
ReadableStream.ReadableStream() - Web APIs
syntax var readablestream = new readablestream(underlyingsource[, queuingstrategy]); parameters underlyingsource an object containing methods and properties that define how the constructed stream instance will behave.
... underlyingsource can contain the following: start(controller) this is a method, called immediately when the object is constructed.
... the contents of this method are defined by the developer, and should aim to get access to the stream source, and do anything else required to set up the stream fuctionality.
...the contents should do whatever is necessary to release access to the stream source.
Request() - Web APIs
WebAPIRequestRequest
syntax var myrequest = new request(input[, init]); parameters input defines the resource that you wish to fetch.
... 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.
... integrity: contains the subresource integrity value of the request (e.g., sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=).
Service Worker API - Web APIs
it takes the form of a javascript file that can control the web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available).
... responding to resource requests from other origins.
... performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album.
... navigationpreloadmanager provides methods for managing the preloading of resources with a service worker.
StereoPannerNode.pan - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a slider <input> to increase and decrease pan value.
... in the javascript we create a mediaelementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = panc...
...ontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'pan' in that specification.
StereoPannerNode - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a slider <input> to increase and decrease pan value.
... in the javascript we create a mediaelementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = panc...
...ontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'stereopannernode' in that specification.
SubtleCrypto.sign() - Web APIs
WebAPISubtleCryptosign
see the complete source code on github.
...see the complete source code on github.
...see the complete source code on github.
...see the complete source code on github.
TrackDefault - Web APIs
the trackdefault interface provides a sourcebuffer with kind, label, and language information for tracks that do not contain this information in the initialization segments of a media chunk.
... a trackdefault object is provided to a sourcebuffer object by setting its sourcebuffer.trackdefaults property.
... properties trackdefault.type read only returns the type of track that this sourcebuffer's media segment data relates to (i.e.
... audio, video, or text track.) trackdefault.bytestreamtrackid read only returns the id of the specific track that the sourcebuffer should apply to.
WebGLShader - Web APIs
description to create a webglshader use webglrenderingcontext.createshader, then hook up the glsl source code using webglrenderingcontext.shadersource(), and finally invoke webglrenderingcontext.compileshader() to finish and compile the shader.
... function createshader (gl, sourcecode, type) { // compiles either a shader of type gl.vertex_shader or gl.fragment_shader var shader = gl.createshader( type ); gl.shadersource( shader, sourcecode ); gl.compileshader( shader ); if ( !gl.getshaderparameter(shader, gl.compile_status) ) { var info = gl.getshaderinfolog( shader ); throw 'could not compile webgl program.
... examples creating a vertex shader note that there are many other strategies for writing and accessing shader source code strings.
... var vertexshadersource = 'attribute vec4 position;\n' + 'void main() {\n' + ' gl_position = position;\n' + '}\n'; //use the createshader function from the example above var vertexshader = createshader(gl, vertexshadersource, gl.vertex_shader) creating a fragment shader var fragmentshadersource = 'void main() {\n' + ' gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0);\n' + '}\n'; //use the createshader function from the example above var fragmentshader = createshader(gl, fragmentshadersource, gl.fragment_shader) specifications specification status comment webgl 1.0the definition of 'webglshader' in that specification.
Using textures in WebGL - Web APIs
at that point we again call teximage2d() this time using the image as the source for the texture.
... const vssource = ` attribute vec4 avertexposition; attribute vec2 atexturecoord; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying highp vec2 vtexturecoord; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; } `; the key change here is that instead of fetching the vertex color,...
... the fragment shader the fragment shader likewise needs to be updated: const fssource = ` varying highp vec2 vtexturecoord; uniform sampler2d usampler; void main(void) { gl_fragcolor = texture2d(usampler, vtexturecoord); } `; instead of assigning a color value to the fragment's color, the fragment's color is computed by fetching the texel (that is, the pixel within the texture) based on the value of vtexturecoord which like the colors is interpolated bewteen vertices.
...this means that using a cross-domain image with cors approval does no longer taint the 2d canvas, so the 2d canvas remains usable as the source of a webgl texture.
WebGL best practices - Web APIs
eagerly lose contexts too webgl_lose_context.losecontext() can be used to release a webgl context and its resources eagerly.
...the cap also must typically be updated as the browser window resizes, and older resources above the limit must be purged.
...s under "error handling": the implementation should report errors as early a possible but in any case must satisfy the following: all lexical, grammatical and semantic errors must have been detected following a call to gllinkprogram errors due to mismatch between the vertex and fragment shader (link errors) must have been detected following a call to gllinkprogram errors due to exceeding resource limits must have been detected following any draw call or a call to glvalidateprogram a call to glvalidateprogram must report all errors associated with a program object given the current gl state.
... however, for 2d resources that are never "zoomed out", don't pay the 30% memory surcharge for mipmaps: const tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); gl.texparameterf(gl.texture_2d, gl.texture_min_filter, gl.linear); // defaults to nearest_mipmap_linear, for mipmapping!
WebRTC API - Web APIs
rtcrtpcontributingsource contains information about a given contributing source (csrc) including the most recent time a packet that the source contributed was played out.
... resources protocols webrtc-proper protocols application layer protocol negotiation for web real-time communications webrtc audio codec and processing requirements rtcweb data channels rtcweb data channel protocol web real-time communication (webrtc): media transport and use of rtp webrtc security architecture transports for rtcweb related supporting protocols interactive connectivity estab...
...lishment (ice): a protocol for network address translator (nat) traversal for offer/answer protocol session traversal utilities for nat (stun) uri scheme for the session traversal utilities for nat (stun) protocol traversal using relays around nat (turn) uniform resource identifiers an offer/answer model with session description protocol (sdp) session traversal utilities for nat (stun) extension for third party authorization webrtc statistics webrtc statistics api specifications specification status comment webrtc 1.0: real-time communication between browsers candidate recommendation the initial definition of the api of webrtc.
... media capture from dom elements working draft the initial definition on how to obtain stream of content from dom elements in additions to these specifications defining the api needed to use webrtc, there are several protocols, listed under resources.
Rendering and the WebXR frame animation callback - Web APIs
these factors, among others, are the source of our depth perception.
...these input sources may include devices such as hand controllers, optical tracking systems, acclerometers and magnetometers, and other devices of that nature.
...thus it's the other kinds of input that you need to handle yourself: pointing device target and button presses gamepad inputs non-xr input device inputs to learn more about how to handle user inputs while presenting a scene using webxr, see the article inputs and input sources.
... another common source of motion is the player themself.
Visualizations with Web Audio API - Web APIs
one of the most interesting features of the web audio api is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations.
... basic concepts to extract data from your audio source, you need an analysernode, which is created using the audiocontext.createanalyser() method, for example: var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); this node is then connected to your audio source at some point between your source and your destination, for example: source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioctx.destination); note: you don't need to connect the analyser's output to another node for it to work, as...
... long as the input is connected to the source, either directly or via another node.
...for working examples showing analysernode.getfloatfrequencydata() and analysernode.getfloattimedomaindata(), refer to our voice-change-o-matic-float-data demo (see the source code too) — this is exactly the same as the original voice-change-o-matic, except that it uses float data, not unsigned byte data.
HTML in XMLHttpRequest - Web APIs
this feature allows web apps to obtain an html resource as a parsed dom using xmlhttprequest.
...this limitation avoids wasting time parsing html uselessly when legacy code uses xmlhttprequest in the default mode to retrieve responsetext for text/html resources.
... usage retrieving an html resource as a dom using xmlhttprequest works just like retrieving an xml resource as a dom using xmlhttprequest, except you can't use the synchronous mode and you have to explicitly request a document by assigning the string "document" to the responsetype property of the xmlhttprequest object after calling open() but before calling send().
...for older browsers, you can even use the xmlhttprequest.responsetext property in association with regular expressions in order to get, for example, the source code of an html element given its id: function gethtml (oxhr, stargetid) { var ropen = new regexp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + stargetid + "[\"\'][^>]*>" ,"i"), ssrc = oxhr.responsetext, aexec = ropen.exec(ssrc); return aexec ?
XRHandedness - Web APIs
xrhandedness is used as the value of the the xrinputsource property handedness.
... function updateinputsources(session, frame, refspace) { for (let source of session.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothne...
...ss required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null.
... if a gripspace is present, that means the input source is a hand-held device of some sort, so it should be rendered visibly if possible.
XRPose.emulatedPosition - Web APIs
the emulatedposition read-only attribute of the xrpose interface is a boolean value indicating whether or not both the the position component of the pose's transform is directly taken from the xr device, or it's simulated or computed based on other sources.
... syntax let emulated = xrpose.emulatedposition; value a boolean which is true if the pose's position is computed based on estimates or is derived from sources other than direct sensor data.
...any such data is taken from other sources, such as keyboard or mouse inputs or game controllers.
... contrariwise, xr devices which can also track movement forward and backward as well as laterally—six degree of freedom (6dof) devices—don't require any information from other sources to determine the user's position, so the value of emulatedposition is false.
XRSession.onsqueeze - Web APIs
to learn more about how to use and handle webxr controller inputs, see inputs and input sources.
...this is determined by comparing the input source's handedness against the value of a handedness property on a user object we've established previously.
... xrsession.onsqueeze = event => { if (event.inputsource.handedness != user.handedness) { handleoffhandsqueeze(event.inputsource, event.frame); } }; finishing an ongoing squeeze action this example exapnds somewhat on the previous example by demonstrating a way to implement the ability for the user to drop an object that was previously picked up by the user..
... xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (user.heldobject && targetraypose) { dropobjectusingray(user.heldobject, targetraypose.transform.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling related to this approach.
XRSession: select event - Web APIs
the webxr event select is sent to an xrsession when one of the session's input sources has completed a primary action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselect for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... xrsession.addeventlistener("select", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource...
....targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'select event' in that specification.
XRSession: squeeze event - Web APIs
the webxr event squeeze is sent to an xrsession when one of the session's input sources has completed a primary squeeze action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueeze for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources.
... xrsession.addeventlistener("squeeze", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsqueeze event handler property to a function that...
... handles the event: xrsession.onsqueeze = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'squeeze event' in that specification.
Perceivable - Accessibility
success criteria how to conform to the criteria practical resource 1.1.1 provide text equivalents (a) all images that convey meaningful content should be given suitable alternative text.
... success criteria how to conform to the criteria practical resource 1.2.1 provide alternatives for pre-recorded audio-only and video-only content (a) a transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e., silent video).
... success criteria how to conform to the criteria practical resource 1.3.1 info and relationships (a) any content structure—or visual relationship made between content—can also be determined programmatically, or be inferred from text description.
... success criteria how to conform to the criteria practical resource 1.4.1 use of color (a) color should not be solely relied upon to convey information.
clip-path - CSS: Cascading Style Sheets
WebCSSclip-path
the source for this interactive example is stored in a github repository.
... 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 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'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* glob...
... 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'> ]?
mask-border-slice - CSS: Cascading Style Sheets
the mask-border-slice css property divides the image set by mask-border-source into regions.
...for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
... <percentage> represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.
...when it eventually starts to be supported, it will serve to define the size of the slices taken from the source image, and used to create the border mask.
mask-mode - CSS: Cascading Style Sheets
WebCSSmask-mode
/* keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* multiple values */ mask-mode: alpha, match-source; /* global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset; syntax the mask-mode property is specified as one or more of the keyword values listed below, separated by commas.
... match-source if the mask-image property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values.
... formal definition initial valuematch-sourceapplies 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">luminan...
...ce</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-mode' in that specification.
url() - CSS: Cascading Style Sheets
WebCSSurl()
depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet.
... /* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* ...
... the url() function can be included as a value for background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls.
... syntax values <string> <url> a url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes.
<url> - CSS: Cascading Style Sheets
WebCSSurl
the <url> css data type denotes a pointer to a resource, such as an image or a font.
...a uri simply identifies a resource.
... a url is a type of uri, and describes the location of a resource.
... a uri can be either a url or a name (urn) of a resource.
white-space - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
...newline characters in the source are handled the same as other white space.
... nowrap collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
...lines are only broken at newline characters in the source and at <br> elements.
Introduction to Web development - Developer guides
for another (overlapping) set of links to learning resources, see the mdn learning pages.
... note: the recommended resources on this page are subject to change.
... resources w3c web education community group wiki covers web design, html and html5, css, javascript and accessibility.
... jquery fundamentals an open-source reference book featuring detailed introductions to both javascript and jquery for beginners.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
the source for this interactive example is stored in a github repository.
...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.
... external links and linking to non-html resources links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.
... link that opens a new tab/window <a target="_blank" href="https://www.wikipedia.org"> wikipedia (opens in new tab) </a> link to a non-html resource <a href="2017-annual-report.ppt"> 2017 annual report (powerpoint) </a> if an icon is used to signify link behavior, make sure it has alt text: <a target="_blank" href="https://www.wikipedia.org"> wikipedia <img alt="(opens in new tab)" src="newtab.svg"> </a> <a href="2017-annual-report.ppt"> 2017 annual report <img alt="(powerpoint file)" src="ppt-icon.svg"> </a> webaim: links ...
<dl>: The Description List element - HTML: Hypertext Markup Language
WebHTMLElementdl
the source for this interactive example is stored in a github repository.
... examples single term and description <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> multiple terms, single description <dl> <dt>firefox</dt> <dt>mozilla firefox</dt> <dt>fx</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> single term, multiple descriptions <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
the source for this interactive example is stored in a github repository.
...a value is required or must be check for the form to be submittable size email, password, tel, text size of the control src image same as src attribute for <img>; address of image resource step numeric types incremental values that are valid.
...if they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked.
... once one of the radio buttons in a group has focus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.
Compression in HTTP - HTTP
compression happens at three different levels: first some file formats are compressed with specific optimized methods, then general encryption can happen at the http level (the resource is transmitted compressed from end to end), and finally compression can be defined at the connection level, between two nodes of an http connection.
...as content negotiation has been used to choose a representation based on its encoding, the server must send a vary header containing at least accept-encoding alongside this header in the response; that way, caches will be able to cache the different representations of the resource.
... hop-by-hop compression hop-by-hop compression, though similar to end-to-end compression, differs by one fundamental element: the compression doesn't happen on the resource in the server, creating a specific representation that is then transmitted, but on the body of the message between any two nodes on the path between the client and the server.
...te and transfer-encoding are mostly used to send a response by chunks, allowing to start transmitting a resource without knowing its length.
Connection management in HTTP/1.x - HTTP
this simple model held an innate limitation on performance: opening each tcp connection is a resource-consuming operation.
... persistent connections also have drawbacks; even when idling they consume server resources, and under heavy load, dos attacks can be conducted.
... pipelining is complex to implement correctly: the size of the resource being transferred, the effective rtt that will be used, as well as the effective bandwidth, have a direct incidence on the improvement provided by the pipeline.
...for example, instead of having all resources on the same domain, say www.example.com, it could split over several domains, www1.example.com, www2.example.com, www3.example.com.
Content-Security-Policy-Report-Only - HTTP
content-security-policy: default-src https:; report-uri /csp-violation-report-endpoint/ violation report syntax the report json object contains the following data: blocked-uri the uri of the resource that was blocked from loading by the content security policy.
... status-code the http status code of the resource on which the global object was instantiated.
...p-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/css/style.css", "violated-directive": "style-src cdn.example.com", "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports", "disposition": "report" } } as you can see, the report includes the full path to the violating resource in blocked-uri.
...this is done to prevent leaking sensitive information about cross-origin resources.
Timing-Allow-Origin - HTTP
the timing-allow-origin response header specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions.
... header type response header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources.
... <origin> specifies a uri that may see the timing resources.
... examples to allow any resource to see timing resources: timing-allow-origin: * to allow https://developer.mozilla.org to see timing resources, you can specify: timing-allow-origin: https://developer.mozilla.org specifications specification status comment resource timing level 3the definition of 'timing-allow-origin' in that specification.
About JavaScript - JavaScript
in), and source code recovery (javascript programs can decompile function bodies back into their source text).
... for a more in depth discussion of javascript programming follow the javascript resources links below.
... javascript resources spidermonkey information specific to mozilla's implementation of javascript in c/c++ engine (aka spidermonkey), including how to embed it in applications.
... language resources pointers to published javascript standards.
Planned changes to shared memory - JavaScript
no further changes are needed for same-origin nested documents and subresources.
... same-site (but cross-origin) nested documents and subresources will need to set the cross-origin-resource-policy header with same-site as value.
...note that setting the cross-origin-resource-policy header to any other value than same-origin opens up the resource to potential attacks, such as spectre.
... cross-origin-resource-policy: standardized in fetch, new cross-origin value is part of the cross-origin-embedder-policy effort.
WebAssembly.compileStreaming() - JavaScript
the webassembly.compilestreaming() function compiles a webassembly.module directly from a streamed underlying source.
... syntax promise<webassembly.module> webassembly.compilestreaming(source); parameters source a response object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream and compile.
... exceptions if buffersource is not a typed array, a typeerror is thrown.
... examples compile streaming the following example (see our compile-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles it to a webassembly.module object.
WebAssembly.validate() - JavaScript
syntax webassembly.validate(buffersource); parameters buffersource a typed array or arraybuffer containing webassembly binary code to be validated.
... return value a boolean that specifies whether buffersource is valid wasm code (true) or not (false).
... exceptions if buffersource is not a typed array or arraybuffer, a typeerror is thrown.
... examples using validate the following example (see the validate.html source code, and see it live too) fetches a .wasm module and converts it into a typed array.
decodeURI() - JavaScript
the decodeuri() function decodes a uniform resource identifier (uri) previously created by encodeuri() or by a similar routine.
... the source for this interactive example is stored in a github repository.
... syntax decodeuri(encodeduri) parameters encodeduri a complete, encoded uniform resource identifier.
... return value a new string representing the unencoded version of the given encoded uniform resource identifier (uri).
decodeURIComponent() - JavaScript
the decodeuricomponent() function decodes a uniform resource identifier (uri) component previously created by encodeuricomponent or by a similar routine.
... the source for this interactive example is stored in a github repository.
... syntax decodeuricomponent(encodeduri) parameters encodeduri an encoded component of a uniform resource identifier.
... return value a new string representing the decoded version of the given encoded uniform resource identifier (uri) component.
Autoplay guide for media and Web Audio APIs - Web media technologies
autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted.
... example: the autoplay attribute an <audio> element using the autoplay attribute might look like this: <audio id="musicplayer" autoplay> <source src="/music/chapter1.mp4"> </audio> example 2: detecting autoplay failure if you rely on autoplay for anything important, or if autoplay failure will impact your app in any way, you will probably want to be able to tell when it autoplay didn't begin.
... autoplay using the web audio api in the web audio api, a web site or app can start playing audio using the start() method on a source node linked to the audiocontext.
... feature-policy: autoplay 'self'; fullscreen the same permissions, grated using the <iframe> element's allow property, look like this: <iframe src="mediaplayer.html" allow="autoplay 'src'; fullscreen"> </iframe> example: allowing autoplay from specific sources the feature-policy header to allow media to be played from both the document's (or <iframe>'s) own domain and https://example.media looks like this: feature-policy: autoplay 'self' https://example.media an <iframe> can be written to specify that this autoplay policy should be applied to itself and any child frames would be written thusly: <iframe width="300" height="200" src="mediapl...
Web media technologies
<source> the html <source> element is used within an <audio> or <video> element to specify source media to present.
... multiple sources can be used to provide the media in different formats, sizes, or resolutions.
... accessible from javascript as htmlsourceelement objects.
... positional audio in a 3d environment in 3d environments, which may either be 3d scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source.
Structural overview of progressive web apps - Progressive web apps (PWAs)
the app shell model requires all the resources to be available before the website can start rendering.
...you can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa"> fork js13kpwa on github</a> to check its source code.</p> <button id="notifications">request dummy notifications</button> <section id="content"> // content inserted in here </section> </main> <footer> <p>© js13kgames 2012-2018, created and maintained by <a href="http://end3r.com"> andrzej mazur</a> from <a href="http://enclavegames.com">enclave games</a>.</p> </footer> </body> </html> the <head> section contains basic informati...
...enttocache); }) ); }); 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 provided in a javascript source file called games.js.
xlink:href - SVG: Scalable Vector Graphics
the xlink:href attribute defines a reference to a resource as a reference iri.
... value <iri> default value none animatable no color-profile for <color-profile>, xlink:href defines the location of an icc profile resource.
... value <funciri> default value none animatable yes feimage for <feimage>, xlink:href defines the reference to the image source.
... value <iri> default value none animatable yes script for <script>, xlink:href defines a reference to an external resource containing the script code.
z - SVG: Scalable Vector Graphics
WebSVGAttributez
the z attribute defines the location along the z-axis for a light source in the coordinate system established by the primitiveunits attribute on the <filter> element, assuming that, in the initial coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.
... two elements are using this attribute: <fepointlight> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" 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.
... value <number> default value 1 animatable yes fespotlight for <fespotlight>, 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.
Content type - SVG: Scalable Vector Graphics
iri <iri> an internationalized resource identifier.
... on the internet, resources are identified using iris (internationalized resource identifiers).
... url url a uniform resource locator.
... a url is a sequence of unicode characters, building an address to an internal or external resource.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels.
... the basic convolution formula which is applied to each color value for a given pixel is: colorx,y = ( sum i=0 to [ordery-1] { sum j=0 to [orderx-1] { source x-targetx+j, y-targety+i * kernelmatrixorderx-j-1, ordery-i-1 } } ) / divisor + bias * alphax,y where "orderx" and "ordery" represent the x and y values for the ‘order’ attribute, "targetx" represents the value of the ‘targetx’ attribute, "targety" represents the value of the ‘targety’ attribute, "kernelmatrix" represents the value of the ‘kernelmatrix’ attribute, "divisor" represents the value of the ‘divisor’ attribute, and "bias" represents the value of the ‘bias’ attribute.
... note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
... illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a 3-by-3 convolution kernel as follows: 1 2 3 4 5 6 7 8 9 let's focus on the color value at the second row and second column of the image (source pixel value is 120).
<feSpecularLighting> - SVG: Scalable Vector Graphics
the <fespecularlighting> svg filter primitive lights a source graphic using the alpha channel as a bump map.
...multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.
... usage context categoriesfilter primitive elementpermitted contentexactly one light source element first and any number of descriptive elements in any order.
... example <svg height="200" width="200" viewbox="0 0 220 220" 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.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) ...
...unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svggeometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelemen...
...et distances of text positioned along a transformed path measured in text elements coordinate system implementation status unknown embedded content change notes <video> implementation status unknown <audio> implementation status unknown <iframe> implementation status unknown <canvas> implementation status unknown <source> implementation status unknown <track> implementation status unknown painting change notes paint-order implemented (bug 828805) will-change instead of buffered-rendering implementation status unknown context-fill and context-stroke paint values implemented (bug 719286 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) and ...
...cusout instead of domfocusin and domfocusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes link svg resources with fragment identifiers implementation status unknown xlink:type, xlink:role, xlink:arcrole, xlink:show, and xlink:actuate attributes removed implementation status unknown xlink:href attribute deprecated in favor of href implemented (bug 1245751) xlink:title attribute deprecated in favor of child <title> implementation status unknown spaces in sv...
Testing the Add-on SDK - Archive of obsolete content
from add-on sdk repository with a checkout of the mozilla/addon-sdk repository (or a checkout of the m-c repo and cd into the addon-sdk/source directory) there are many means to run the addon-sdk tests.
... note: you must remember to run source bin/activate in order to enable cfx first.
... from mozilla-central repository with a checkout of the mozilla-central source code, one can always cd addon-sdk/source and use any of the methods described above, but in addtion to that there are a couple of mach commands available, and ofcourse there is the try server if you have access to that.
self - Archive of obsolete content
while not generally of use to add-on code directly, it can be used by internal api code to index local storage and other resources that are associated with a particular add-on.
... data.url(name) the data.url() method returns a resource:// url that points at an embedded data file.
... returns string : resource:// url pointing to the given location under data.
lang/type - Archive of obsolete content
source(value, indent, limit) returns the textual representation of value, containing property descriptors and types of properties contained within the object.
... let { source } = require('sdk/lang/type'); var obj = { name: undefined, twitter: '@horse_js', tweets: [ { id: 100, text: 'what happens to you if you break the monad laws?' }, { id: 101, text: 'javascript dubstep generator' } ] }; console.log(source(obj)); // prints the below /* { // [object object] // writable configurable enumerable name: undefined, // writable configurable enumerable twitter: "@horse_js", // writable configurable enumerable tweets: [ { // [object object] // writable configurable enumerable id: 100, // writable configurable enumerable text: "what happens to you if you break the monad laws?", "__proto__": { // [object object] } }, { // [obj...
...ect object] // writable configurable enumerable id: 101, // writable configurable enumerable text: "javascript dubstep generator", "__proto__": { // [object object] } } ], "__proto__": { // [object object] } } */ parameters value : mixed the source object to create a textual representation of.
loader/sandbox - Archive of obsolete content
load(scope, 'resource://path/to/my/script.js'); load(scope, 'file:///path/to/script.js'); load(scope, 'data:,var a = 5;'); globals functions sandbox(source) make a new sandbox that inherits principals from source.
... parameters source : string|window|null an object that determines the privileges that will be given to the sandbox.
...it must be a local chrome:, resource:, file: or data: url.
window/utils - Archive of obsolete content
only chrome, resource, and data schemes are accepted.
...in particular: null: get all window types navigator:browser: get "normal" browser windows devtools:scratchpad: get scratchpad windows navigator:view-source: get view source windows if you're not also passing options, you can omit this, and it's the same as passing null.
...this means that its "load" event has been fired and all content is loaded, including the whole dom document, images, and any other sub-resources.
Creating Event Targets - Archive of obsolete content
then open "index.js" and add the following code: var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { console.log("added ", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { console.log("vi...
... create a new file in "lib" called "bookmarks.js", and add the following code: var { emit, on, once, off } = require("sdk/event/core"); var {cc, ci} = require("chrome"); var { xpcomutils }= require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { emit(exports, "added", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { emit(exports, ...
... open "bookmarks.js" and replace its contents with this code: var { emit } = require("sdk/event/core"); var { eventtarget } = require("sdk/event/target"); var { class } = require("sdk/core/heritage"); var { merge } = require("sdk/util/object"); var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); function createobserver(target) { var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { emit(target, "added", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: functi...
Adding sidebars - Archive of obsolete content
we would use data from a datasource such as a database or a remote api.
...this is why most of the uses of the tree element are for displaying data from an external datasource.
...this topic will be covered later when we look at different kinds of datasources and templates.
JavaScript Object Management - Archive of obsolete content
the first thing you need to do is add an entry in the chrome.manifest file: resource xulschoolhello modules/ javascript code modules are accessed with the resource protocol, which is very similar to the chrome protocol.
...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.
Performance best practices in extensions - Archive of obsolete content
if your extension has features that only work when the user has logged into a service, don't load the resources for those features until the user actually logs in.
... remember that any selector in your rule which might match many different nodes is a source of inefficiency during either selector matching or dynamic update processing.
...look through the source for examples.
Using XML Data Islands in Mozilla - Archive of obsolete content
for example, a simple xml purchase order can be embedded like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, ...
...ml> <html> <head> <title>xml data block demo</title> <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> <script> function rundemo() { var ordersource = document.getelementbyid("purchase-order").textcontent; var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); var lineitems = doc.getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.b...
...the price of the first line item is " + firstprice + "."; } </script> </head> <body onload="rundemo()";> demo did not run </body> </html> the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
Creating a Mozilla Extension - Archive of obsolete content
this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e.
...the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to get the status of the code.
... completing this tutorial will give you a basic understanding of how mozilla's user interface (ui) is constructed, how to find the source code for the ui you want to extend, how to make an installation of mozilla modifiable, how to use mozilla's network library to load and parse web pages in javascript, and how to use dynamic overlays to package a mozilla extension for installation by others.
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.
...list all the skins being supplied by this theme <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> in the code search for the part listed above.
...<rdf:li resource="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:navigator"/> finally, in the last section of the contents.rdf file we need to tell mozilla what version this skin is compliant with.
Building Firefox with Rust code - Archive of obsolete content
if the e10s crate depends on any other crates, their sources must also be checked into the tree, and e10s's cargo.toml must have path attributes for each of its dependencies, and so on.
... if you need to locally patch a third-party crate, you'll need to add a [replace] section to the referencing cargo.toml to declare that the vendored source shouldn't match the upstream release.
... this works even if you use the existing vendored source location, but be aware that other vendor updates could clobber your patch in that case.
Downloading Nightly or Trunk Builds - Archive of obsolete content
a trunk build is a build made off the trunk, i.e., the latest, newest, but also least stable and most buggy state of the source.
... trunk builds are provided so that one can execute tests without going to the trouble of building the source.
...these are the "tinderbox builds", also known as "hourly builds" though it usually takes more than one hour to make one; they are followed by automatic tests and their main purpose is to check that nothing is horridly wrong with the latest change to the source: what they are doing is to constantly check that the current source can be built into an executable and that that executable passes a certain more-or-less fixed set of tests.
JavaScript Client API - Archive of obsolete content
the best, and most up-to-date, reference to sync's internal apis is the source code.
... 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.
...cu.import("resource://services-sync/main.js"); installing your classes into sync you can register your engine in an "weave:service:ready" observer using the weave.engines.register(fooengine) function.
Running Tamarin acceptance tests - Archive of obsolete content
the tamarin acceptance tests can be used to verify your installation and or local changes that you have made to the source.
...also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/display/flexsdk/flex+sdk.
Tamarin - Archive of obsolete content
tamarin acceptance testing instructions on how to validate changes to the tamarin source code.
... nanojit lir in nanojit, lir is the source language for compilation to machine code.
...this page is a how-to about the changes, and what can be done to adapt source code to the changes.
The new nsString class implementation (1999) - Archive of obsolete content
static void ensurecapacity(nsstrimpl& astring,pruint32 anewlength); static void growcapacity(nsstrimpl& astring,pruint32 anewlength); static void append(nsstrimpl& adest,const nsstrimpl& asource,pruint32 anoffset,print32 acount); static void appendcstring(nsstrimpl& adest,const char* asource,pruint32 anoffset,print32 acount); static void assign(nsstrimpl& adest,const nsstrimpl& asource,pruint32 anoffset,print32 acount); static void assigncstring(nsstrimpl& adest,const char* asource,pruint32 anoffset,print32 acount); // assign a char or a substring into the existing string...
... static void insert(nsstrimpl& adest,pruint32 adestoffset, const nsstrimpl& asource,pruint32 asrcoffset,print32 acount); static void insertcstring(nsstrimpl& adest,pruint32 adestoffset, const char* asource,pruint32 asrcoffset,print32 acount); static void insertchar(nsstrimpl& adest,pruint32 adestoffset,char thechar); static void insertchar(nsstrimpl& adest,pruint32 adestoffset,prunichar theunichar); static void insertchar(nsstrimpl& adest,pruint32 adestoffset,print32 thequadchar); static void delete(nsstrimpl& adest,pruint32 adestoffset,pruint32 acount); static void truncate(nsstrimpl& adest,pruint32 adestoffset); static print32 compare(const nsstrimpl& adest,const nsstrimpl& asource, print32 acount,prb...
...this assumption is nearly always wrong -- and will seriously hinder our ability to localize the source base.
modDateChanged - Archive of obsolete content
method of file object syntax boolean moddatechanged (filespecobject asourcefolder, number anolddate); parameters the moddatechanged method has the following parameters: asourcefolder a filespecobject representing the file to be queried.
... example filesource1 = getfolder("program", "file1.txt"); filesource2 = getfolder("program", "file2.txt"); err1 = file.moddate(filesource1); // the baseline returned err2 = file.moddatechanged(filesource1, err1); logcomment("file.moddatechanged should return 'false' = " + err2); // the reason it expects false is we're comparing // the return 'time stamp' value for // file1.txt with the actual file1.txt itself.
... err3 = file.moddatechanged(filesource2, err1); logcomment("file.moddatechanged should return 'true' = " + err2); // the reason it expects true is we're comparing // the return 'time stamp' value for // file1.txt with another file, file2.txt, with a different // 'time stamp' value.
registerChrome - Archive of obsolete content
srcdir srcdir is a filespecobject representing the source destination of the installation.
...example example assumes your xpi file is in plugins folder and rdf file is in resources subfolder of xpi.
... registerchrome( package | delayed_chrome, getfolder("plugins"), "resources"); ...
allownegativeassertions - Archive of obsolete content
« xul reference home allownegativeassertions type: boolean valid on any element that has a datasources attribute.
... when multiple datasources are used, one may override an assertion from another.
... this attribute, if true, which is the default, allows a datasource to negate an earlier assertion.
coalesceduplicatearcs - Archive of obsolete content
« xul reference home coalesceduplicatearcs type: boolean valid on any element that has a datasources attribute.
... when multiple datasources are used, one may override an assertion from another.
... this attribute, if true, which is the default, allows a datasource to negate an earlier assertion.
querytype - Archive of obsolete content
« xul reference home querytype type: string indicates the type of datasource used in a template.
... firefox 3 provides 3 built-in datasources: 'rdf', default, 'xml' and 'storage'.
... extensions may provide support for additional datasources.
Sorting and filtering a custom tree view - Archive of obsolete content
l" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator...
...1 : -1; //if the column is passed and it's already sorted by that column, reverse sort if (column) { columnname = column.id; if (tree.getattribute("sortresource") == columnname) { order *= -1; } } else { columnname = tree.getattribute("sortresource"); } function columnsort(a, b) { if (prepareforcomparison(a[columnname]) > prepareforcomparison(b[columnname])) return 1 * order; if (prepareforcomparison(a[columnname]) < prepareforcomparison(b[columnname])) return -1 * order; //tie breaker: name ascending is the second level sort if (colum...
..."ascending" : "descending"); tree.setattribute("sortresource", columnname); tree.view = new treeview(table); //set the appropriate attributes to show to indicator var cols = tree.getelementsbytagname("treecol"); for (var i = 0; i < cols.length; i++) { cols[i].removeattribute("sortdirection"); } document.getelementbyid(columnname).setattribute("sortdirection", order == 1 ?
Attribute Substitution - Archive of obsolete content
recall that the template builder doesn't load the datasource before processing a template.
... as the datasource loads, the query and rules are examined with the new data as it arrives.
...thus, if you use a variable set in a binding, you must ensure the datasource is loaded before the template is built, or just rebuild the template.
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: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="custom button" chrome:description="my custom toolbar button" chrome:author="my name" chrome:name="custombutton" chrome:localeversion="1.8" chrome:skinversion="1.5" chrome:extension="true"/> <rdf:seq about="urn:mozilla:overlays"> ...
...now open a new text document in the same folder, pasting the following text within: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:myapp"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:myapp" chrome:displayname="myapp" chrome:description="my first xul app" chrome:author="yours truly" chrome:name="myapp" chrome:localeversion="1.8" chrome:skinversion="1.5" chrome:extension="true"/> </rdf:rdf> replace the fields in bold with your xul...
Adding HTML Elements - Archive of obsolete content
example 1 : source view <html:p> search for: <html:input id="find-text"/> <button id="okbutton" label="ok"/> </html:p> this code will cause the text 'search for:' to be displayed, followed by an input element and an ok button.
...a dialog with a check box example 2 : source view <html:p> click the box below to remember this decision.
... text outside of html blocks example 3 : source view <html:div> would you like to save the following documents?
Adding Labels and Images - Archive of obsolete content
an example is shown below: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed.
...example 3 : source view <label value="click here:" control="open-button"/> <button id="open-button" label="open"/> in the example above, clicking the label will cause the button to be focused.
...example 4 : source view <description> this longer section of text is displayed.
Adding Methods to XBL-defined Elements - Archive of obsolete content
methods are the functions of objects, such as window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open().
...for example, we could move the show and hide buttons into the xbl file and do the following: example 1: source <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> <xul:button label="show" oncommand="document.getbindingparent(this).showtitle(true);"/> <xul:button label="hide" oncommand="document.getbindingparent(this).showtitle(false);"/> </content> <implementation> <method name="showtitle"> <parameter name="state...
Broadcasters and Observers - Archive of obsolete content
example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does.
...an example is shown below: example 2 : source view <broadcasterset> <broadcaster id="isoffline" label="offline" accesskey="f"/> </broadcasterset> <button id="offline_button"> <observes element="isoffline" attribute="label"/> </button> two attributes have been added to the observes element.
... example 3 : source view <broadcasterset> <broadcaster id="colorchanger" style="color: black"/> </broadcasterset> <button label="test"> <observes element="colorchanger" attribute="style" onbroadcast="alert('color changed');"/> </button> <button label="observer" oncommand="document.getelementbyid('colorchanger').setattribute('style','color: red');" /> two buttons have been created, one labeled test and the...
Commands - Archive of obsolete content
a simple way of using commands is as follows: example: simple command example 1 : source view <command id="cmd_openhelp" oncommand="alert('help!');"/> <button label="help" command="cmd_openhelp"/> in this example, instead of placing the oncommand attribute on the button, we instead place it on a command element.
... example: toggling command disabled example 2 : source view <command id="cmd_openhelp" oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> <button label="disable" oncommand="document.getelementbyid('cmd_openhelp').setattribute('disabled','true');"/> <button label="enable" oncommand="document.getelementbyid('cmd_openhelp').removeattribute('disabled');"/> in t...
... try opening the example below (source view) in a browser window and selecting items from the list.
Content Panels - Archive of obsolete content
when the user enters a url or clicks on a link in a document, the source of the frame is changed.
... iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web browser.
... browser example example 2 : source view <browser src="http://www.mozilla.org" flex="1" /> as with the iframe, you can specify the url in a browser using the src attribute.
Groupboxes - Archive of obsolete content
a simple groupbox example the example below shows a simple groupbox: example 1 : source view <groupbox> <caption label="answer"/> <description value="banana"/> <description value="tangerine"/> <description value="phone booth"/> <description value="kiwi"/> </groupbox> this will cause four pieces of text to be displayed surrounded by a box with the label answer.
...example 2 : source view <groupbox flex="1"> <caption> <checkbox label="enable backups"/> </caption> <hbox> <label control="dir" value="directory:"/> <textbox id="dir" flex="1"/> </hbox> <checkbox label="compress archived files"/> </groupbox> in this example, a checkbox has been used as a caption.
...this could be used to add extra elements within the structure, such as in the following example: example 3 : source view <radiogroup> <radio id="no" value="no" label="no number"/> <radio id="random" value="random" label="random number"/> <hbox> <radio id="specify" value="specify" label="specify number:"/> <textbox id="specificnumber"/> </hbox> </radiogroup> note that the radiogroup element does not draw a border around it.
Introduction - Archive of obsolete content
some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource.
... in mozilla, such datasources include a user's mailbox, their bookmarks and search results.
...this is done using a feature of xul called an overlay, which allows the ui provided from one source, in this case, the firefox browser, to be merged together with the ui from the extension.
Keyboard Shortcuts - Archive of obsolete content
example 1 : source view <menubar id="sample-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" accesskey="c"/> </menupopup> </menu> </menubar> you can also use the accesskey attribute on buttons.
... example 2 : source view <keyset> <key id="paste-key" modifiers="accel" key="v" oncommand="alert('paste invoked')"/> </keyset> <menubar id="sample-menubar"> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem id="paste-command" accesskey="p" key="paste-key" label="paste" oncommand="alert('paste invoked')"/> </menupopup> </menu> </...
... our find files example so far : source view next, we'll find out how to handle focus and the selection.
Stacks and Decks - Archive of obsolete content
for example, you could create an effect similar to the text-shadow property with the following: example 1 : source view <stack> <description value="shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> <description value="shadowed" style="color: red; font-size: 15pt;"/> </stack> both description elements create text with a size of 15 points.
...shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack style="background-color: #c0c0c0"> <description value="disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> <description value="disabled" style="color: grey;"/> </stack> this arrangement of text and shadow colors creates the disabled look under some platforms.
... example 3 : source view <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> three pages exist here, the default being the third one.
XUL Structure - Archive of obsolete content
the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree.
... content from remote sources (e.g.
...however, because of this, the xul will be not be reloaded even when the source files are changed.
action - Archive of obsolete content
for a matched rule, each variable will be a reference to data within the datasource, determined from the query.
... examples example needed attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, buil...
...der, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), ha...
conditions - Archive of obsolete content
when evaluating the rule for a particular rdf resource, the variables are replaced with values from the resource.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
content - Archive of obsolete content
propiedades tag, uri ejemplos (no son necesarios) atributos inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width propie...
...when a rule is evaluated, it scans through each resource in the rdf datasource looking for a match.
... each resource is placed in the variable specified in the uri attribute in turn.
member - Archive of obsolete content
properties child, container examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature...
template - Archive of obsolete content
elements are constructed from a datasource.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
textnode - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] normally when substituting rdf resources in template rules, you place the rdf property name inside an attribute value preceded with rdf:.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
xulrunner 1.9.1.x is built from the same source code snapshot as firefox 3.5.x.
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi.
... where is the source code?
XULRunner 1.9.2 Release Notes - Archive of obsolete content
xulrunner 1.9.2.x is built from the same source code snapshot as firefox 3.6.x.
...type sudo rm /var/db/receipts/org.mozilla.xulrunner.* installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi.
...where is the source code?
XULRunner 1.9 Release Notes - Archive of obsolete content
xulrunner 1.9 is built from the same source code snapshot as firefox 3.
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi.
... where is the source code?
XULRunner 2.0 Release Notes - Archive of obsolete content
xulrunner 2.0.x is built from the same source code snapshot as firefox 4.0.x.
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi.
...where is the source code?
Building XULRunner with Python - Archive of obsolete content
you should also read the the developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibility projects and both jambu alternative input and the iaccessible2 test tool are using it.
...it might also be possible to use the open source mingw compiler with the correct msvc run time but that is apparently not recommended.
... mk_add_options moz_objdir=@topsrcdir@/../obj-xulrunner mk_add_options moz_co_project=xulrunner ac_add_options --enable-application=xulrunner ac_add_options --enable-extensions=python,default ac_add_options --disable-javaxpcom ac_add_options --disable-activex ac_add_options --disable-activex-scripting ac_add_options --disable-tests ac_add_options --enable-optimize to check out all the required source code and build it the first time with no local client.mk file, execute cd /c/projects cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk cd mozilla make -f client.mk for subsequent updates from cvs followed by a build, use cd /c/projects/mozilla make -f client.mk which will also checkout client.mk itself for build only, without checkouts, use make -f client.mk ...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
nents] name: main; description: my app; types: full compact custom; flags: fixed name: runtime; description: xul runner runtime; types: full custom [tasks] name: desktopicon; description: {cm:createdesktopicon}; groupdescription: {cm:additionalicons}; flags: unchecked name: quicklaunchicon; description: {cm:createquicklaunchicon}; groupdescription: {cm:additionalicons}; flags: unchecked [files] source: c:\develop\xulrunnerinstaller\myapp\myapp.exe; destdir: {app}; components: main; flags: ignoreversion source: c:\develop\xulrunnerinstaller\myapp\application.ini; destdir: {app}; components: main; flags: ignoreversion source: c:\develop\xulrunnerinstaller\myapp\chrome\*; excludes: .svn; destdir: {app}\chrome; components: main; flags: ignoreversion recursesubdirs createallsubdirs source: c:\devel...
...op\xulrunnerinstaller\myapp\defaults\*; excludes: .svn; destdir: {app}\defaults; components: main; flags: ignoreversion recursesubdirs createallsubdirs source: c:\develop\xulrunnerinstaller\myapp\xulrunner\*; destdir: {app}\xulrunner; components: runtime; flags: ignoreversion recursesubdirs createallsubdirs ; note: don't use "flags: ignoreversion" on any shared system files [icons] name: {group}\my app; filename: {app}\myapp.exe name: {group}\{cm:uninstallprogram,xul explorer}; filename: {uninstallexe} name: {userdesktop}\my app; filename: {app}\myapp.exe; tasks: desktopicon name: {userappdata}\microsoft\internet explorer\quick launch\my app; filename: {app}\myapp.exe; tasks: quicklaunchicon [run] filename: {app}\myapp.exe; description: {cm:launchprogram,my app}; onlybelowversion: 0,6; flags: ...
...don't forget to then test the installed application to be sure the installation did indeed work correctly, since if you accidentally omitted resources from the script, they'll be missing from the installed package.
Debugging a XULRunner Application - Archive of obsolete content
add the following code to your xul app: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); // don't specify a window type parameter below if "navigator:browser" // is suitable for your app.
... debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(6000); for xulrunner version 37+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open(); add the following to your prefs.js: (in recent ffox, edit about:config instead) pref("devtools.debugger.remote-enabled", true); in firefox, go to tools > web developer > connect...
... security error: content at x-jsd:source?location=chrome%3a%2f%2fvenkman%2fcontent%2fvenkman-overlay.js&instance=12 may not load or link to chrome://venkman/skin/venkman-source.css.
Extentsions FAQ - Archive of obsolete content
http://developer.mozilla.org/en/docs...pcom_component would anyone be able to suggest the best way to do source level debugging in a firefox extension?
... preserved properties source code - nsimapmailfolder::copymessages uaq friday, september 22 - 29, 2006 (↑ top) why extension preferences do not get changed until after it's upgrade?
... why there are some rss feeds that do not appear as livemarks when bookmarked even though the necessary tags for the feed to appear as a livemark are seemingly present and properly formatted in the feeds source?
2006-12-01 - Archive of obsolete content
server side spidermonkey juicescript is an open source version of a server side javascript.
... peter wilson's reply was to add a method that does the deleting with a native implementation that releases the resources held by the object as seen in this database interface: var mydbase = new pgsqlconnection; mydbase.connect("database"); mydbase.exec("select * from mytable where ..."); // use the result data - (native implementation function) mydbase.close() spidermonkey for server side inquiry about why javascript hasn't caught on for general server-side scripting.
... http://www.whitebeam.org is an example of open source server side javascript.
Adobe Flash - Archive of obsolete content
var myflash = document.getelementbyid("myflash").setvariable("myvar", sendtext); a more expanded code example that shows how example 2 was created is shown in this source listing.
...the source listing flash-to-js.html shows a source for this example.
... see also macromedia flash developer documentation scripting the flash player plugin communication between javascript and macromedia flash fscommands (definition from the actionscript dictonary) actionscript dictionary mdc resources using the right markup to invoke plugins plugin central notable bugs bug 184722 bug 180378 bug 203861 ...
Threats - Archive of obsolete content
a threat source is the cause of a threat, such as a hostile cyber or physical attack, a human error of omission or commission, a failure of organization-controlled hardware or software, or other failure beyond the control of the organization.
... a threat event is an event or situation initiated or caused by a threat source that has the potential for causing adverse impact.
... many threats against data and resources are possible because of mistakes—either bugs in operating system and applications that create exploitable vulnerabilities, or errors made by end users and administrators.
Solaris 10 Build Prerequisites - Archive of obsolete content
provides build tools needed by some open-source projects (eg gnome).
...build pkg-config and gtk-doc from source.
... just unpack the source tarball, run "./configure --prefix=/opt/sfw", make and make install.
Theme changes in Firefox 4 - Archive of obsolete content
in particular, the new file omni.jar contains most of the resources, including the skin.
... it's also important to note that skin files are now split into two subfolders within the omni.jar file, and you'll need to look in both places to find all the skin resources you need.
... /chrome/browser/skin contains application-specific skin resource files.
Scratchpad - Archive of obsolete content
but even with possible limitations present, the html code can be either manually entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use page inspector's edit as html context menu command.
... create a new pad ctrl + n cmd + n ctrl + n close scratchpad ctrl + w cmd + w ctrl + w pretty print the code in scratchpad ctrl + p cmd + p ctrl + p show autocomplete suggestions ctrl + space ctrl + space ctrl + space show inline documentation ctrl + shift + space ctrl + shift + space ctrl + shift + space source editor shortcuts this table lists the default shortcuts for the source editor.
...if you do this, the selected bindings will be used for all the developer tools that use the source editor.
Using SSH to connect to CVS - Archive of obsolete content
please see our source code page for directions accessing read-only cvs, and our getting write access page for directions on obtaining write access.
... download, build, and install corkscrew by following the instructions in the install file in the corkscrew source distribution.
... corkscrew uses the standard "./configure; make install" technique common to many open source projects.
JSException - Archive of obsolete content
public jsexception(string s, string filename, int lineno, string source, int tokenindex) arguments s the detail message.
... source the string containing the javascript code being evaluated.
... tokenindex the index into the source string where the error occurred.
XForms Custom Controls - Archive of obsolete content
so you can always refer to our source code to get some great examples of how xforms controls can be written.
...as always, please refer directly to the source code to be sure that you are using the latest, up-to-date version: extensions/xforms/nsixformsuiwidget.idl.
...please see the comments in the source .idl file for more information on using this method.
Building up a basic demo with PlayCanvas - Game development
it is open sourced on github, with an editor available online and good documentation.
... playcanvas engine built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
... summary of course, it depends on your approach — designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files.
Square tilemaps implementation: Static maps - Game development
n here would scale the tile.) so, for instance, to draw the tree tile, which is the third in the atlas, at the screen coordinates (128, 320), we would call drawimage() with these values: context.drawimage(atlasimage, 192, 0, 64, 64, 128, 320, 64, 64); in order to support atlases with multiple rows and columns, you would need to know how many rows and columns there are to be able to compute the source x and y.
... for (var c = 0; c < map.cols; c++) { for (var r = 0; r < map.rows; r++) { var tile = map.gettile(c, r); if (tile !== 0) { // 0 => empty tile context.drawimage( tileatlas, // image (tile - 1) * map.tsize, // source x 0, // source y map.tsize, // source width map.tsize, // source height c * map.tsize, // target x r * map.tsize, // target y map.tsize, // target width map.tsize // target height ); } } } demo our static tilemap implementation demo pulls the above code together to show what an implementation of this map looks like.
... you can see a live demo and grab the full source code.
DoS attack - MDN Web Docs Glossary: Definitions of Web-related terms
dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests.
... computers have limited resources, for example computation power or memory.
...a dos attack consists of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly.
Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests.
... computers have limited resources, for example computation power or memory.
...a dos attack consists of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly.
Latency - MDN Web Docs Glossary: Definitions of Web-related terms
latency is the network time it takes for a requested resource to reach its destination.
...high latency is bad, meaning it takes a long time for the requested resource to reach its destination.
... latency can be a factor in any kind of data flow, but is most commonly discussed in terms of network latency (the time it takes for a packet of data to travel from source to destination) and media codec latency (the time it takes for the source data to be encoded or decoded and reach the consumer of the resulting data).
RDF - MDN Web Docs Glossary: Definitions of Web-related terms
rdf (resource description framework) is a language developed by w3c for representing information on the world wide web, such as webpages.
... rdf provides a standard way of encoding resource information so that it can be exchanged in a fully automated way between applications.
... learn more general knowledge resource description framework on wikipedia ...
SCM - MDN Web Docs Glossary: Definitions of Web-related terms
scm (source control management) is a system for managing source code.
... usually it refers to the use of software to handle versioning of source files.
... a programmer can modify source code files without being afraid of editing out useful stuff, because a scm keeps track of how the source code has changed and who made the changes.
URI - MDN Web Docs Glossary: Definitions of Web-related terms
a uri (uniform resource identifier) is a string that refers to a resource.
... the most common are urls, which identify the resource by giving its location on the web.
... urns, by contrast, refer to a resource by a name, in a given namespace, such as the isbn of a book.
Flexbox - Learn web development
ordering flex items flexbox also has a feature for changing the layout order of flex items, without affecting the source order.
... flex items with the same order value will appear in their source order.
... the 3rd item appears after the 2nd because it has the same order value and is after it in the source order.
Introduction to CSS layout - Learn web development
let's look at a quick html example: <p>i love my cat.</p> <ul> <li>buy cat food</li> <li>exercise</li> <li>cheer up friend</li> </ul> <p>the end!</p> by default, the browser will display this code as follows: note here how the html is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.
... you'll notice that the caption paragraph has been given display: table-caption; — which makes it act like a table <caption> — and caption-side: bottom; to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <input> elements in the source.
...label, form input { display: table-cell; margin-bottom: 10px; } form label { width: 200px; padding-right: 5%; text-align: right; } form input { width: 300px; } form p { display: table-caption; caption-side: bottom; width: 300px; color: #999; font-style: italic; } this gives us the following result: you can also see this example live at css-tables-example.html (see the source code too.) multi-column layout the multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper.
Practical positioning examples - Learn web development
our simple example will look like this once we are finished: note: you can see the finished example running live at info-box.html (source code).
...our finished example will look like this: note: you can see the finished example running live at fixed-info-box.html (source code).
... our finished example will look like this: note: you can see the finished example running live at hidden-info-panel.html (source code).
What is the difference between webpage, website, web server, and search engine? - Learn web development
a web page can embed a variety of different types of resources such as: style information — controlling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and videos.
...to access a page, just type its address in your browser address bar: web site a website is a collection of linked web pages (plus their associated resources) that share a unique domain name.
... search engine search engines are a common source of confusion on the web.
How do you upload your files to a web server? - Learn web development
a basic command looks like so: rsync [-options] source user@x.x.x.x:destination -options is a dash followed by a one or more letters, for example -v for verbose error messages, and -b to make backups.
... source is the path to the local file or directory that you want to copy files over from.
...for example: rsync [-options] -e "ssh [ssh details go here]" source user@x.x.x.x:destination you can find more details of what is needed at how to copy files with rsync over ssh.
Sending form data - Learn web development
each time you want to reach a resource on the web, the browser sends a request to a url.
... the get method the get method is the method used by the browser to ask the server to send back a given resource: "hey server, i want to get this resource." in this case, the browser sends an empty body.
... when the form is submitted using the post method, you get no data appended to the url, and the http request looks like so, with the data included in the request body instead: post / http/2.0 host: foo.com content-type: application/x-www-form-urlencoded content-length: 13 say=hi&to=mom the content-length header indicates the size of the body, and the content-type header indicates the type of resource sent to the server.
Images in HTML - Learn web development
this is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source).
...this is because the element's content and size are defined by an external resource (like an image or video file), not by the contents of the element itself.
... note: you can find the finished example from this section running on github (see the source code too.) alternative text the next attribute we'll look at is alt.
Test your skills: Multimedia and embedding - Learn web development
multimedia and embedding 2 in this task we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides.
... add multiple sources, containing the paths to the video files.
... let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time.
Manipulating documents - Learn web development
the html source code looks like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple dom example</title> </head> <body> <section> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <p>here we will add a link to the <a href="https://www.mozi...
...first we will create the text node using document.createtextnode(): const text = document.createtextnode(' — the premier source for web development knowledge.'); now we'll grab a reference to the paragraph the link is inside, and append the text node to it: const linkpara = document.queryselector('p'); linkpara.appendchild(text); that's most of what you need for adding nodes to the dom — you'll make a lot of use of these methods when building dynamic interfaces (we'll look at some examples later).
... active learning: getting useful information from the window object so far we've only really looked at using node and document features to manipulate documents, but there is no reason why you can't get data from other sources and use it in your ui.
Third-party APIs - Learn web development
const audiosource = audioctx.createmediaelementsource(audioelement); // etc.
... we are not going to say too much more about this example in the article — the source code has detailed comments inserted inside it to explain how it works.
... find the string enter-api-key-here in the source code, and replace it with your api key.
Video and Audio APIs - Learn web development
as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
...you'll see a number of features; the html is dominated by the video player and its controls: <div class="player"> <video controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <span aria-label="timer">...
... the <video> element contains two <source> elements so that different formats can be loaded depending on the browser viewing the site.
What is JavaScript? - Learn web development
ally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...the program is executed from a binary format, which was generated from the original program source code.
...from a technical standpoint, most modern javascript interpreters actually use a technique called just-in-time compiling to improve performance; the javascript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible.
Properly configuring server MIME types - Learn web development
this is a major source of problems for users of gecko-based browsers, which respect the mime types as reported by web servers and web applications.
... for example, a web site oriented for web developers might wish to send certain example html documents as either text/html or text/plain in order to have the documents either processed and displayed as html or as source code.
...instead of looking for this line in the html source, use the above techniques to determine the mime type sent by the server.
Getting started with Ember - Learn web development
ember-cli-build.js is responsible for configuring details about how your project is built — including bundling all your files together, asset minification, and creating sourcemaps — with reasonable defaults, so you don't typically need to worry about this file.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Routing in Ember - Learn web development
study the code to learn more about ember, and also check out the next article, which provides links to more resources and some troubleshooting advice.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Framework main features - Learn web development
we could write our own javascript that raises these errors for us, but it would make our source code significantly more verbose.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Accessibility in React - Learn web development
in the very last article we'll present you with a list of react resources that you can use to go further in your learning.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Componentizing our React app - Learn web development
make a unique <todo /> components are powerful because they let us re-use pieces of our ui, and refer to one place for the source of that ui.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Working with Svelte stores - Learn web development
being a compiler, svelte has more resources to make our lives easier.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with Vue - Learn web development
because these files are in the source directory, they can be processed by webpack.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Focus management with Vue refs - Learn web development
in the next article we'll round things off with some further resources to take your vue learning further.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Rendering a list of Vue components - Learn web development
date the label="my todo item" attribute to :label="item.label", and the :done="false" attribute to :done="item.done", as seen in context below: <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done"></to-do-item> </li> </ul> now when you look at your running app, it'll show the todo items with their proper names, and if you inspect the source code you'll see that the inputs all have unique ids, taken from the object in the app component.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Introduction to automated testing - Learn web development
add the following dependency to gulpfile.js: const htmltidy = require('gulp-htmltidy'); add the following test to the bottom of gulpfile.js: function html(cb) { return gulp.src('src/index.html') .pipe(htmltidy()) .pipe(gulp.dest('build')); cb(); } here we are grabbing our development index.html file with gulp.src(), which allows us to grab a source file to do something with.
... we next use the pipe() function to pass that source to another command to do something else with.
...we first run htmltidy() on the source, which goes through and fixes errors in our file.
Package management basics - Learn web development
"hot module replacement", "live reloading", and "uncompressed and commented source code".
... although the list grows by the month, there are three main offerings for tools that generate bundles from our source code: webpack, rollup, and parcel.
...we would recommend having a look at the source code in dist/index.html just so you can see what changes parcel has performed automatically.
Chrome Worker Modules
you only need to do it once for each worker, from within the chrome worker itself: importscripts("resource://gre/modules/workers/require.js"); note: although you only need to do this once for each worker, it doesn't hurt if you do it more than once.
... this defines a global value require(), that you may now use as follows: // import the module // (here, we import the core of os.file) let core = require("resource://gre/modules/osfile/osfile_shared_allthreads.jsm"); // we may now use module core.
...blic"; exports.key = publickey; // secretkey is not exported // publickey is exported with name "key" alternatively, if you prefer that style, you may write // variable |module| is a special global introduced by require() module.exports = { key: publickey }; once this is done, we may load the module and use the values that have been exported // assuming that mymodule.js is installed to resource://gre/modules/mymodule.js let module = require("resource://gre/modules/mymodule.js") foo(module.key); // module.key == "this is public"; // however, secretkey is not exported and cannot be used for the installation of resources, please see the documentation on moz.build (if your code is part of the platform) or on chrome manifests (if your code is part of an add-on).
Accessibility API cross-reference
none, presentation <private> or perhaps <artifact> a section whose content is parenthetic or ancillary to the main content of the resource.
... structure (abstract role) represents an entire table table table table table <table> a container for the resources associated with a tab, where each tab is contained in a tablist.
...an extend selection extselectable n/a n/a not clipped to boundary of parent, does not auto-move with parent floating n/a n/a identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
Accessibility Features in Firefox
view selection source (techies only): when you select some text and right click or press shift+f10, you can "view selection source".
... this will show the html source for only the selected text, which is useful for understanding accessibility problems in some web sites.
... that's the great thing about the open firefox community model and source code license -- anyone can contribute, and everyone benefits.
Android-specific test suites
to disable a single test, edit the source code and insert junit's @ignore annotation before the existing @test annotation.
... see http://checkstyle.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/checkstyle_plugin.html for more details.
... see http://findbugs.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/findbugs_plugin.html for more details.
Choosing the right memory allocator
there are a lot of different memory allocators in the mozilla source tree.
... nspr memory allocators you should only use the nspr allocators within nspr or the security code located in the /security/ subtree of the source code.
...this is the /js/ subtree of the source code.
Debugging JavaScript
you can also start the browser console when you launch firefox, by launching firefox from the command line and passing --jsconsole as a flag: /path/to/firefox --jsconsole log to the browser console using the standard console api after importing console.jsm: let console = (cu.import("resource://gre/modules/console.jsm", {})).console; console.log("hello from firefox code"); error console this is obsolete and is no longer enabled in firefox by default.
... console.log in browser console you can dump variables in the browser console from addon code, by adding this line to import the console utility: const { console } = components.utils.import("resource://gre/modules/devtools/console.jsm", {}); this has an advantage over dump in that you can list out properties of an object logged with console.log.
... components.utils.import("resource://gre/modules/log.jsm"); "debugger" keyword you can halt venkman or chromebug at a line using the keyword debugger.
Simple SeaMonkey build
this will accomodate visual studio 2013 community edition, the required sdks, the mozillabuild package, the mercurial source repository and enough free disk space to compile.
... # get the source # for aurora, use https://hg.mozilla.org/releases/comm-aurora/ and comm-aurora instead # for beta, use https://hg.mozilla.org/releases/comm-beta/ and comm-beta instead # for release, use https://hg.mozilla.org/releases/comm-release/ and comm-release instead hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # set up a basic .mozconfig file echo 'ac_add_option...
... how to build again later in your comm-central directory, run these commands: # get the latest source python client.py checkout then just re-run the "(moz)make -f client.mk" command above.
Reviewer Checklist
submitting patches to mozilla source code needn't be complex.
... resource leaks in java, memory leaks are largely due to singletons holding on to caches and collections, or observers sticking around, or runnables sitting in a queue.
... [fennec: if your custom view does animations, it's better to clean up runnables in ondetachfromwindow().] ensure all file handles and other closeable resources are closed appropriately.
Developer guide
working with mozilla source code a code overview, how to get the code, and the coding style guide.
... firefox source docs web-hosted documentation built from the mozilla-central source code.
... dxr next generation of searching mozilla's source code.
Browser API
management methods the next set of methods manage the resources used by a browser <iframe>.
...this can influence resource allocation and some function usage such as requestanimationframe.
... htmliframeelement.purgehistory() clears all the resources (cookies, localstorage, cache, etc.) associated with the browser <iframe>.
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').
... setsubstitution('my-cool-addon', fileuri); var worker = new worker('resource://my-cool-addon/worker.js'); more references: you can use chromeworker from javascript code modules.
Overview of Mozilla embedding APIs
ns_termembedding this function shuts down gecko and cleans up any remaining resources...
...in addition to memory allocation and release, this service provides low memory notifications, called a memory pressure observers, which are notified when memory is low - thus allowing cached resources to be freed.
... replace 'nativewindow' with a // reference to an appropriate native resource...
Gecko SDK
note that in order to develop such components, you do not need the full sources of e.g.
...this can be done by downloading the source code for firefox and using the --with-libxul-sdk option to configure.
... resources static xpidl.exe (non-official) if you are looking for a static linked xpidl.exe, you can download here.
Extending a Protocol
include protocol pwindowglobal; namespace mozilla { namespace dom { async refcounted protocol pecho { manager pwindowglobal; parent: async echo(nscstring data) returns (nscstring aresult); async __delete__(); }; } // namespace dom } // namespace mozilla now, edit "./dom/ipc/moz.build" file and add 'pecho.ipdl', to the ipdl_sources array.
...create dom/ipc/echochild.cpp and implement: #include "echochild.h" namespace mozilla { namespace dom { echochild::echochild() : mactoralive(true) {} void echochild::actordestroy(actordestroyreason awhy) { mactoralive = false; } } // end of namespace dom } // end of namespace mozilla ok, now add 'echochild.cpp' to the unified_sources of dom/ipc/moz.build.
... return ipc_ok(); } mozilla::ipc::ipcresult echoparent::recv__delete__() { mactoralive = false; return ipc_ok(); } void echoparent::actordestroy(actordestroyreason awhy) { mactoralive = false; } } // end of namespace dom } // end of namespace mozilla ok, now add 'echoparent.cpp' to the unified_sources of dom/ipc/moz.build.
Add-on Manager
for example: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getalladdons(function(aaddons) { // here aaddons is an array of addon objects }); // this code will execute before the code inside the callback notifications about changes to installed add-ons are dispatched to any registered addonlisteners.
...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.getinstallforurl("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.
... for example, to take a look at the add-ons that were disabled at startup: components.utils.import("resource://gre/modules/addonmanager.jsm"); let addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.length > 0) { // addonids is now an array of the add-on ids that have been disabled alert("note: " + addonids.length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function browseropena...
Task.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/task.jsm"); introduction for an introduction to tasks, you may start from the task.js documentation, keeping in mind that only the core subset is implemented in this module.
... examples general example cu.import("resource://gre/modules/task.jsm"); task.spawn(function* () { // this is our task.
... }); exception handling components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm") task.spawn(function* () { let currentdir = yield os.file.getcurrentdirectory(); let path = os.path.join(currentdir, ".mozconfig"); try { let info = yield os.file.stat(path); console.log("the .mozconfig file is " + info.size + " bytes long."); } catch (ex if ex instanceof os.file.error && ex.bec...
SVN for Localizers
here you'll learn the process of using svn to obtain mozilla website source files from the mozilla servers and pushing your localizations right back to them.
... brief intro to svn svn (abbreviation for subversion) is a free and open source repository tool we use to manage the localized mozilla web pages.
... it's a handy tool that allows us to grab, change, and store versions of source files in one location.
Creating localizable web applications
for english, add hreflang="en" to links to resources that are not going to be localized or are external to your web application.
...because they contain a lot of text and localizing source html is easier), make sure to keep the code responsible for application logic separate from the localizable content.
...gettext extracts localizable content form the source files, thus making it impossible for localizers to accidentally change them.
Fonts for Mozilla 2.0's MathML engine
on most linux distributions and similar open source platforms, you can install math fonts (stix, asana or mathjax fonts) from your package manager or get them from this zip archive.
...mathml font selection with css you can get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files are served with the correct mime type.
... finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets.
DMD
if you are using a dmd-enabled try build, or build from other source, adjust the app identifier as necessary.
...for instance on os x, it is located in the directory /applications/firefox nightly.app/contents/resources/.
... as an example that combines multiple options, if you apply the following command to a profile obtained in "live" mode: dmd.py -r -f 2 -a -s slop it will give you a good idea of where the major sources of slop are.
AsyncTestUtils extended framework
boilerplate add the following code to the top of your test file to import everything you need: load("../../mailnews/resources/loghelper.js"); load("../../mailnews/resources/asynctestutils.js"); load("../../mailnews/resources/messagegenerator.js"); load("../../mailnews/resources/messagemodifier.js"); load("../../mailnews/resources/messageinjection.js"); if the directory where you are adding the tests does not have a head_*.js file that has the two following lines, add them at the top of your test file (before the lines shown above): load("../../mailnews/resources/maildirservice.js"); load("../.
..../mailnews/resources/mailtestutils.js"); at the bottom of the test file, add the following: var tests =[ // list your tests here ]; function run_test() { configure_message_injection({mode: "local"}); async_run_tests(tests); } asynchronous testing basics why do we need it?
...(see the bottom of this page for links to the source files.) count: 10 the number of messages that should be in the set.
PR_TransmitFile
syntax #include <prio.h> print32 pr_transmitfile( prfiledesc *networksocket, prfiledesc *sourcefile, const void *headers, print32 hlen, prtransmitfileflags flags, printervaltime timeout); parameters the function has the following parameters: networksocket a pointer to a prfiledesc object representing the connected socket to send data over.
... sourcefile a pointer to a prfiledesc object representing the file to send.
... description the pr_transmitfile function sends a complete file (sourcefile) across a connected socket (networksocket).
NSPR
nspr build instructions how to checkout and build from source.
... legacy nspr content older nspr content is available in svn for browsing and/or migration to this site getting nspr nspr is available in various source and binary packages, depending on your platform: windows: build the source package, using the nspr build instructions.
...bit : binary libraries needed to run 32-bit programs on a 64-bit os mozilla-nspr-devel : files needed (in addition to the above libraries) to compile programs using nspr mozilla-nspr-debuginfo : debug information (including build symbols) for package mozilla-nspr mozilla-nspr-debuginfo-32bit : debug information (including build symbols) for package mozilla-nspr-32bit mozilla-nspr-debugsource : debug sources for all of the above community view mozilla forums...
4.3.1 Release Notes
source tarballs are available from ftp://ftp.mozilla.org/pub/mozilla.or...-4.3.1.tar.bz2 binary releases are no longer available on mozilla.
...source may be viewed with a browser (via the mxr tool) at http://mxr.mozilla.org/mozilla/source/security/jss/ the run time behavior of jss can be affected by the nss environment variables.
... platform information you can check out the source from cvs by cvs co -r jss_4_3_1_rtm jss jss 4.3.1 works with jdk versions 4 or higher we suggest the latest.
Build instructions for JSS 4.3.x
follow these steps: switch to the appropriate directory and check out jss from the root of your source tree.
... cvs co -r jss_4_3_1_rtm mozilla/security/jss or cvs co -r jss_4_3_rtm mozilla/security/jss setup environment variables needed for compiling java source.
... if you're intention is to modify and build the jss source you need to apply for your own jce code-signing certificate if you made no changes and your goal is to build jss you can use the signed binary release of the jss4.jar from ftp.mozilla.org.
Using JSS
MozillaProjectsNSSJSSUsing JSS
if you built jss from source, you have these libraries in the mozilla/dist/<platform>/lib directory of your build tree.
...if you built jss from source, it is in mozilla/dist/<platform>/lib.
... jss classes if you built jss from source, the compiled jss classes are in mozilla/dist/classes[_dbg].
NSS_3.12.1_release_notes.html
nss 3.12.1 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_1_rtm/src/.
... bug 67890: create self-signed cert with existing key that signed csr bug 129303: nss needs to expose interfaces to deal with multiple token sources of certs.
... bug 311432: ecc's ecl_use_fp code (for linux x86) fails pairwise consistency test bug 330622: certutil's usage messages incorrectly document certain options bug 330628: coreconf/linux.mk should _not_ default to x86 but result in an error if host is not recognized bug 359302: remove the sslsample code from nss source tree bug 372241: need more versatile form of cert_nametoascii bug 390296: nss ignores subject cn even when san contains no dnsname bug 401928: support generalized pkcs#5 v2 pbes bug 403543: pkix: need a way to enable/disable aia cert fetching bug 408847: pkix_ocspchecker_check does not support specified responder (and given signercert) bug 414003: crash [[@ cert_decodecertpackage] sometimes with this testcase bug 415167: memory leak in certutil bug 417399: ar...
NSS 3.12.4 release notes
distribution information this release is built from the source, at the cvs repository rooted at cvs.mozilla.org:/cvsroot, with the cvs tag nss_3_12_4_rtm.
...you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_4_rtm nss see the documentation section for the build instructions.
... nss 3.12.4 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_4_rtm/src/.
NSS 3.15 release notes
nss 3.15 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_rtm/src/ new in nss 3.15 new functionality support for ocsp stapling (rfc 6066, certificate status request) has been added for both client and server sockets.
... nss has migrated from cvs to the mercurial source control management system.
... updated build instructions are available at migration to hg as part of this migration, the source code directory layout has been re-organized.
NSS API Guidelines
nss api guidelines newsgroup: mozilla.dev.tech.crypto introduction this document describes how the nss code is organized, the libraries that get built from the nss sources, and guidelines for writing nss code.
...the directory is the location of the library code in the nss source tree.
... "module" headers are for things used only within a specific subset of nss; things which would have been "static" if we had combined separate c source files together.
NSS Sample Code Sample_2_Initialization of NSS
fprintf(stderr, "%-15s specify a password file\n\n", "-f <plainpasswc>"); exit(-1); } /* initialize the slot password */ char *initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with o...
...n(p1)); port_free(p1); } fclose(input); fclose(output); return p0; } /* change the password */ secstatus changepw(pk11slotinfo *slot, char *oldpass, char *newpass, char *oldpwfile, char *newpwfile) { secstatus rv; secupwdata pwdata; secupwdata newpwdata; char *oldpw = null; char *newpw = null; if (oldpass) { pwdata.source = pw_plaintext; pwdata.data = oldpass; } else if (oldpwfile) { pwdata.source = pw_fromfile; pwdata.data = oldpwfile; } else { pwdata.source = pw_none; pwdata.data = null; } if (newpass) { newpwdata.source = pw_plaintext; newpwdata.data = newpass; } else if (newpwfile) { newpwdata.source = pw_fromfile; new...
...pwdata.data = null; } else { newpwdata.source = pw_none; newpwdata.data = null; } if (pk11_needuserinit(slot)) { newpw = initslotpassword(slot, pr_false, &pwdata); rv = pk11_initpin(slot, (char*)null, newpw); } else { for (;;) { oldpw = getmodulepassword(slot, pr_false, &pwdata); if (pk11_checkuserpassword(slot, oldpw) != secsuccess) { if (pwdata.source == pw_none) { pr_fprintf(pr_stderr, "invalid password.
Initialize NSS database - sample 2
"-p "); fprintf(stderr, "%-15s specify a password file\n\n", "-f "); exit(-1); } /* * initslotpassword */ char * initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with o...
...1, 0, port_strlen(p1)); port_free(p1); } fclose(input); fclose(output); return p0; } /* * changepw */ secstatus changepw(pk11slotinfo *slot, char *oldpass, char *newpass, char *oldpwfile, char *newpwfile) { secstatus rv; secupwdata pwdata; secupwdata newpwdata; char *oldpw = null; char *newpw = null; if (oldpass) { pwdata.source = pw_plaintext; pwdata.data = oldpass; } else if (oldpwfile) { pwdata.source = pw_fromfile; pwdata.data = oldpwfile; } else { pwdata.source = pw_none; pwdata.data = null; } if (newpass) { newpwdata.source = pw_plaintext; newpwdata.data = newpass; } else if (newpwfile) { newpwdata.source = pw_fromfile; new...
...pwdata.data = null; } else { newpwdata.source = pw_none; newpwdata.data = null; } if (pk11_needuserinit(slot)) { newpw = initslotpassword(slot, pr_false, &pwdata); rv = pk11_initpin(slot, (char*)null, newpw); if (rv == secsuccess) { pr_fprintf(pr_stderr, "pk11_initpin failed.\n"); return secfailure; } } else { for (;;) { oldpw = getmodulepassword(slot, pr_false, &pwdata); if (pk11_checkuserpassword(slot, oldpw) != secsuccess) { if (pwdata.source == pw_none) { pr_fprintf(pr_stderr, "invalid password.
NSS environment variables
see the source for more information.
... 3.12.3 nss_strict_shutdown string (any non-empty value) will trigger an assertion failure in debug builds when a program tries to shutdown nss before freeing all the resources it acquired from nss while nss was initialized.
... 3.24 nss_build_continue_on_error boolean (1 to enable) continue building nss source directories when a build error occurs.
SSL functions
other sources of information: the nss_reference documents the functions most commonly used by applications to support ssl.
...the mozilla cross reference (dxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions nss_getclientauthdata mxr 3.2 and later nss_setdomesticpolicy mxr 3.2 and later nss_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and later nssssl_versioncheck mxr 3.2.1 and later ssl_authcertificate mxr 3.2 and later ssl_authcertificatehook mxr 3.2 and later ssl_badcerthook mxr 3.2 and later ssl_certdbhandleset mxr 3.2 and later ssl_canbypass mxr 3.11.7 and later ssl_cipherpolicyget mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_ciphe...
NSS_3.12.3_release_notes.html
nss 3.12.3 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_3_rtm/src/.
... new in nss 3.12.3 changes in behavior: in the development of nss 3.12.3, it became necessary to change some old library behaviors due to the discovery of certain vulnerabilities in the old behaviors, and to correct some errors that had limited nss's ability to interoperate with cryptographic hardware and software from other sources.
... bug 485729: remove lib/freebl/mapfile.solaris bug 485837: vc90.pdb files are output in source directory instead of objdir bug 486060: sec_asn1d_parse_leaf uses argument uninitialized by caller pbe_pk11algidtoparam documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
NSS tools : signtool
similarly, if you are a network administrator, you should make sure, before signing any code, that it comes from a reliable source and will run correctly with the software installed on the machines to which you are distributing it.
...when testing is finished and you are ready to disitribute your software, you should obtain an object-signing certificate from one of two kinds of sources: * an independent certificate authority (ca) that authenticates your identity and charges you a fee.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
Pork Tool Development
source locations ast nodes have a location associated with them; sourceloc is defined to be an integer corresponding to an string offset.
...cppsourceloc wraps sourceloc, providing information about macro expansion.
... cppsourceloc will change the previously provided location information (in variable cpp_source_loc._loc) from post-location to pre-location.
Rhino history
now rhino is part of mozilla's open-source repository.
...however the licensees of rhino have now agreed to release all of rhino to open source, including class file generation.
... since its release to open source, rhino has found a variety of uses and an increasing number of people have contributed to the code.
Rhino license
rhino is available under open source licenses.
... mpl/gpl license the majority of the source code for rhino is available under a mpl 1.1/gpl 2.0 license.
... * * redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * * - redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer.
Rhino overview
rhino contains all the features of javascript 1.7 allows direct scripting of java a javascript shell for executing javascript scripts a javascript compiler to transform javascript source files into java class files a javascript debugger for scripts executed with rhino language the javascript language itself is standardized by standard ecma-262 ecmascript: a general purpose, cross-platform programming language.
... internationalization the messages reported by the javascript engine are by default retrieved from the property file org/mozilla/javascript/resources/messages.properties.
... second, the value of the property security.requiresecuritydomain should be changed to true in the resource bundle org.mozilla.javascript.resources.security.
Rhino
rhino is an open-source implementation of javascript written entirely in java.
... rhino downloads how to get source and binaries.
... rhino help some resources if you get stuck.
Creating JavaScript jstest reftests
expected = 3; actual = 1 + 2; reportcompare(expected, actual, '3==1+2'); comparesource comparesource(expected, actual, description) is used to test if the decompilation of a javascript object (conversion to source code) matches an expected value.
... note that tests which use comparesource should be located in the decompilation sub-suite of a suite.
... for example, to test the decompilation of a simple function you could write: var f = (function () { return 1; }); expect = 'function () { return 1; }'; actual = f + ''; comparesource(expect, actual, 'decompile simple function'); handling shell or browser specific features jstests run both in the browser and in the javascript shell.
GCIntegration - SpiderMonkey Redirect 1
{{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental1.svg", embedding: "iframe", height:"130"} }} assume object b is already marked, as in the leftmost frame, while objects a and c have not been marked yet.
...to see how weak pointers can cause trouble, consider the following situation: {{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental2.svg", embedding: "iframe", height:"130"} }} in the left frame, a has a weak pointer to c.
...so every time a pointer is written somewhere, we need to check if the source is in the tenured gen and if the destination is in the nursery.
JS::Compile
syntax // added in spidermonkey 45 bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(js...
...context *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const j...
... srcbuf js::sourcebufferholder &amp; source buffer containing the script to compile.
JS::Evaluate
syntax // added in spidermonkey 45 bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue rval); bo...
...ol js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlevalue rval); // added in spidermonkey 17 bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js...
... srcbuf js::sourcebufferholder &amp; source buffer containing the script to compile and execute.
JS_ShutDown
free all resources used by the js engine, not associated with specific runtimes.
... syntax void js_shutdown(void); description destroys all free-standing resources allocated by spidermonkey, not associated with any jsruntime, jscontext, or other structure.
...calling this method before all other resources have been destroyed has undefined behavior.
JSAPI reference
cks js_getlocalecallbacks js_setlocalecallbacks locale callback types: jslocaletouppercase jslocaletolowercase jslocalecompare jslocaletounicode scripts just running some javascript code is straightforward: class js::compileoptions added in spidermonkey 17 class js::owningcompileoptions added in spidermonkey 31 class js::readonlycompileoptions added in spidermonkey 31 class js::sourcebufferholder added in spidermonkey 31 js::evaluate added in spidermonkey 17 js_evaluatescript obsolete since jsapi 36 js_evaluateucscript obsolete since jsapi 36 js_evaluatescriptforprincipals obsolete since jsapi 30 js_evaluateucscriptforprincipals obsolete since jsapi 30 js_evaluatescriptforprincipalsversion obsolete since jsapi 30 js_evaluateucscriptforprincipalsversion obsolete since...
...key 17 js::touint16 added in spidermonkey 17 js::toint32 added in spidermonkey 17 js::touint32 added in spidermonkey 17 js::toint64 added in spidermonkey 17 js::touint64 added in spidermonkey 17 js::tonumber added in spidermonkey 17 js::tostring added in spidermonkey 31 js::ordinarytoprimitive added in spidermonkey 38 js_valuetoconstructor js_valuetofunction js_valuetoobject js_valuetosource js_convertvalue js_valuetoboolean obsolete since jsapi 28 js_valuetoecmaint32 obsolete since jsapi 26 js_valuetoecmauint32 obsolete since jsapi 28 js_valuetoint32 obsolete since jsapi 28 js_valuetonumber obsolete since jsapi 27 js_valuetostring obsolete since jsapi 28 js_valuetouint16 obsolete since jsapi 28 fast, unchecked type-casting macros.
...bsolete since jsapi 44 js_clonefunctionobject obsolete since jsapi 36 regexps js_newregexpobject jsreg_fold jsreg_glob jsreg_multiline jsreg_sticky js_newucregexpobject js_newregexpobjectnostatics js_newucregexpobjectnostatics js_setregexpinput js_clearregexpstatics js_objectisregexp added in spidermonkey 17 js_getregexpflags added in spidermonkey 17 js_getregexpsource added in spidermonkey 17 js_executeregexp js_executeregexpnostatics js_clearregexproots obsolete since javascript 1.8.5 serialization struct jsstructuredclonecallbacks js_setstructuredclonecallbacks js_readstructuredclone js_writestructuredclone js_structuredclone js_readuint32pair js_readbytes js_writeuint32pair js_writebytes security struct jsprincipals js_setobjectprin...
SpiderMonkey 1.8.8
you can download full source code here: insert-actual-link-when-the-release-happens (md5 checksum: insert-actual-hash-here).
... spidermonkey 1.8.8 is not binary-compatible with previous releases, nor is it source-code compatible.
... (the msstdint project includes an implementation of this header for microsoft visual studio which demonstrates what the c99 interface looks like.) otherwise, if the compiler doesn't provide a usable <stdint.h> header, a custom implementation shipped with the spidermonkey source is used.
SpiderMonkey 17
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e47daa3b16965c9202).
... spidermonkey 17 is not binary-compatible with previous releases, nor is it source-code compatible.
... (the msstdint project includes an implementation of this header for microsoft visual studio which demonstrates what the c99 interface looks like.) otherwise, if the compiler doesn't provide a usable <stdint.h> header, a custom implementation shipped with the spidermonkey source is used.
SpiderMonkey 24
you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce779081cc11bd0c871c6f303fc4a0091cf4fe66) spidermonkey 24 is the javascript engine that shipped in firefox 24.
... jaegermonkey has been removed and replaced by ionmonkey spidermonkey 24 is not binary-compatible with previous releases, nor is it source-code compatible.
... (the msstdint project includes an implementation of this header for microsoft visual studio which demonstrates what the c99 interface looks like.) otherwise, if the compiler doesn't provide a usable <stdint.h> header, a custom implementation shipped with the spidermonkey source is used.
SpiderMonkey 45
you can download full source code from https://ftp.mozilla.org/pub/spidermonkey/releases/45.0.2/mozjs-45.0.2.tar.bz2 sha256: 570530b1e551bf4a459d7cae875f33f99d5ef0c29ccc7742a1b6f588e5eadbee md5: 2ca34f998d8b5ea79d8616dd26b5fbab spidermonkey 45 is the javascript engine that shipped in firefox 45.
... migrating to spidermonkey 45 spidermonkey 45 is not binary-compatible with previous releases, nor is it source-code compatible.
...mapforeach (bug 1159469) js::newsetobject (bug 1159469) js::setsize (bug 1159469) js::sethas (bug 1159469) js::setdelete (bug 1159469) js::setadd (bug 1159469) js::setclear (bug 1159469) js::setkeys (bug 1159469) js::setvalues (bug 1159469) js::setentries (bug 1159469) js::setforeach (bug 1159469) js::exceptionstackornull (bug 814497) js::copyasyncstack (bug 1160307) js::getsavedframesource (bug 1216819) js::getsavedframeline (bug 1216819) js::getsavedframecolumn (bug 1216819) js::getsavedframefunctiondisplayname (bug 1216819) js::getsavedframeasynccause (bug 1216819) js::getsavedframeasyncparent (bug 1216819) js::getsavedframeparent (bug 1216819) js::buildstackstring (bug 1133191) js::flushperformancemonitoring (bug 1181175) js::resetperformancemonitoring (bug 1181175) js...
WebReplayRoadmap
without time travel, using the console requires repeatedly updating the source or the debugger's log points, reloading, and reproducing the bug.
... comparing executions (not yet implemented) comparing the behavior of a recording that exhibits a bug with a second recording that doesn't exhibit the bug should help with quickly locating the source of the problem.
... doing this well will require some experimentation, but in many cases the buggy recording should hit different locations in the source or exhibit different types from the normal recording.
Secure Development Guidelines
bailout(“you don’t own the file”); } fd = open(file, o_rdwr); write(fd, argv[2], strlen(argv[2])); } file i/o: race conditions previous example contains a race condition the file may change between the call top stat() and open() this opens the possibility of writing arbitrary content to any file race conditions occur when two separate execution flows share a resource and its access is not synchronized properly race condition types include file (previously covered) thread (two threads share a resource but don’t lock it) signal race conditions example char *ptr; void sighandler() { if (ptr) free(ptr); _exit(0); } int main() { signal(sigint, sighandler); ptr = malloc(1000); if (!ptr) exi...
... it would lead to a double free race conditions: prevention be very careful when working with threads, the file system, or signals track down shared resources and lock them accordingly for signal handlers never use non-atomic operations longjmp() is a sign of badness even exit() could cause problems, but _exit() is okay deadlocks and locking issues locks are used when dealing with threads acquiring more than one lock to perform an action if a second thread acquires the same locks but in a different order, it causes denia...
... } } memory leaks: prevention any acquired resource in a try block should be freed in a catch block (if the try block throws before the resource is freed) might be helpful to initialize variables null for pointers -1 for file descriptors ...
Task graph
after a change to the gecko source code is pushed to version-control, jobs for that change appear on treeherder.
... all of this is controlled from within the gecko source code, through a process called task-graph generation.
... the details of task-graph generation are documented in the source code itself, including a some quick recipes for common changes.
AT APIs Support
open komodo - platform for building developer environments miro - a free, open source internet tv and video player any xulrunner application (songbird media player, etc.) extensions to other xul apps (e.g.
...(i recommend sdk 1.3 because the msaa sdk 2.0 doesn't come with the source code to the testing tools.
... msaa msaa sdk tools - version 1.3 is recommended instead of 2.0 because it includes source code for the tools iaccessible2 accessibility probe -- includes msaa support as well atk/at-spi accerciser - interactive python accessibility explorer for the gnome desktop gecko dom inspector has an ability to test gecko accessibility layer, supports base features.
Mork
MozillaTechMork
mork is a database file format invented by david mccusker for the mozilla code since the original netscape database information was proprietary and could not be released open source.
...the information on this page was constructed by reading the source code of the mork database in mozilla and attempting to codify what it parses as faithfully as possible.
...versions 1.0-1.3 were never used in any publicly-available source code.
Starting WebLock
interface nsisimpleenumerator; see the xpcom resources for more information about the xpidl syntax.
...if you copy the stub implementation from the header file into the source, then rename the dummy class name ("_myclass_") to the weblock class name already defined, you should be able to compile the source successfully.
...it can take hours to find the source of crashes that are caused when one part of a system is deleting xpcom objects instead of releasing them.
Creating XPCOM components
com initialization xpcom registry manifests registration methods in xpcom autoregistration the shutdown process three parts of a xpcom component library xpcom glue the glue library xpcom string classes creating the component code what we'll be working on component registration the regxpcom program registration alternatives overview of the weblock module source digging in: required includes and constants identifiers in xpcom coding for the registration process the registration methods creating an instance of your component weblock1.cpp using xpcom utilities to make things easier xpcom macros generic xpcom module macros common implementation macros declaration macros weblock2.cpp string classes in xpcom using strin...
...ing data processing the white list data iweblock method by method lock and unlock addsite removesite setsites getnext getsites hasmoreelements finishing the component using frozen interfaces copying interfaces into your build environment implementing the nsicontentpolicy interface receiving notifications implementing the nsicontentpolicy uniform resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.css image resources packaging weblock component installation overv...
...iew archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project creating a new project adding the gecko sdk to the project settings building a windows project a makefile for unix appendix b - resources weblock resources gecko resources xpcom resources general development resources next » copyright (c) 2003 by doug turner and ian oeschger.
How to build a binary XPCOM component using Visual Studio
you could try to use a different vendor's compiler, but you are going to need to build the sdk from source code.
...check out the resources at the end of the tutorial for more information on the world of xpcom.
...arkravingfinkle.org/specialthing;1"; var obj = components.classes[cid].createinstance(); obj = obj.queryinterface(components.interfaces.ispecialthing); } catch (err) { alert(err); return; } var res = obj.add(3, 4); alert('3+4 = ' + res); var name = obj.name; alert('name = ' + name); obj.name = 'new name'; name = obj.name; alert('name = ' + name); } other resources creating xpcom components - mozilla how to build an xpcom component in javascript - mozilla an introduction to xpcom - ibm xpcom project page - mozilla ...
Components.utils.unload
you should not unload modules that are part of the application (anything under resource://gre/ or resource:/// or resource://app/) as these may be in use by other extensions and the application.
...syntax components.utils.unload( url ); parameters url the "resource://" url of the script to unload.
... example you can unload a module called mymodule.jsm using the following line of code: components.utils.unload("resource://myaddon/modules/mymodule.jsm"); note: currently components.utils.unload clears the global object of an unloaded module.
nsAutoRef
nsautoref<t> is a template class implementing an object that holds a handle to a resource that must be released, typically on destruction of the object.
...no copy constructor nor copy assignment operators are available, so the handle to the resource will be held until released on destruction of the nsautoref or until explicitly reset() or transferred through provided methods.
... in order to use nsautoref<t> for a class t associated with a particular resource type, the type of the handle to the resource and the method for releasing the resource must be provided for class t.
nsCountedRef
nscountedref<t> is a template class implementing an object that takes a strong reference to a reference-counted resource that must be released, typically on destruction of the object.
...nscountedref differs from nsautoref in that nscountedref constructors add a reference to the resource, and in that nscountedref provides copy construction< and assignment operators enabling more than one concurrent reference to the same resource.
... in order to use nscountedref<t> for a class t associated with a particular resource type, the type of the handle to the resource and the methods for referencing and releasing the resource must be provided for class t.
inIDOMUtils
getruleline() returns the line number of the specified css style rule in its source file.
... getrulecolumn() returns the column number of the specified css style rule in its source file.
...the new source string for the style sheet.
nsIApplicationCache
netwerk/base/public/nsiapplicationcache.idlscriptable this interface represents an application cache, which stores resources for offline use.
...this removes all resources it has cached.
... see also offline resources in firefox nsiapplicationcachenamespace nsiapplicationcachecontainer nsiapplicationcachechannel nsiapplicationcacheservice nsidomofflineresourcelist ...
nsIApplicationCacheChannel
loadedfromapplicationcache prbool true if the resource was loaded from the application cache, otherwise false.
... this value may be false even if the resource is assigned to an application cache if, for example, it was loaded as a fallback.
...see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcacheservice nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsIEventListenerInfo
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsisupports getdebugobject(); astring tosource(); attributes attribute type description allowsuntrusted boolean indicates whether or not the event listener allows untrusted events.
...tosource() tries to serialize the event listener to a string.
... astring tosource(); parameters none.
nsIMicrosummaryService
mldefinition); boolean ismicrosummary(in long long bookmarkid, in nsimicrosummary microsummary); nsimicrosummary refreshmicrosummary(in long long bookmarkid); void removemicrosummary(in long long bookmarkid); void setmicrosummary(in long long bookmarkid, in nsimicrosummary microsummary); methods addgenerator() install the microsummary generator from the resource at the supplied uri.
...void addgenerator( in nsiuri generatoruri ); parameters generatoruri the uri of the resource providing the generator.
...in the old rdf-based bookmarks datastore, bookmark ids are nsirdfresource objects.
nsIParentalControlsService
to create an instance, use: var parentalcontrolsservice = components.classes["@mozilla.org/parental-controls-service;1"] .createinstance(components.interfaces.nsiparentalcontrolsservice); method overview void log(in short aentrytype, in boolean aflag, in nsiuri asource, [optional] in nsifile atarget); boolean requesturioverride(in nsiuri atarget, [optional] in nsiinterfacerequestor awindowcontext); boolean requesturioverrides(in nsiarray atargets, [optional] in nsiinterfacerequestor awindowcontext); attributes attribute type description blockfiledownloadsenabled boolean true if the current user account's p...
... void log( in short aentrytype, in boolean aflag, in nsiuri asource, in nsifile atarget optional ); parameters aentrytype the type of event to log.
... asource the uri source of the subject content.
nsIScriptableUnescapeHTML
mponents.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml); method overview nsidomdocumentfragment parsefragment(in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidomelement element); astring unescape(in astring src); methods parsefragment() parses a string of html or xml source into a sanitized documentfragment.
... nsidomdocumentfragment parsefragment( in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidomelement element ); parameters fragment a string of html or xml source to parse as a fragment.
... unescape() convents html source into plain text.
nsITransport
netwerk/base/public/nsitransport.idlscriptable this interface provides a common way of accessing i/o streams connected to some resource.
... this interface does not in any way specify the resource.
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) this interface provides methods to open blocking or non-blocking, buffered or unbuffered streams to the resource.
nsIWebContentHandlerRegistrar
cu.import('resource://gre/modules/services.jsm'); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var htmlcontentwindow = undefined; var registeruri = 'http://mail.live.com/secure/start?action=compose&to=%s'; var myurihostname = services.io.newuri(registeruri, null, null).host; // this section here is long and dau...
...ontent or protocol handler' when calling method: [nsiwebcontenthandlerregistrar::registerprotocolhandler] if the host names do match then a confirmation like this will be seen: this domain check can be bypassed by setting the preference of gecko.handlerservice.allowregisterfromdifferenthost to true as in this code here: var {classes: cc, interfaces: ci, utils: cu} = components; cu.import("resource://gre/modules/services.jsm"); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var allowregisterfromdifferenthost = services.prefs.getboolpref('gecko.handlerservice.allowregisterfromdifferenthost'); if (!allowregisterfromdifferenthost) { services.prefs.setboolpref('gecko.handlerservice.allowregi...
...to take from: http://mxr.mozilla.org/mozilla-release/source/browser/components/feeds/src/webcontentconverter.js#372 and http://stackoverflow.com/questions/24900655/use-registerprotocolhandler-without-contentwindow place holder see also nsiwebcontentsonverterservice (under construction: page doesnt exist yet) registerprotocolhandler from non-privelaged scope web api interfaces > navigator.registercontenthandler() web api interfaces > navigator.reg...
Reference Manual
this allows source level debuggers to more easily "follow" the pointer.
...the case using the temporary, however, uses construction to put the value into the nscomptr, which (though slightly more complicated in source) is more efficient than default construction followed by assignment, the course of events followed by the simpler example.
...people do this a lot, and it turns out to be a big source of leaks in normal xpcom code.
Using nsIDirectoryService
customizing the locations is important if, for example, your application already has a profile directory or other resource directories.
...you need to include an alias in your application that points to this directory and the resource id of this alias goes into your 'cfrg' resource.
...it does not need to be a component - it can be a static lib, a source file in your project - whatever.
Mozilla technologies
ension authors to access rss and atom feeds.life after xul: building firefox interfaces with htmlthis page gathers technical solutions to common problems encountered by teams shipping html-based interfaces inside firefox.morkmork is a database file format invented by david mccusker for the mozilla code since the original netscape database information was proprietary and could not be released open source.
...these services include:viewing and searching mozilla source code onlinesource code for all mozilla projects hosted in the mercurial repositories can be searched and viewed online using searchfox, a fast indexed search engine that runs on aws.xml extrasthe xml extras module contains several features that allow developers to treat xml as data i.e.
...it has multiple language bindings, allowing xpcom components to be used and implemented in javascript, java, and python in addition to c++.xpidlxpidl is an interface description language used to specify xpcom interface classes.xray visiongecko runs javascript from a variety of different sources and at a variety of different privilege levels.xslt 2.0although xslt 2.0 is not natively supported in firefox, it is possible via saxon-b (java) or, more recently, saxon-ce (javascript) to perform xslt 2.0.xtfthe extensible tag framework (xtf) allows adding support for new namespaces using xpcom components to mozilla (written in javascript or c++).
Thunderbird Binaries
they are built every 24 hours by the tinderboxes from the very latest source code.
... nightly builds from the comm-central trunk the trunk is the central source code that is used for continuous and ongoing development.
... the trunk is the central source code that is used for continuous and ongoing development.
Building a Thunderbird extension 1: introduction
thunderbird is a community managed open-source email application.
... references and resources tools and helper extensions there are many tools available that help with developing thunderbird extensions.
... documentation thunderbird extensions (documentation overview) firefox addons developer guide (many topics are applicable to thunderbird) mozilla cross-reference source code browser ("comm-central" contains the thunderbird code repository) community the thunderbird development community has a mailing list with an extensive searchable archive with an extensive searchable archive.
Virtualenv
in order to get the virtualenv's python binary on your path, you should source the bin/activate script on unix or run activate.bat on windows.
... 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 use of various python modules located throughout mozilla-central, a virtualenv is created as part of the build process: http://mxr.mozilla.org/mozilla-central/source/js/src/build/autoconf/python-virtualenv.m4 .
... the populate_virtualenv.py script, when invoked, installs a list of packages, http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt , into the virtualenv via one of various methods.
Debugging Tips
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource().
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the result will be : ctypes.int32_t(10) point(10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type information, you can use .constructor.tosource(), to print the source of ctype.
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.constructor.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.constructor.tosource()); let pp = p.address(); console.log(pp.constructor.tosource()); the result will be as per the following: ctypes.int32_t ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]) ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]).ptr ...
Int64
this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer.
... method overview number compare(a, b); number hi(a); int64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values.
... tosource() this method is for internal debugging use only.
UInt64
this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer.
... method overview number compare(a, b); number hi(a); uint64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values.
... tosource() this method is for internal debugging use only.
Debugging service workers - Firefox Developer Tools
the path to the service worker source file.
... when your service worker is running, a debug button is available next to the source information (it is disabled when the service worker is stopped).
... resources retrieved from the cache are indicated with service worker in the transferred column.
Browser Console - Firefox Developer Tools
components.utils.import("resource://gre/modules/console.jsm"); console.log("hello from firefox code"); //output messages to the console learn more: console api reference console.jsm source code in the mozilla dxr hudservice there is also the hudservice which allows access to the browse console.
... here is an example on how to clear the contents of the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); hud.jsterm.clearoutput(true); if you would like to access the content document of the browser console this can be done with the hudservice.
... this example here makes it so that when you mouse over the "clear" button it will clear the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); var clearbtn = hud.chromewindow.document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
Debug worker threads - Firefox Developer Tools
the debugger shows the source code for all running worker threads — web workers, service workers, etc.
... — listed in the sources list.
... inspecting worker code for example, see the selected item worker.js below — it is listed in a separate thread in the sources list, but appears in the source pane in the same way as main thread code when selected.
Pretty-print a minified file - Firefox Developer Tools
to prettify a minified file, click the pretty print source icon () at the bottom of the source pane.
... the debugger formats the source and displays it as a new file with a name like: "{ } [original-name]".
... after you click the icon, the source code looks like this: the pretty print source icon is available only if the source file is minified (i.e., not an original file), and is not already "prettified".
Set a logpoint - Firefox Developer Tools
it’s faster than changing the underlying source code itself to add calls to the console.log method.
... if you need to execute additional logic related to the source code and you can’t change the source code itself, you can use a logpoint.
... note that you can use logpoints with source-mapped code, as well as with your unmapped source files.
Set event listener breakpoints - Firefox Developer Tools
when execution pauses, the source pane displays the highlighted line of the javascript code that is next to be executed, along with the surrounding code for context.
...this can be done by finding jquery.js in the sources panel, and choosing the ignore source option from its context menu.
... inline variable preview new in firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through.
Debugger.Object - Firefox Developer Tools
this accessor returns whatever name appeared after the function keyword in the source code, regardless of whether the function is the result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function’s body).
... decompile([pretty]) if the referent is a function that is debuggee code, return the javascript source code for a function definition equivalent to the referent function in its effect and result, as a string.
... source metadata generated from file: js/src/doc/debugger/debugger.object.md watermark: sha256:7ae16a834e0883a95b4e0d227193293f6b6e4e4dd812c2570372a39c4c04897b changeset: 5572465c08a9+ ...
Debugger.Object - Firefox Developer Tools
this accessor returns whatever name appeared after the function keyword in the source code, regardless of whether the function is the result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function's body).
...for example, in firefox, a metadata object for a javascript module's global object might look like this: { "type":"jsm", "uri":"resource:://gre/modules/xpcomutils.jsm" } firefox provides [debuggerhostannotationsforfirefox annotations] for its host objects.
... decompile([pretty]) if the referent is a function that is debuggee code, return the javascript source code for a function definition equivalent to the referent function in its effect and result, as a string.
The Firefox JavaScript Debugger - Firefox Developer Tools
open the debugger pretty-print a minified file search use a source map pause execution you probably want to pause the execution of your code, in order to see what is going on at various points.
... step through code black box a source debug worker threads debug eval sources look at values you probably want to see the value of variables or expressions, either during execution or when it is paused.
... set a logpoint set watch expressions reference keyboard shortcuts source map errors ...
Performance Analysis - Firefox Developer Tools
the tables group resources by type, and show the total size of each resource and the total time it took to load them.
... the accompanying pie chart shows the relative size of each resource type.
... clicking on a slice of the pie takes you to the network monitor for that run, with a filter automatically applied to see only that resource type.
Web Console remoting - Firefox Developer Tools
this approach allows for lower resource usage on the server - this is a potential issue if the server runs on devices with fewer resources.
... the pageerror packet is: { "from": "conn0.console9", "type": "pageerror", "pageerror": { "errormessage": "referenceerror: foo is not defined", "sourcename": "http://localhost/~mihai/mozilla/test.js", "linetext": "", "linenumber": 6, "columnnumber": 0, "category": "content javascript", "timestamp": 1347294508210, "error": false, "warning": false, "exception": true, "strict": false, "private": false, } } the packet is similar to nsiscripterror - for simplicity.
...the default source url for evaluation is "debugger eval code".
AudioContext.close() - Web APIs
the close() method of the audiocontext interface closes the audio context, releasing any system audio resources that it uses.
... this function does not automatically release all audiocontext-created objects, unless other references have been released as well; however, it will forcibly release any system audio resources that might prevent additional audiocontexts from being created and used, suspend the progression of audio time in the audio context, and stop processing audio data.
... the returned promise resolves when all audiocontext-creation-blocking resources have been released.
AudioListener.dopplerFactor - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.forwardX - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.forwardY - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.forwardZ - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.positionX - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.positionY - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.positionZ - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.setOrientation() - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.speedOfSound - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.upX - Web APIs
WebAPIAudioListenerupX
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.upY - Web APIs
WebAPIAudioListenerupY
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioListener.upZ - Web APIs
WebAPIAudioListenerupZ
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
AudioNode.connect() - Web APIs
WebAPIAudioNodeconnect
invalidaccesserror the destination node is not part of the same audio context as the source node.
...for example, you might send the audio from a mediaelementaudiosourcenode—that is, the audio from an html5 media element such as <audio>—through a band pass filter implemented using a biquadfilternode to reduce noise before then sending the audio along to the speakers.
... therefore, it is possible to choose the range in which an audioparam will change by setting the value of the audioparam to the central frequency, and to use a gainnode between the audio source and the audioparam to adjust the range of the audioparam changes.
AudioProcessingEvent - Web APIs
note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.c...
...96, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and ...
...; // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } ...
AudioWorkletProcessor.process - Web APIs
the 3 most common types of audio node are: a source of output.
...for example, take the audiobuffersourcenode — the processor behind such a node should return true from the process method while the buffer is playing, and start returning false when the buffer playing has ended (there's no way to call play on the same audiobuffersourcenode again).
...parameters['customgain'][i] : parameters['customgain'][0]) } }) // as this is a source node which generates its own output, // we return true so it won't accidentally get garbage-collected // if we don't have any references to it in the main thread return true } // define the customgain parameter used in process method static get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, aut...
BaseAudioContext.createDelay() - Web APIs
example we have created a simple example that allows you to play three different samples on a constant loop — see create-delay (you can also view the source code).
... var synthsource; playsynth.onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattribute('disabled', 'disabled'); } stopsynth.onclick = function() { synthsource.disconnect(synthdelay); synthdelay.disconnect(destination); syn...
...thsource.stop(); playsynth.removeattribute('disabled'); } ...
BaseAudioContext.createDynamicsCompressor() - Web APIs
for a more complete example, have a look at our basic compressor example (view the source code).
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove co...
...mpression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status comment web audio apithe definition of 'createdynamicscompressor()' in that specification.
BaseAudioContext.createPanner() - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
BaseAudioContext.createScriptProcessor() - Web APIs
note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.c...
...96, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and ...
...; // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment web audio apithe definition of 'createscriptprocessor' in tha...
Body.arrayBuffer() - Web APIs
WebAPIBodyarrayBuffer
we also use audiocontext.createbuffersource to create an audio buffer source.
... when the fetch is successful, we read an arraybuffer out of the response using arraybuffer(), decode the audio data using audiocontext.decodeaudiodata, set the decoded data as the audio buffer source's buffer (source.buffer), then connect the source up to the audiocontext.destination.
... once getdata() has finished running, we start the audio source playing with start(0), then disable the play button so it can't be clicked again when it is already playing (this would cause an error.) function getdata() { source = audioctx.createbuffersource(); var myrequest = new request('viper.ogg'); fetch(myrequest).then(function(response) { return response.arraybuffer(); }).then(function(buffer) { audioctx.decodeaudiodata(buffer, function(decodeddata) { source.buffer = decodeddata; source.connect(audioctx.destination); }); }); }; // wire up buttons to stop and play audio play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } reading files the response() constructor accepts files and blobs, so it may...
CSS Font Loading API - Web APIs
the css font loading api provides events and interfaces for dynamically loading font resources.
... fontfacesource a mixin providing all of the fonts used in font-related operations, unless defined otherwise.
... it defines the fontfacesources.fonts property available to document and workerglobalscope.
CanvasRenderingContext2D - Web APIs
the canvas tutorial has more explanation, examples, and resources, as well.
... canvasrenderingcontext2d.createpattern() creates a pattern using the specified image (a canvasimagesource).
... it repeats the source in the directions specified by the repetition argument.
DataTransfer.clearData() - Web APIs
html <span class="tweaked" id="source" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.
... </span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend...
...t) { status.innerhtml = 'drag in process (drop was available)'; event.preventdefault(); } function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change css styles and displayed text element.style.csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html living standardthe definition of 'datatransfer.cleardata()' in th...
DataTransfer - Web APIs
datatransfer.mozsourcenode read only the node over which the mouse cursor was located when the button was pressed to initiate the drag operation.
... datatransfer.addelement() sets the drag source to the given element.
... living standard mozcursor, mozitemcount, mozsourcenode, mozusercancelled, addelement(), mozcleardataat(), mozgetdataat(), mozsetdataat() and moztypesat are gecko specific.
DelayNode.delayTime - Web APIs
example we have created a simple example that allows you to play three different samples on a constant loop — see create-delay (you can also view the source code).
... var synthsource; playsynth.onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattribute('disabled', 'disabled'); } stopsynth.onclick = function() { synthsource.disconnect(synthdelay); synthdelay.disconnect(destination); syn...
...thsource.stop(); playsynth.removeattribute('disabled'); } ...
DelayNode - Web APIs
WebAPIDelayNode
example we have created a simple example that allows you to play three different samples on a constant loop — see create-delay (you can also view the source code).
... var synthsource; playsynth.onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattribute('disabled', 'disabled'); } stopsynth.onclick = function() { synthsource.disconnect(synthdelay); synthdelay.disconnect(destination); syn...
...thsource.stop(); playsynth.removeattribute('disabled'); } ...
DeprecationReportBody - Web APIs
sourcefile a string containing the path to the source file where the deprecated feature was used, if known, or null otherwise.
... linenumber a number representing the line in the source file in which the deprecated feature was used, if known, or null otherwise.
... columnnumber a number representing the column in the source file in which the deprecated feature was used, if known, or null otherwise.
DisplayMediaStreamConstraints.video - Web APIs
this value may simply be a boolean, where true specifies that a default selection of input source be made (typically the entire display area of the device in use, spanning every screen in a multiple screen configuration).
...this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track.
... logicalsurface a constrainboolean value which may contain a single boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas.
Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
... complete the document and all sub-resources have finished loading.
... // but sub-resources such as images, stylesheets and frames are still loading.
DynamicsCompressorNode.attack - Web APIs
for a more complete example, have a look at our basic compressor example (view the source code).
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove co...
...mpression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status comment web audio apithe definition of 'attack' in that specification.
DynamicsCompressorNode.knee - Web APIs
for a more complete example, have a look at our basic compressor example (view the source code).
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove co...
...mpression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status comment web audio apithe definition of 'knee' in that specification.
DynamicsCompressorNode.ratio - Web APIs
for a more complete example, have a look at our basic compressor example (view the source code).
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove co...
...mpression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status comment web audio apithe definition of 'ratio' in that specification.
DynamicsCompressorNode.release - Web APIs
for a more complete example, have a look at our basic compressor example (view the source code).
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove co...
...mpression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status comment web audio apithe definition of 'release' in that specification.
DynamicsCompressorNode.threshold - Web APIs
for a more complete example, have a look at our basic compressor example (view the source code).
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove co...
...mpression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status comment web audio apithe definition of 'threshold' in that specification.
DynamicsCompressorNode - Web APIs
for a more complete example, have a look at our basic compressor example (view the source code).
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove co...
...mpression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status comment web audio apithe definition of 'dynamicscompressornode' in that specification.
EXT_blend_minmax - Web APIs
the ext_blend_minmax extension is part of the webgl api and extends blending capabilities by adding two new blend equations: the minimum or maximum color components of the source and destination colors.
... constants this extension adds two new constants, which can be used in webglrenderingcontext.blendequation() and webglrenderingcontext.blendequationseparate(): ext.min_ext produces the minimum color components of the source and destination colors.
... ext.max_ext produces the maximum color components of the source and destination colors.
ExtendableEvent - Web APIs
the promise resolves when all resources have been fetched and cached, or else when any exception occurs.
...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) { co...
...nsole.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.
ExtendableMessageEvent() - Web APIs
lasteventid: a domstring that defines the last event id of the event source.
... source: the client, serviceworker or messageport that sent the message.
... examples var init = { data : 'hello message', source : messageportreference, ports : messageportlistreference } var myeme = new extendablemessageevent('message', init); specifications specification status comment service workersthe definition of 'extendablemessageevent()' in that specification.
ExtendableMessageEvent - Web APIs
extendablemessageevent.lasteventid read only represents, in server-sent events, the last event id of the event source.
... extendablemessageevent.source read only returns a reference to the client object that sent the message.
...ata}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status comment service workersthe definition of 'extendablemessageevent' in that specification.
Using files from web applications - Web APIs
set the image's source to a new object url representing the file, using url.createobjecturl() to create the blob url.
...{ const percentage = math.round((e.loaded * 100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addeventlistener("load", function(e){ self.ctrl.update(100); const canvas = self.ctrl.ctx.canvas; canvas.parentnode.removechild(canvas); }, false); xhr.open("post", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.overridemimetype('text/plain; charset=x-user-defined-binary'); reader.onload = function(evt) { xhr.send(evt.target.result); }; reader.readasbinarystring(file); } the fileupload() function shown above creates a throbber, which is used to display progress information, and then creates an xmlhttprequest to handle uploading the data.
...they can be used to display embedded pdf files or any other resources that can be displayed by the browser.
FileSystemEntrySync - Web APIs
[todo: verify ] no_modification_allowed_err one of the following is not writable: the source entry, its parent directory, and the target directory.
... no_modification_allowed_err one of the following is not writable: the source entry, its parent directory, and the target directory.
... no_modification_allowed_err one of the following is not writable: the source entry, its parent directory, and the target directory.
FontFace - Web APIs
WebAPIFontFace
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.
... fontface.load() loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns a promise that resolves with the current fontface object.
GainNode.gain - Web APIs
WebAPIGainNodegain
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // su...
...ccess callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...
...if you still hear something, make sure you haven't // connected your source into the output in addition to using the gainnode.
GainNode - Web APIs
WebAPIGainNode
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // su...
...ccess callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...
...if you still hear something, make sure you haven't // connected your source into the output in addition to using the gainnode.
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log(...
... the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ende...
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it...
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log(...
... the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ende...
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it...
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log(...
... the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ende...
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it...
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"...
...t element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the...
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select t...
HTMLMediaElement.autoplay - Web APIs
a media element whose source is a mediastream and whose autoplay property is true will begin playback when it becomes active (that is, when mediastream.active becomes true).
...however, autoplay can be useful when creating media elements whose source will be set at a later time, under user control.
... <video id="video" controls> <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165"> </video> *** disable autoplay (recommended) *** false is the default value document.queryselector('#video').autoplay = false; specifications specification status comment html living standardthe definition of 'htmlmediaelement.autoplay' in t...
HTMLMediaElement.captureStream() - Web APIs
this can be used, for example, as a source for a webrtc rtcpeerconnection.
... return value a mediastream object which can be used as a source for audio and/or video data by other media processing code, or as a source for webrtc.
...the stream can then be used for other purposes—like a source for streaming over webrtc, to allow sharing prerecorded videos with another person during a video call.
HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource.
... "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.locat...
...ion.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'loadstart media event' in that specification.
HTMLMediaElement.networkState - Web APIs
network_idle 1 htmlmediaelement is active and has selected a resource, but is not using the network.
... network_no_source 3 no htmlmediaelement src found.
... <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading...
HTMLMediaElement: progress event - Web APIs
the progress event is fired periodically as the browser loads a resource.
... "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } javascript const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.locat...
...ion.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'progress media event' in that specification.
HTMLMediaElement.readyState - Web APIs
possible values are: constant value description have_nothing 0 no information is available about the media resource.
... have_metadata 1 enough of the media resource has been retrieved that the metadata attributes are initialized.
... <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
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 mediaurl = 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.
HTMLVideoElement.msIsStereo3D - Web APIs
msisstereo3d is a read-only property which determines whether the system considers the loaded video source to be stereo 3-d or not.
... syntax htmlvideoelement.msisstereo3d: boolean; value boolean value set to true indicates that the video source is stereo 3d.
... this uses metadata set in mp4 or mpeg-2 file containers and h.264 supplemental enhancement information (sei) messages to determine the stereo capability of the source.
The HTML DOM API - Web APIs
ndelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete...
... closeevent websocket server-sent events interfaces the eventsource interface represents the source which sent or is sending server-sent events.
... eventsource examples in this example, an <input> element's input event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.
HTML Drag and Drop API - Web APIs
link indicates that some form of relationship or connection will be created between the source and drop locations.
... the following example shows a drop handler getting the source element's id from the drag data, and then using the id to move the source element to the drop element: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("application/my-app", ev.target.id); ev.datatransfer.dropeffect = "move"; } function dragover_handler(ev) { ev.preventdefault(); ev.datatransfer.dropeffect = "move" ...
...my-app"); ev.target.appendchild(document.getelementbyid(data)); } </script> <p id="p1" draggable="true" ondragstart="dragstart_handler(event)">this element is draggable.</p> <div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">drop zone</div> for more information, see: performing a drop drag end at the end of a drag operation, the dragend event fires at the source element — the element that was the target of the drag start.
ImageBitmap - Web APIs
it can be created from a variety of source objects using the createimagebitmap() factory method.
... imagebitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in webgl.
... methods imagebitmap.close() disposes of all graphical resources associated with an imagebitmap.
Basic concepts - Web APIs
transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked.
...the object store can derive the key from one of three sources: a key generator, a key path, or an explicitly specified value.
...the cursor has a source that indicates which index or object store it is iterating.
InputDeviceCapabilities API - Web APIs
the inputdevicecapabilities api provides details about the underlying sources of input events.
...we can do this by checking the sourcecapabilities property of the uievent.
... if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); interfaces inputdevicecapabilities provides logical information about an input device.
MediaError - Web APIs
mediaerror.code a number which represents the general type of error that occurred, as follows: name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request.
... media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.
... media_err_src_not_supported 4 the associated resource or media provider object (such as a mediastream) has been found to be unsuitable.
MediaStreamTrack.label - Web APIs
the mediastreamtrack.label read-only property returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone".
... the string may be left empty and is empty as long as no source has been connected.
... when the track is deassociated from its source, the label is not changed.
MediaStreamTrack.stop() - Web APIs
syntax track.stop() description calling stop() tells the user agent that the track's source—whatever that source may be, including files, network streams, or a local camera or microphone—is no longer needed by the mediastreamtrack.
... since multiple tracks may use the same source (for example, if two tabs are using the device's microphone), the source itself isn't necessarily immediately stopped.
...once no media tracks are using the source, the source may actually be completely stopped.
MediaTrackConstraints.deviceId - Web APIs
syntax var constraintsobject = { deviceid: constraint }; constraintsobject.deviceid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) device ids which are acceptable as the source of media content.
...however, the value of the deviceid is determined by the source of the track's content, and there's no particular format mandated by the specification (although some kind of guid is recommended).
... because of this, there's no use for the device id when calling mediastreamtrack.applyconstraints(), since there is only one possible value; however, you can record a deviceid and use it to ensure that you get the same source for multiple calls to getusermedia().
MediaTrackConstraints.groupId - Web APIs
syntax var constraintsobject = { groupid: constraint }; constraintsobject.groupid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) group ids which are acceptable as the source of media content.
... group ids are unique for a given origin for the duration of a single browsing session, and are shared by all media sources that come from the same physical device.
... however, the value of the groupid is determined by the source of the track's content, and there's no particular format mandated by the specification (although some kind of guid is recommended).
Using the Media Capabilities API - Web APIs
in short, this api replaces—and improves upon—the mediasource method istypesupported() or the htmlmediaelement method canplaytype().
...a plain file or mediasource — and a videoconfiguration including values for the contenttype, width, height, bitrate, and framerate: the contenttype must be a string specifying a valid video mime type.
...there are a few reasons why an error might occur, including: the specified type isn't one of the two permtited values: file or media-source the contenttype given is the error can be due to the type not being one of the two possible values, the contenttype not being a valid codec mime type, or invalid or omitted definitions required in the videoconfiguration.
Capabilities, constraints, and settings - Web APIs
you can specify one or more media input device ids to establish restrictions on which input sources are allowed.
... example: constraint exerciser in this example, we create an exerciser which lets you experiment with media constraints by editing the source code describing the constraint sets for audio and video tracks.
...this returns a mediastream with the audio and video from a source matching the inputs (typically a webcam, although if you provide the right constraints you can get media from other sources).
Media Capture and Streams API (Media Stream) - Web APIs
a mediastream object generated by getusermedia() is called local, and has as its source input one of the user's cameras or microphones.
... a non-local mediastream may be representing to a media element, like <video> or <audio>, a stream originating over the network, and obtained via the webrtc rtcpeerconnection api, or a stream created using the web audio api mediastreamaudiosourcenode.
...it can be a media elements, like <audio> or <video>, the webrtc rtcpeerconnection api or a web audio api mediastreamaudiosourcenode.
OscillatorNode - Web APIs
it is an audioscheduledsourcenode audio-processing module that causes a specified frequency of a given wave to be created—in effect, a constant tone.
... properties inherits properties from its parent, audioscheduledsourcenode, and adds the following properties: oscillatornode.frequency an a-rate audioparam representing the frequency of oscillation in hertz (though the audioparam returned is read-only, the value it represents is not).
... methods inherits methods from its parent, audioscheduledsourcenode, and adds the following: oscillatornode.setperiodicwave() sets a periodicwave which describes a periodic waveform to be used instead of one of the standard waveforms; calling this sets the type to custom.
PannerNode.orientationX - Web APIs
the orientationx property of the pannernode interface indicates the x (horizontal) component of the direction in which the audio source is facing, in a 3d cartesian coordinate space.
... the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz).
... syntax var orientationx = pannernode.orientationx; pannernode.orientationx.value = neworientationx; value an audioparam whose value is the x component of the direction in which the audio source is facing, in 3d cartesian coordinate space.
PannerNode.orientationY - Web APIs
the orientationy property of the pannernode interface indicates the y (vertical) component of the direction the audio source is facing, in 3d cartesian coordinate space.
... the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz).
... syntax var orientationy = pannernode.orientationy; pannernode.orientationy.value = neworientationy; value an audioparam whose value is the y component of the direction the audio source is facing, in 3d cartesian coordinate space.
PannerNode.orientationZ - Web APIs
the orientationz property of the pannernode interface indicates the z (depth) component of the direction the audio source is facing, in 3d cartesian coordinate space.
... the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz).
... syntax var orientationz = pannernode.orientationz; pannernode.orientationz.value = neworientationz; value an audioparam whose value is the z component of the direction the audio source is facing, in 3d cartesian coordinate space.
PannerNode.panningModel - Web APIs
generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...r.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if...
PannerNode.positionX - Web APIs
the positionx property of the pannernode interface specifies the x coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the horizontal axis (left-right).
... the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz).
... syntax var positionx = pannernode.positionx; pannernode.positionx.value = newpositionx; value an audioparam whose value is the x coordinate of the audio source's position, in 3d cartesian coordinates.
PannerNode.positionY - Web APIs
the positiony property of the pannernode interface specifies the y coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the vertical axis (top-bottom).
... the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz).
... syntax var positiony = pannernode.positiony; pannernode.positiony.value = newpositiony; value an audioparam whose value is the y coordinate of the audio source's position, in 3d cartesian coordinates.
PannerNode.positionZ - Web APIs
the positionz property of the pannernode interface specifies the z coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the depth axis (behind-in front of the listener).
... the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz).
... syntax var positionz = pannernode.positionz; pannernode.positionz.value = newpositionz; value an audioparam whose value is the z coordinate of the audio source's position, in 3d cartesian coordinates.
PerformanceEntry.duration - Web APIs
"resource" - returns the difference between the resource's responseend timestamp and its starttime timestamp.
... note: if the performance entry has an entrytype of "resource" (i.e.
... the entry is a performanceresourcetiming object), this property returns the difference between the performanceentry.responseend and performanceentry.starttime timestamps.
PerformanceEntry.startTime - Web APIs
"resource" - returns the timestamp immediately before the browser starts fetching the resource.
... note: if the performance entry has an entrytype of "resource" (i.e.
... the entry is a performanceresourcetiming object), this property returns the performanceentry.fetchstart timestamp.
PerformanceEntry - Web APIs
performance entries are also created in indirect ways such as loading a resource (such as an image).
... performanceentry instances will always be one of the following subtypes: performancemark performancemeasure performanceframetiming performancenavigationtiming performanceresourcetiming performancepainttiming note: this feature is available in web workers.
..." + properties[i] + " is not supported"); } } } specifications specification status comment resource timing level 3 editor's draft resource timing level 2 working draft resource timing level 1 candidate recommendation adds the performanceresourcetiming interface and the resource value for entrytype.
PerformanceNavigationTiming - Web APIs
this interface also extends following performanceresourcetiming properties for navigation performance entry types by qualifying and constraining them as follows: performanceresourcetiming.initiatortyperead only returns "navigation".
... performancenavigationtiming.requeststart read only a domhighrestimestamp representing the time immediately before the user agent starts requesting the resource from the server, or from relevant application caches or from local resources.
... performancenavigationtiming.responsestart read only a domhighrestimestamp representing the time immediately after the user agent's http parser receives the first byte of the response from relevant application caches, or from local resources or from the server.
PerformanceObserverEntryList.getEntries() - Web APIs
"initiatortype", the type of the initiating resource (for example an html element).
... the values are defined by the performanceresourcetiming.initiatortype interface.
..., "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to frame event only observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment ...
PhotoCapabilities.redEyeReduction - Web APIs
the redeyereduction read-only property of the photocapabilities interface returns an enum indicating the red-eye reduction capability of the source.
... always red-eye reduction is available in the source and it is always turned on.
... controllable red-eye reduction is available in the source and it is configurable via the photosettings object.
ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).
...when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
RTCDataChannel: bufferedamountlow event - Web APIs
in other words, we'll try to keep at least 64kb of data in the buffer, reading 64kb at a time from the source.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 65536; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
... you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.
RTCDataChannel: error event - Web APIs
examples // strings for each of the sctp cause codes found in rfc // 4960, section 3.3.10: // https://tools.ietf.org/html/rfc4960#section-3.3.10 const sctpcausecodes = [ "no sctp error", "invalid stream identifier", "missing mandatory parameter", "stale cookie error", "sender is out of resource (i.e., memory)", "unable to resolve address", "unrecognized sctp chunk type received", "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has no data)", "cookie received while shutting down", "restart of an association with new addresses", "user-initiated abort", "protocol violation" ]; dc.addeventlistener("error", ev => { const err = ev.
...tp failure: ", err.sctpcausecode); } else { console.error(" unknown sctp error"); } break; case "dtls-failure": if (err.receivedalert) { console.error(" received dlts failure alert: ", err.receivedalert); } if (err.sentalert) { console.error(" sent dlts failure alert: ", err.receivedalert); } break; } // add source file name and line information console.error(" error in file ", err.filename, " at line ", err.linenumber, ", column ", err.columnnumber); }, false); the received event provides details in an rtcerror object called error; rtcerror is an extension of the domexception interface.
...the message string is always output, as is information about the source file's name, line number, and column number at which the error occurred.
RTCOutboundRtpStreamStats - Web APIs
perdscppacketssent a record of key-value pairs with strings as the keys mapped to 32-bit integer values, each indicating the total number of packets this rtcrtpsender has transmitted for this source for each differentiated services code point (dscp).
... retransmittedbytessent the total number of bytes that have been retransmitted for this source as of the time the statistics were sampled.
... retransmittedpacketssent the total number of packets that have needed to be retransmitted for this source as of the time the statistics were sampled.
Request - Web APIs
WebAPIRequest
the request interface of the fetch api represents a resource request.
... request.integrity read only contains the subresource integrity value of the request (e.g., sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=).
...uest 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.
SVGAElement - Web APIs
svgaelement.hreflang is a domstring that reflects the hreflang attribute, indicating the language of the linked resource.
... svgaelement.type is a domstring that reflects the type attribute, indicating the mime type of the linked resource.
...not _blank"); } } specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation replaced inheritance from svgelement by svggraphicselement and removed the interface implementations of svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by htmlhyperlinkelementutils scalable vector graphics (svg) 1.1 (second edition) recommendation initial definition ...
ScriptProcessorNode.bufferSize - Web APIs
note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.creates...
...(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and ...
...(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment web audio apithe definition of 'buffersize' in that specification.
ScriptProcessorNode.onaudioprocess - Web APIs
note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.c...
...96, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and ...
...; // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment web audio apithe definition of 'onaudioprocess' in that speci...
ScriptProcessorNode - Web APIs
note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.creates...
...(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and ...
...(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment web audio apithe definition of 'scriptprocessornode' in that specif...
SecurityPolicyViolationEvent.sample - Web APIs
the sample read-only property of the securitypolicyviolationevent interface is a domstring representing a sample of the resource that caused the violation.
... syntax let sample = violationeventinstance.sample; value a domstring containing a sample of the resource that caused the violation, usually the first 40 characters.
... this will only be populated if the resource is an inline script, event handler, or style — external resources causing a violation will not generate a sample.
ServiceWorkerMessageEvent.ServiceWorkerMessageEvent() - Web APIs
lasteventid: a domstring that defines the last event id of the event source.
... source: the serviceworker or messageport that sent the message.
... examples var init = { data : 'hello message', source : messageportreference, ports : messageportlistreference } var myswme = new serviceworkermessageevent('message', init); ...
ServiceWorkerMessageEvent - Web APIs
this extends the default message event to allow setting a serviceworker object as the source of a message.
... serviceworkermessageevent.lasteventid read only represents, in server-sent events, the last event id of the event source.
... serviceworkermessageevent.source read only returns a reference to the service worker that sent the message.
TextEncoder.prototype.encodeInto() - Web APIs
return value a textencoderencodeintoresult dictionary, which contains two members: read the number of utf-16 units of code from the source that has been converted over to utf-8.
...u8array.subarray(position|0) : u8array); if (stats.written < u8array.length) u8array[stats.written] = 0; // append null if room return stats; } examples <p class="source">this is a sample paragraph.</p> <p class="result"></p> const sourcepara = document.queryselector('.source'); const resultpara = document.queryselector('.result'); const string = sourcepara.textcontent; const textencoder = new textencoder(); const utf8 = new uint8array(string.length); let encodedresults = textencoder.encodeinto(string, utf8); resultpara.textcontent += 'bytes read: ' + encodedr...
...this : self : global); source: https://github.com/anonyco/fastestsmallesttextencoderdecoder specifications specification status comment encodingthe definition of 'textencoder.encode()' in that specification.
WebGL2RenderingContext.texImage3D() - Web APIs
syntax void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, glintptr offset); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlcanvaselement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlimageelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlvideoelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagebitmap source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, t...
...ype, imagedata source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview?
... gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_rev (pixels must be null) source one of the following objects can be used as a pixel source for the texture: arraybufferview, imagebitmap, imagedata, htmlimageelement, htmlcanvaselement, htmlvideoelement.
WebGLRenderingContext.blendEquation() - Web APIs
syntax void gl.blendequation(mode); parameters mode a glenum specifying how source and destination colors are combined.
... must be either: gl.func_add: source + destination, gl.func_subtract: source - destination, gl.func_reverse_subtract: destination - source when using the ext_blend_minmax extension: ext.min_ext: minimum of source and destination, ext.max_ext: maximum of source and destination.
... when using a webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.max: maximum of source and destination.
WebGLRenderingContext.texImage2D() - Web APIs
pixels); // webgl2: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, glintptr offset); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, htmlcanvaselement source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, htmlimageelement source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, htmlvideoelement source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, imagebitmap source); void gl.teximage2d(target, level, internalformat, width, height...
..., border, format, type, imagedata source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture.
...re available additionally: gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
WebGLRenderingContext.texSubImage2D() - Web APIs
pixels); // webgl 2: void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, glintptr offset); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, htmlcanvaselement source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, htmlimageelement source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, htmlvideoelement source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, imagebitmap source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, fo...
...rmat, type, imagedata source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture.
...re available additionally: gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
Web Authentication API - Web APIs
transports: ["usb", "nfc", "ble"], type: "public-key" }]; getcredentialdefaultargs.publickey.allowcredentials = idlist; return navigator.credentials.get(getcredentialdefaultargs); }) .then((assertion) => { console.log("assertion", assertion); }) .catch((err) => { console.log("error", err); }); mozilla demo website and its source code.
... google demo website and its source code.
... webauthn.org and its client source code and server source code specifications specification status comment web authentication: an api for accessing public key credentials level 1 recommendation initial definition.
self.createImageBitmap() - Web APIs
the createimagebitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source.
...it accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
... syntax const imagebitmappromise = createimagebitmap(image[, options]); const imagebitmappromise = createimagebitmap(image, sx, sy, sw, sh[, options]); parameters image an image source, which can be an <img>, svg <image>, <video>, <canvas>, htmlimageelement, svgimageelement, htmlvideoelement, htmlcanvaselement, blob, imagedata, imagebitmap, or offscreencanvas object.
WindowOrWorkerGlobalScope - Web APIs
windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
... optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
... windoworworkerglobalscope.fetch() starts the process of fetching a resource from the network.
WorkerGlobalScope - Web APIs
windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
... optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
... windoworworkerglobalscope.fetch() starts the process of fetching a resource from the network.
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.
XRPose.transform - Web APIs
WebAPIXRPosetransform
it determines the targeted object by passing the event frame's pose into a function called findtargetusingray(), then dispatches the event differently depending on the user's handedness; this is done by comparing the value of the xrinputsource property handedness to a value in the variable user.handedness.
... if the source is a controller in the user's primary hand, a function is called on the targeted object called primaryaction(); otherwise, it calls the targeted object's offhandaction() function.
... xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status comment webxr device apithe definition of 'xrpose.transform' in that specification.
XRRenderState.baseLayer - Web APIs
the read-only baselayer property of the xrrenderstate interface returns the xrwebgllayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.
... syntax var xrwebgllayer = xrrenderstate.baselayer; value a xrwebgllayer object which is used as the source of the world's contents when rendering each frame of the scene.
...that context is passed into new xrwebgllayer() to create an xrwebgllayer which uses the contents of the webgl context gl as the source of the world's image during presentation.
XRSession.onselect - Web APIs
to learn more about how webxr actions work, see inputs and input sources.
... example this example handles select event which occur on the user's main hand (as given by a user object's handedness property); if that value matches the value of the xrinputsource property handedness, we know that the device is held in the user's main hand.
... xrsession.onselect = event => { let source = event.inputsource; if (source.handedness == user.handedness) { if (source.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose); } } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onselect' in that specification.
XRSession: selectend event - Web APIs
the webxr event selectend is sent to an xrsession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselectend for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, ...
XRSession: selectstart event - Web APIs
the webxr event selectstart is sent to an xrsession when the user begins a primary action on one of its input sources.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselectstart for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, ...
XRSession: squeezeend event - Web APIs
the webxr event squeezeend is sent to an xrsession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueezeend for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources.
... xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj...
XRSession: squeezestart event - Web APIs
the webxr event squeezestart is sent to an xrsession when the user begins a primary squeeze action on one of its input sources.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueezestart for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources.
... xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj...
XRTargetRayMode - Web APIs
typically a target ray is drawn from the source of the targeting system along the target ray in the direction in which the user is looking or pointing.
... function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetraymode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ...
... */ } } see the article inputs and input sources for more details and a more complete example.
Using the alert role - Accessibility
examples example 1: adding the role in the html code the snippet below shows how the alert role is added directly into the html source code.
...if the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title.
... aria attributes used alert related aria techniques using the alertdialog role using the aria-invalid property compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices - alert role: http://www.w3.org/tr/wai-aria-practices/#alert ...
Using the group role - Accessibility
examples example 1: using the group role with a html tree view the snippet below shows how the group role is added directly into the html source code.
... </div> <div id="catgroup" role="group"> <div id="siamese" role="treeitem"> <span tabindex="-1">siamese</span> </div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code.
... aria attributes used group related aria techniques region role compatibility tbd: add support information for common ua and at product combinations additional resources aria authoring practices – accessible name guidance by role – group ...
Web applications and ARIA FAQ - Accessibility
more detailed browser compatibility charts are available from multiple sources: caniuse.com the paciello group assistive technologies assistive technologies are increasingly adopting aria.
... several inspecting and debugging tools exist to help you test aria in action: object inspector on windows accessibility inspector on os x accprobe on linux firebug's dom inspector the accessibility inspector for firebug the audits tab in chrome devtools there are several free or open source screen readers that can be used to do hands-on testing with aria.
... free-aria google group -- for developers and users of free tools and resources.
Accessibility: What users can do to browse more safely - Accessibility
icle revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "move ya!
...this will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings.
...this will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings..
Understandable - Accessibility
success criteria how to conform to the criteria practical resource 3.1.1 language of page (a) the default human language of each web page should be detectable via code.
... success criteria how to conform to the criteria practical resource 3.2.1 on focus (a) when a control or other page feature receives focus, it should not change the context in a way that may confuse or disorientate the user.
... success criteria how to conform to the criteria practical resource 3.3.1 error identification (a) when a user is filling out a form or choosing between options, any error that is detected should be clearly reported to the user, along with the form control that the error relates to.
unicode-range - CSS: Cascading Style Sheets
description the purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page.
... for example, a site with many localizations could provide separate font resources for english, greek and japanese.
... for users viewing the english version of a page, the font resources for greek and japanese fonts wouldn't need to be downloaded, saving bandwidth.
@font-face - CSS: Cascading Style Sheets
src specifies the resource containing the font data.
... 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".
...otherwise, the font resource specified using the url() function is downloaded and used.
@import - CSS: Cascading Style Sheets
WebCSS@import
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.
...if the browser does not support any these queries, it does not load the linked resource.
... so that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
WebCSSCascade
the cascade is an algorithm that defines how to combine property values originating from different sources.
... it first filters all the rules from the different sources to keep only the rules that apply to a given element.
... example let's look at an example involving multiple sources of css across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the html: user-agent css: li { margin-left: 10px } author css 1: li { margin-left: 0 } /* this is a reset */ author css 2: @media screen { li { margin-left: 3px } } @media print { li { margin-left: 1px } } user css: .specific { margin-left: ...
font-variant-numeric - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
...umeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples 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.
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>?
order - CSS: Cascading Style Sheets
WebCSSorder
items in a container are sorted by ascending order value and then by their source code order.
... the source for this interactive example is stored in a github repository.
... flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this exa...
Demos of open web technologies
2d graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos) 3d raycaster processing.js p5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in svg (or use the local download) summer html image map creator (source code) video ...
... video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single pa...
...ge application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope html5 web audio showcase (source code) html5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api slide my text - presentation from plain text files web workers web worker fractals photo editor coral generator raytracer hotcold touch typing ...
Web Audio playbackRate explained - Developer guides
next we set playbackrate to 0.5, which represents half normal speed (the playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var ...
... defaultplaybackrate and ratechange in addition to playbackrate, we also have a defaultplaybackrate property available, which lets us set the default playback rate: the playback rate to which the media resets; for example, if we change the source of the video, or (in some browsers) when an ended event is generated.
... firefox generates a ratechange event when the media source is substituted.
Rich-Text Editing in Mozilla - Developer guides
sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.appendchild(opre); } else { if (document.all) { odoc.innerhtml = odoc.innertext; }...
...type html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock'...
... resources mozilla.org's rich-text editing specification mozilla.org's rich-text editing demo converting an app using document.designmode from ie to mozilla at mozilla.org designmode msdn: how to create an html editor application a closed source, cross-browser rich-text editing demo xbdesignmode; a javascript helper class for easier cross-browser development using designmode.
HTML5 - Developer guides
WebGuideHTMLHTML5
designed to be usable by all open web developers, this reference page links to numerous resources about html5 technologies, classified into several groups based on their function.
... offline & storage offline resources: the application cache firefox fully supports the html5 offline resource specification.
... most others have offline resource support at some level.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
color theory resources a full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities.
... a couple of useful resources about color theory: color science (khan academy in association with pixar) an online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas.
...it's not really a resource for helping you with the color sleection process, but is still full of useful information.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
security and tainted canvases because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.
... if the source of the foreign content is an html <img> or svg <svg> element, attempting to retrieve the contents of the canvas isn't allowed.
... if the foreign content comes from an image obtained from either as htmlcanvaselement or imagebitmap, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
WebHTMLElementapplet
datafld this attribute, supported by internet explorer 4 and higher, specifies the column name from the data source object that supplies the bound data.
...it indicates the id of the data source object that supplies the data that is bound to the <param> elements associated with the applet.
... name this attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
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.
... the source for this interactive example is stored in a github repository.
... cite a url that designates a source document or message for the information quoted.
<del>: The Deleted Text element - HTML: Hypertext Markup Language
WebHTMLElementdel
this can be used when rendering "track changes" or source code diff information, for example.
... the source for this interactive example is stored in a github repository.
... cite a uri for a resource that explains the change (for example, meeting minutes).
tabindex - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document's source order.
...if multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source.
Microformats - HTML: Hypertext Markup Language
there are open source parsing libraries for most languages for microformats2.
...mcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/html/microformats">a post on <strong>developer.mozilla.org</strong> </a>: </p> <p class="p-name e-content">hey thanks for making this microformats resource</p> <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="2019-05-31t14:19:09+0000">31 may 2019</time></a></p> </div> { "items": [ { "type": [ "h-entry" ], ...
... "properties": { "in-reply-to": [ "/docs/web/html/microformats" ], "name": [ "hey thanks for making this microformats resource" ], "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-05-31t14:19:09+0000" ], "content": [ { "html": "hey thanks for making this microformats resource", "value": "hey thanks for making this microformats resource", "lang": "en" } ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "greg mcverry" ], "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ...
CORS errors - HTTP
WebHTTPCORSErrors
cross-origin resource sharing (cors) is a standard that allows a server to relax the same-origin policy.
... if the cors configuration isn't setup correctly, the browser console will present an error like "cross-origin request blocked: the same origin policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the cors security rules.
...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.
Access-Control-Allow-Origin - HTTP
header type response header forbidden header name no syntax access-control-allow-origin: * access-control-allow-origin: <origin> access-control-allow-origin: null directives * for requests without credentials, the literal value "*" can be specified, as a wildcard; the value tells browsers to allow requesting code from any origin to access the resource.
... note: null should not be used: "it may seem safe to return access-control-allow-origin: "null", but the serialization of the origin of any resource that uses a non-hierarchical scheme (such as data: or file:) and sandboxed documents is defined to be "null".
...the "null" value for the acao header should therefore be avoided." examples a response that tells the browser to allow code from any origin to access a resource will include the following: access-control-allow-origin: * a response that tells the browser to allow requesting code from the origin https://developer.mozilla.org to access a resource will include the following: access-control-allow-origin: https://developer.mozilla.org limiting the possible access-control-allow-origin values to a set of allowed origins requires code on the server side to check the value of the origin request header, compare that ...
CSP: sandbox - HTTP
the http content-security-policy (csp) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute.
... allow-storage-access-by-user-activation lets the resource request access to the parent's storage capabilities with the storage access api.
... allow-top-navigation-by-user-activation lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.
CSP: upgrade-insecure-requests - HTTP
syntax content-security-policy: upgrade-insecure-requests; examples // header content-security-policy: upgrade-insecure-requests; // meta tag <meta http-equiv="content-security-policy" content="upgrade-insecure-requests"> with the above header set on a domain example.com that wants to migrate from http to https, non-navigational insecure resource requests are automatically upgraded (first-party as well as third-party requests).
...note that, if the requested resource is not actually available via https, the request will fail without any fallback to http.
... <img src="https://example.com/image.png"> <img src="https://not-example.com/image.png"> navigational upgrades to third-party resources brings a significantly higher potential for breakage, these are not upgraded: <a href="https://example.com/">home</a> <a href="http://not-example.com/">home</a> finding insecure requests with the help of the content-security-policy-report-only header and the report-uri directive, you can set-up an enforced policy and a reported policy like this: content-security-policy: upgrade-insecure-requests; default-src https: content-security-policy-report-only: default-src https:; report-uri /endpoint that way, you still upgrade insecure requests on your secure site, but the only monitoring policy is violated and reports insecure resources to your endpoint.
If-Range - HTTP
WebHTTPHeadersIf-Range
if the condition is not fulfilled, the full resource is sent back, with a 200 ok status.
... the most common use case is to resume a download, to guarantee that the stored resource has not been modified since the last fragment has been received.
... header type request header forbidden header name no syntax if-range: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt if-range: <etag> directives <etag> an entity tag uniquely representing the requested resource.
Referrer-Policy - HTTP
this policy will leak potentially-private information from https resource urls to insecure origins.
...<meta name="referrer" content="origin"> or set it for individual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with css css can fetch resources referenced from stylesheets.
... these resources follow a referrer policy as well: external css stylesheets use the default policy (no-referrer-when-downgrade), unless it's overwritten via a referrer-policy http header on the css stylesheet’s response.
Want-Digest - HTTP
the want-digest http header is primarily used in a http request, to ask the responder to provide a digest of the requested resource using the digest response header.
...ot support any of the requested digest algorithms, so responds with a 400 error and includes another want-digest header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
... when released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent.
PUT - HTTP
WebHTTPMethodsPUT
the http put request method creates a new resource or replaces a representation of the target resource with the request payload.
... request has body yes successful response has body no safe no idempotent yes cacheable no allowed in html forms no syntax put /new.html http/1.1 example request put /new.html http/1.1 host: example.com content-type: text/html content-length: 16 <p>new file</p> responses if the target resource does not have a current representation and the put request successfully creates one, then the origin server must inform the user agent by sending a 201 (created) response.
... http/1.1 201 created content-location: /new.html if the target resource does have a current representation and that representation is successfully modified in accordance with the state of the enclosed representation, then the origin server must send either a 200 (ok) or a 204 (no content) response to indicate successful completion of the request.
200 OK - HTTP
WebHTTPStatus200
the meaning of a success depends on the http request method: get: the resource has been fetched and is transmitted in the message body.
... post: the resource describing the result of the action is transmitted in the message body.
... the successful result of a put or a delete is often not a 200 ok but a 204 no content (or a 201 created when the resource is uploaded for the first time).
302 Found - HTTP
WebHTTPStatus302
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).
...this is useful when you want to give a response to a put method that is not the uploaded resource but a confirmation message such as: 'you successfully uploaded xyz'.
404 Not Found - HTTP
WebHTTPStatus404
the http 404 not found client error response code indicates that the server can't find the requested resource.
... a 404 status code does not indicate whether the resource is temporarily or permanently missing.
... but if a resource is permanently removed, a 410 (gone) should be used instead of a 404 status.
451 Unavailable For Legal Reasons - HTTP
WebHTTPStatus451
the hypertext transfer protocol (http) 451 unavailable for legal reasons client error response code indicates that the user requested a resource that is not available due to legal reasons, such as a web page for which a legal action has been issued.
... any attempt to identify the entity ultimately responsible for the resource being unavailable belongs in the response body, not in the rel="blocked-by" link.
...gal reasons link: <https://spqr.example.org/legislatione>; rel="blocked-by" content-type: text/html <html> <head><title>unavailable for legal reasons</title></head> <body> <h1>unavailable for legal reasons</h1> <p>this request may not be serviced in the roman province of judea due to the lex julia majestatis, which disallows access to resources hosted on servers deemed to be operated by the people's front of judea.</p> </body> </html> specifications specification title rfc 7725: 451 unavailable for legal reasons an http status code to report legal obstacles ...
extends - JavaScript
the source for this interactive example is stored in a github repository.
...this example is extracted from this live demo (source).
...this example is extracted from this live demo (source).
Function.name - JavaScript
the source for this interactive example is stored in a github repository.
... javascript compressors and minifiers warning: be careful when using function.name and source code transformations, such as those carried out by javascript compressors (minifiers) or obfuscators.
... source code such as: function foo() {}; let foo = new foo(); if (foo.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } may be compressed to: function a() {}; let b = new a(); if (b.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } in the uncompressed version, the program runs into the truthy-branch and logs "'foo' is an instance of 'foo'".
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
the source for this interactive example is stored in a github repository.
... 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' let fmt = new intl.datetimeformat("en", { hour: 'numeric', minute: 'numeric' }); console.log(fmt.formatrange(date1, date2)); // > '10:00 – 11:00 am' fmt.formatrangetoparts(date1, date2); // return value: // [ // { type: 'hour', value: '10', source: "startrange" }, // { type: 'literal', value: ':', source: "startrange" }, // { type: 'minute', value: '00', source: "startrange" }, // { type: 'literal', value: ' – ', source: "shared" }, // { type: 'hour', value: '11', source: "endrange" }, // { type: 'literal', value: ':', source: "endrange" }, // { type: 'minute', value: '00', source: "endrange" ...
... }, // { type: 'literal', value: ' ', source: "shared" }, // { type: 'dayperiod', value: 'am', source: "shared" } // ] specifications specification intl.datetimeformat.formatrangethe definition of 'formatrangetoparts()' in that specification.
TypedArray.prototype.copyWithin() - JavaScript
the source for this interactive example is stored in a github repository.
... start source start index position where to start copying elements from.
...source end index position where to end copying elements from.
TypedArray.from() - JavaScript
the source for this interactive example is stored in a github repository.
... syntax typedarray.from(source[, mapfn[, thisarg]]) where typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters source an array-like or iterable object to convert to a typed array.
... when the source parameter is an iterator, the typedarray.from() first collects all the values from the iterator, then creates an instance of thisarg using the count, then sets the values on the instance.
WebAssembly.instantiateStreaming() - JavaScript
the webassembly.instantiatestreaming() function compiles and instantiates a webassembly module directly from a streamed underlying source.
... syntax promise<resultobject> webassembly.instantiatestreaming(source, importobject); parameters source a response object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream, compile, and instantiate.
... examples instantiating streaming the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a resultobject.
WebAssembly - JavaScript
webassembly.instantiatestreaming() compiles and instantiates a webassembly module directly from a streamed underlying source, returning both a module and its first instance.
... webassembly.compilestreaming() compiles a webassembly.module directly from a streamed underlying source, leaving instantiation as a separate step.
... examples stream a .wasm module then compile and instantiate it the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a resultobject.
Lexical grammar - JavaScript
the source text of ecmascript scripts gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments or white space.
... white space white space characters improve the readability of source text and separate tokens from each other.
... \f u+0020 space <sp> normal space u+00a0 no-break space <nbsp> normal space, but no point at which a line may break others other unicode space characters <usp> spaces in unicode on wikipedia line terminators in addition to white space characters, line terminator characters are used to improve the readability of the source text.
Using images in HTML - Web media technologies
WebMediaimages
in this guide you'll find links to resources that deal with adding images to websites.
... <picture> the html <picture> element contains zero or more <source> elements and one <img> element which provides versions of an image for different display/device scenarios.
... the browser considers each child <source> element and chooses the best match among them.
Critical rendering path - Web Performance
the browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references.
... optimizing for crp improve page load speed by prioritizing which resources get loaded, controlling the order in which they are loaded, and reducing the file sizes of those resources.
... performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.
Privacy, permissions, and information security
<--- allow attribute, feature policy, and permissions api stuff ---> a specific user experience issue that often arises is a document that's loaded with permission to access a resource and the document contains an <iframe> with the allow attribute to delegate that permission to the contents of the frame.
... in this case, it's possible for the user to wind up being prompted repeatedly for that same resource, first by the main page, then by the document in the frame.
...for example, in firefox 73, the user permission requests were revised so that when an <iframe> uses the allow keyword to delegate permission to the embeded document, the browser asks the user to grant the parent document permission to use the resource, and that permission is then shared with the embedded content that requested the resource to begin with.
Progressive web app structure - Progressive web apps (PWAs)
the app shell model requires all the resources to be available before the website can start rendering.
...you can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa">fork js13kpwa on github</a> to check its source code.</p> <button id="notifications">request dummy notifications</button> <section id="content"> // content inserted in here </section> </main> <footer> <p>© js13kgames 2012-2018, created and maintained by <a href="http://end3r.com">andrzej mazur</a> from <a href="http://enclavegames.com">enclave games</a>.</p> </footer> </body> </html> the <head> section contains some basic info like tit...
....log('[service worker] 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 fol...
Mobile first - Progressive web apps (PWAs)
conditional resource loading to actually implement responsive/adaptive designs, you will need to enlist a certain amount of conditional resource loading, again so that different devices can receive an optimal experience without having to shoulder the burden of many resources that they don't need.
...there is very little going on here, and anyone with a basic understanding of css should be able to understand most of it by just looking at the source code in app.css.
... article { display: table; } nav { display: table-caption; caption-side: bottom; } this is a rather nice hacky bit of css you can use to make the navigation menu display at the bottom, even though it is at the top in the source order.
Progressive web apps (PWAs)
in this article we will go even further and improve the performance of the app by progressively loading its resources.progressive web app structurenow that we know the theory behind pwas, let's look at the recommended structure of an actual app.
... sw-precache — a node module to generate service worker code that will precache specific resources.
... progressive web apps: everything you need to know collection of resources, codelabs and tools you need to build pwas by the team at pwafire.org setting up your progressive web app development environment ...
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
<p class="blur">time to clean my glasses</p> <svg height="0"> <defs> <filter id="wherearemyglasses" x="0" y="0"> <fegaussianblur in="sourcegraphic" stddeviation="1"/> </filter> </defs> </svg> you can apply the svg and the css filter in the same class: .blur { filter: url(#wherearemyglasses); } blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.
...you can rotate the text: <svg height="60" width="200"> <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">example text</text> </svg> using external references svg used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the html document to which it's applied.
... for example, if your css is in a file named default.css, it can look like this: .target { clip-path: url(resources.svg#c1); } the svg is then imported from a file named resources.svg, using the clip path with the id c1.
href - SVG: Scalable Vector Graphics
WebSVGAttributehref
the href attribute defines a link to a resource as a reference url.
... value <url> default value none animatable no feimage for <feimage>, href defines a url referring to an image resource or to an element.
... value <url> default value none animatable yes script for <script>, href defines a url referring to an external resource containing the script code.
in2 - SVG: Scalable Vector Graphics
WebSVGAttributein2
value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
specularExponent - SVG: Scalable Vector Graphics
the specularexponent attribute controls the focus for the light source.
... two elements are using this attribute: <fespecularlighting> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="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" ...
... value <number> default value 1 animatable yes fespotlight for <fespotlight>, specularexponent defines the exponent value controlling the focus for the light source.
xlink:title - SVG: Scalable Vector Graphics
the xlink:title attribute is used to describe the meaning of a link or resource in a human-readable fashion.
...it may be used, for example, to make titles available to applications used by visually impaired users, or to create a table of links, or to present help text that appears when a user lets a mouse pointer hover over a starting resource.
...ransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage context value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
<feColorMatrix> - SVG: Scalable Vector Graphics
<g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" t...
...ype="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="url(#colormelta)" /> <text x="70" y="400">luminancetoalpha</text> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fecolormatrix>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
the <fepointlight> filter primitive defines a light source which allows to create a point light effect.
... usage context categorieslight source elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes specific attributes x y z dom interface this element implements the svgfepointlightelement interface.
... example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="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 ...
<feSpotLight> - SVG: Scalable Vector Graphics
the <fespotlight> svg filter primitive defines a light source which allows to create a spotlight effect.
... usage context categorieslight source elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes specific attributes x y z pointsatx pointsaty pointsatz specularexponent limitingconeangle dom interface this element implements the svgfespotlightelement interface.
...ent <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" 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...
SVG Filters Tutorial - SVG: Scalable Vector Graphics
the keyword sourcealpha identifies the input for this primitive, is in this case input 'in'.
... 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.
...<femerge> primitive contains the nodes <femergenode> taking as input the result offsetblur , this will allow it to appear below the sourcegraphic implementation of more primitives <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> </filter> <femerge> <femergenode in="offsetblur"/> <femergenode in="sourcegraphic"/> </femerge> </defs> ...
Tools for SVG - SVG: Scalable Vector Graphics
inkscape offers state-of-the-art vector drawing, and it's open source.
... apache batik url: xmlgraphics.apache.org/batik/ batik is a set of open source tools under the roof of the apache software foundation.
... other renderers several projects exist that can create a raster image from an svg source.
Mixed content - Web security
passive content list this section lists all types of http requests which are considered passive content: <img> (src attribute) <audio> (src attribute) <video> (src attribute) <object> subresources (when an <object> performs http requests) mixed active content mixed active content is content that has access to all or parts of the document object model of the https page.
... <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.
...the mixed content resource that was loaded via http will show up in red, along with the text "mixed content", which links to this page.
Web security
robots.txt to be written site maps to be written integrity same-origin policy the same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.
... subresource integrity subresource integrity (sri) is a security feature that enables browsers to verify that resources they fetch (for example, from a cdn) are delivered without unexpected manipulation.
... it works by allowing you to provide a cryptographic hash that a fetched resource must match.
Index - XPath
WebXPathIndex
10 following-sibling axe, xpath the following-sibling axis indicates all the nodes that have the same parent as the context node and appear after the context node in the source document.
... 14 preceding-sibling axe, xpath the preceding-sibling axis indicates all the nodes that have the same parent as the context node and appear before the context node in the source document.
...this is non-xml data referenced in the dtd of the source document.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
transformtodocument xsltprocessor.transformtodocument() takes one argument, the source node to transform, and returns a new document with the results of the transformation: var newdocument = processor.transformtodocument(domtobetransformed); the resultant object depends on the output method of the stylesheet: html - htmldocument xml - xmldocument text - xmldocument with a single root element <transformiix:result> with the text as a child transformtofragment you can also ...
... xsltprocessor.transformtofragment() takes two arguments: the source document to be transformed (as above) and the document object that will own the fragment (all fragments must be owned by a document).
... resources the following reflect the interface of the xsltprocessor object: nsixsltprocessor.idl xsltprocessor.webidl using xsltprocessor from xpcom components instantiating an xsltprocessor from an xpcom component requires a different syntax as the constructor is not defined inside components.
2015 MDN Fellowship Program - Archive of obsolete content
required skills and experience experienced web developer with expertise in javascript, css, html as well as with efficient network interaction (queuing resource fetching, etc.).
... github: digitarald twitter: @digitarald curriculum development brief project description mdn serves as a trusted resource for literally millions of developers on a regular basis.
Module structure of the SDK - Archive of obsolete content
just call the following: const { require } = cu.import("resource://gre/modules/commonjs/toolkit/require.js", {}) this will import require() into your scope.
...you can import sdk modules in just the same way you could from an sdk add-on: // import the sdk's base64 module var base64 = require("sdk/base64"); base64.encode("hello"); // "agvsbg8=" you can import other commonjs modules, too, as long as you know the path to them: // import my module var mymodule = require("resource://path/to/my/module.js"); in this case, though, you might be better off creating your own loader, so you can specify the paths property yourself.
page-mod - Archive of obsolete content
var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: data.url("my-script.js") }); from firefox 34, you can use "./my-script.js" as an alias for the resource:// url pointing to the script in your "data" directory.
... var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: data.url("style.css") }); from firefox 34, you can use "./style.css" as an alias for the resource:// url pointing to the stylesheet in your "data" directory.
content/mod - Archive of obsolete content
for example, the following code applies a style to a content window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); parameters modification : object the modification we want to apply to the target.
... for example, the following code applies and removes a style to a content window, adding a border to all divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ...
stylesheet/style - Archive of obsolete content
source string,array a string, or an array of strings, that contains css rules.
... style properties source an array of strings that contains the css rule(s) specified in the constructor's option; null if no source option was given to the constructor.
ui/button/action - Archive of obsolete content
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.
ui/button/toggle - Archive of obsolete content
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.
Localization - Archive of obsolete content
an uses four forms, that can be described as follows: one → n mod 10 is 1 and n mod 100 is not 11; few → n mod 10 in 2..4 and n mod 100 not in 12..14; many → n mod 10 is 0 or n mod 10 in 5..9 or n mod 100 in 11..14; other → everything else plural rules for all languages can be found in the cldr language plural rules page (although this table is out of date compared to the cldr xml source).
...this means that translators can't localize an add-on given the xpi alone, but must be given access to the add-on source.
Bootstrapped extensions - Archive of obsolete content
resourceuri nsiuri a uri pointing at the root of the add-ons files, this may be a jar: or file: uri depending on whether the add-on is installed unpacked or not.
... mark finkle provides some simple example code for restartless add-ons in mobile firefox, adding resources (like the options window) to bootstrapped extensions and using default preferences without a default/preferences/prefs.js file.
Install Manifests - Archive of obsolete content
some have simple string values, some are complex resources.
... format of the update manifest: the update manifest is a rdf/xml datasource.
Adding windows and dialogs - Archive of obsolete content
in general, windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content.
... if you use window.alert, the alert window will have the title [javascript application], indicating that the source of the message is not well defined.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
overriding/extending/amending existing functions a common thing add-ons do during their initialization is overriding/extending existing browser functions by using function.tostring/function.tosource and eval to "string-patch" the function body.
...var functionbody = gbrowser.addtab.tosource(); var afterbracket = functionbody.indexof("{") + 1; functionbody = functionbody.substring(0, afterbracket) + "myaddon.onaddtab(auri);" + functionbody.substring(afterbracket); eval("gbrowser.addtab = " + functionbody); of course, this not only looks messy, but can be quite error prone.
Connecting to Remote Content - Archive of obsolete content
this: <?xml version="1.0"?> <data> <shops> <shop> <name>apple</name> <code>a001</code> </shop> <shop> <name>orange</name> </shop> </shops> <total>2</total> </data> when a valid xml response comes back from the remote server, the xml document object can be manipulated using different dom methods, to display the data in the ui or store it into a local datasource.
...if you need your generated xul to have js code in it, all of it should be added locally, never from the remote source.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
function createscript(href, otherstuff) { var script = function (href, otherstuff) { dostuffwith(href); dootherstuff(); for (var somestuff in otherstuff) dosomemorestuffwith(somestuff); } return script.tosource() + "(" + [string.quote(href), uneval(otherstuff)] + ")"; } safely using remote html in the above cases, we're working with text content that needs to appear in generated dom.
... * @param {nsiuri} baseuri the base uri relative to which resource * urls should be processed.
Handling Preferences - Archive of obsolete content
firefox loads user preferences from a number of sources.
... each source is a js file that contains some special functions not available in regular code.
Security best practices in extensions - Archive of obsolete content
non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks.
...the first is to always get it from a trusted source.
Setting up an extension development environment - Archive of obsolete content
however, you won't enjoy the benefits of isolated resources, which we discussed earlier.
...however, it is usually easier to place extension files in a temporary location, which also protects source files from accidental deletion.
Signing an XPI - Archive of obsolete content
you can get a free certificate for open-source developers from unizeto certum, in 2010 it is a certum level iii ca.
... here are some current issuers: comodo instant-ssl code signing digi-sign digi-code geotrust code signing thawte code signing (owned by verisign) unizeto certum code-signing (free certificates for open-source authors) verisign code signing you will need to apply for a code signing certificate and satisfy the issuer's identity verification procedures.
Add-ons - Archive of obsolete content
so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
...well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own.
Creating reusable content with CSS and XBL - Archive of obsolete content
this page illustrates how you can use css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.
...copy and paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.geta...
JXON - Archive of obsolete content
resources the parker convention the badgerfish convention jxon: an architecture for schema and annotation driven json/xml bidirectional transformations converting html to other formats: json (the world wide web consortium) jxon – a simple way to keep xml out of your life – dino gambone's blog web reflection: jxon – lossless javascript to xml object notation convertion convert xml to json wi...
...th javascript – david walsh blog http://goessner.net/download/prj/jsonxml/ – just another json2xml and xml2json conversion tool serialize javascript objects to xml (for use with ajax) – tawani's blog rants xml.objtree – xml source code from/to javascript object like e4x – kawa.net jsonml – a conversion method which is lossless for element order, as it relies on arrays.
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
get the source you need cvs to get the source code.
... assuming you have cvs somewhere in your path, type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot c:\> set home=\temp c:\> cvs login (logging in to anonymous@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z3 co mozilla/embedding/browser/activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\browser\activex\src\pluginhostctrl.
Bonsai - Archive of obsolete content
start at the main bonsai query page or seamonkey tree control page here are some example queries that will give you a taste of what bonsai is capable of: today's checkins to the mozilla source mainline.
... bonsai source code the source code to the bonsai tool itself is also available, check out the information available at the bonsai project page.
Building TransforMiiX standalone - Archive of obsolete content
you need to get the source from cvs.
... the binary transformiix(.exe) will be in extensions/transformiix/source and dist/bin/ (symbolic link).
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/.
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
contents.rdf goes in the content sub-subdirectory: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:tinderstatus"/> </rdf:seq> <rdf:description about="urn:mozilla:package:tinderstatus" chrome:displayname="mozilla tinderstatus extension" chrome:author="myk melez" chrome:name="tinderstatus" chrome:extension="true" chrome:description="displays tinderbox status for the mozilla codebase."> </rdf:description> <rdf:seq about="urn:mozilla:overlays"> ...
... <rdf:li resource="chrome://navigator/content/navigator.xul"/> </rdf:seq> <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://tinderstatus/content/tinderstatusoverlay.xul</rdf:li> </rdf:seq> </rdf:rdf> install.js, on the other hand, goes into the tinderstatus-installer directory: initinstall( "mozilla tinderstatus extension", "/mozdev/tinderstatus", "0.1"); var installdir = getfolder("chrome","tinderstatus"); setpackagefolder(installdir); adddirectory("tinderstatus"); registerchrome( content | delayed_chrome, getfolder(installdir, "content")); var result = performinstall(); if ( result != success ) cancelinstall(result); once all the files are in place, use your zip utility from within the tinderstatus-installer directory to creat...
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource="ur...
...n:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:navigator"/> </rdf:seq> </chrome:packages> </rdf:description> <!-- version information.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
note: starting in gecko 2.0, the new omni.jar file contains the skin, among other resources.
... <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:editor"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:messenger"/> <rdf:li resource="urn:mozilla:skin:my_theme:navigator"/> save the file and exit the text editor.
Dehydra Frequently Asked Questions - Archive of obsolete content
use either a source files that rely on standard headers or a compressed .ii file (pass -save-temps to gcc to get .ii files).
...see libs/ directory in the dehydra source ...
Drag and Drop - Archive of obsolete content
sourcedocument the document where the drag started.
... sourcenode the dom node where the drag started.
Twitter - Archive of obsolete content
user info jetpack.lib.twitter.users.show({ id: "mozlabs", success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); friends of a user jetpack.lib.twitter.statuses.friends({ id: "mozlabs", page: 3, success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); trends jetpack.lib.twitter.trends({ success: function (data, status) console.log(data.tos...
...ource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); searching jetpack.lib.twitter.search({ q: "#jetpack", lang: "ja", rpp: 10, page: 5, since_id: 1337, success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); ...
Microsummary topics - Archive of obsolete content
note: when web sites install generators via window.sidebar.addmicrosummarygenerator(), firefox sets their uri attribute to urn:source:sourceurl, where sourceurl 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.
LIR - Archive of obsolete content
in nanojit, lir is the source language for compilation to machine code.
... 5 allocp pointer allocate stack space (result is an address) 6 reti void return an int 7 retq void 64 bit return a quad 8 retd void return a double 9 livei void extend live range of an int 10 liveq void 64 bit extend live range of a quad 11 lived void extend live range of a double 12 file void source filename for debug symbols 13 line void source line number for debug symbols 14 comment void a comment shown, on its own line, in lir dumps 15 not in use load 16 not in use 17 ldc2i integer load char and sign-extend to an int 18 lds2i integer load short and sign-extend to an int 19 lduc2ui intege...
Nanojit - Archive of obsolete content
a compiler's lir is typically one of several partly-compiled representations of a program that a compiler produces on the way from raw source code to machine code.
...-i ../nanojit -o jittest ../jittest.cpp libjs_static.a note: remove the -ddebug if you have not compiled spidermonkey with --enable-debug, and use whatever you called the sample source file in place of jittest.cpp.
Build - Archive of obsolete content
grab the latest release source code from mozilla's ftp site.
... extract the source code, and you should have a directory called mozilla/.
Priority Content - Archive of obsolete content
keller mostly completed*: rich-text editing in mozilla 1.3 "mostly completed" means i'm waiting for a location to store example and source files which are required for demoing the information in the articles.
... almost completed: eric meyer's articles on viewsource see here for full list and details.
Space Manager Detailed Design - Archive of obsolete content
here is the class declaration, taken from the source file as of 01.08.02 /** * class for dealing with bands of available space.
...there are several cases it has to handle, as specified in the source file comments: // when comparing a rect to a band there are seven cases to consider.
open - Archive of obsolete content
file is non-standard, not generally compiled into distributions, is a potential source of huge security holes, and not well tested.
... description this method opens the file, preparing its resources for use by subsequent methods to examine or modify the file.
Static Analysis for Windows Code under Linux - Archive of obsolete content
dehydra requires patching gcc such that it can load plugins as shared libraries: # prepare a directory mkdir $home/dehydra cd $home/dehydra #obtain gcc 4.3 sources wget ftp://mirrors.kernel.org/gnu/gcc/gcc...-4.3.0.tar.bz2 tar jxvf gcc-4.3.0.tar.bz2 # get the patches which enable plugins cd gcc-4.3.0/ # create an hg repository.
... now, the gcc source with plugin supports is ready, we should now build a cross compiler from this source.
Stress testing - Archive of obsolete content
tools for microsoft windows consume.exe from the windows server 2003 resource kit tools can consume various resources: physical memory, cpu time, page file, disk space and even the kernel pool.
...the only downside is you can't specify how much of the resource to use, only which one to consume.
Table Layout Regression Tests - Archive of obsolete content
execute the baseline test shutdown the layoutdebugger execute mozilla -layoutdebug - p foo >selftest.txt execute the verify test make a note which tests have failed grep 'failed' selftest.txt (these are false positives, quite frequently they indicate reflow problems, pages showing differently when loaded from cache) make your changes to the source, recompile.
... change the source if necessary until the regression tests indicate that your patch does not fork the block and table layout submit your patch and lists the remaining differences in the bug be prepared to cycle.
Actionscript Acceptance Tests - Archive of obsolete content
testname.abc_ for special cases where the .as source is not available (e.g.
... fuzzed files) it is possible to check in a .abc_ which will let the test harness run compiled files without source.
Running Tamarin performance tests - Archive of obsolete content
also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
Treehydra - Archive of obsolete content
treehydra is included in dehydra source, and is built when a plugin-enabled cxx is detected.
... for description of node types used in treehydra see tree.def and cp-tree.def in the gcc sources.
Venkman - Archive of obsolete content
venkman internals notes on venkman source code.
... source code the source code for venkman may be found in mercurial at the following url: http://hg.mozilla.org/venkman/summary community view mozilla forums...
Example Sticky Notes - Archive of obsolete content
--> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound element.
... --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element.
move - Archive of obsolete content
method of file object syntax int move( filespecobject source, filespecobject dest ); parameters the move method has the following parameters: source a filespecobject representing the source file.
... example source = getfolder("program", "file.txt"); dest = getfolder("chrome"); err = file.move(source, dest); ...
Return Codes - Archive of obsolete content
patch_bad_checksum_target -221 the checksum generated for the source file does not match the checksum in the xpi file.
... download_error -228 problem with download script_error -229 error in the script already_exists -230 file already exists locally is_file -231 expected target directoy and got file source_does_not_exist -232 source file/dir not found source_is_directory -233 expected source file and got directory source_is_file -234 expected source directory and got file insufficient_disk_space -235 not enough disk space for install filename_too_long -236 un...
Learn XPI Installer Scripting by Example - Archive of obsolete content
in the browser.xpi install script, the files are added in lines 26-41: err = adddirectory("program", "6.0.0.2000110807", "bin", // jar source folder communicatorfolder, // target folder "", // target subdir true ); // force flag logcomment("adddirectory() returned: " + err); // create the plugins folder next to mozilla var pluginsfolder = getfolder("plugins"); if (!fileexists(pluginsfolder)) { var ignoreerr = dircreate(pluginsfo...
...the adddirectory, like addfile, handles both the source file location and the target location.
A XUL Bestiary - Archive of obsolete content
near synonyms for xul there is much confusion about the words that begin with "x" in the mozilla open source project.
... events events are also a source of confusion for many less-hardened developers.
orient - Archive of obsolete content
horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source.
... vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source.
Attribute (XUL) - Archive of obsolete content
abelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed color cols command commandupdater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed f...
... popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
XUL Events - Archive of obsolete content
attribute: oncontextmenu drag the drag event is sent to the source node (the node that was dragged) several times a second while the drag is occurring.
... attribute: ondragdrop dragend the dragend event is sent to the source node (the node that was dragged) when the drag is finished.
Introduction to XUL - Archive of obsolete content
the chrome protocol is another mozilla extension allowing the exact location of files involved in the chrome description to be moved without affecting the xul source.
...this tie is defined within the xul: <xul:window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <broadcaster id="cangoback"/> <titledbutton src="resource:/res/toolbar/tb_back.gif" align="bottom" value="back" onclick="browserback()"> <observes element="cangoback" attribute="disabled"/> </titledbutton> </window> but it is up to the application code to locate the broadcasters within a window so it can punch them when necessary.
database - Archive of obsolete content
« xul reference database type: nsirdfcompositedatasource returns the composite datasource created when all the datasources of an element are combined.
... set to null for elements that do not have a datasources attribute.
uri - Archive of obsolete content
ArchiveMozillaXULPropertyuri
when a rule is evaluated, it scans through each resource in the rdf datasource looking for a match.
... each resource is placed in the variable specified in the uri attribute in turn.
Property - Archive of obsolete content
umns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag ...
...onshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhi...
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://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate...
...although the builder actually generates mutliple matches for one resource, in many cases it isn't necessary to be aware of this detail when creating templates.
Namespaces - Archive of obsolete content
for example using the following xml document containing a list of people: <people xmlns="www.example.com/people"> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <action> <listitem uri="?" label="?ns:name"/> </action> </template> </listbox> once added to the template element the namespaces can then be referenced inside temple rule elements too, this works both in rdf and xml templates.
... <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <rule ns:gender="male"> <label uri="?" label="?ns:name"/> </action> </template> </listbox> ...
RDF Query Syntax - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <rule> ...
...since ?relateditem isn't known, the builder will allow any value for the node the arrow points to, and will look in the datasource for all possible values.
Recursive Generation - Archive of obsolete content
for the top level generation the parent insertion point is the element with the datasources attribute, in this example a <vbox>.
...here is the content that was generated after one iteration: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <hbox uri="?relateditem"> <button label="?start"/> <button label="?relateditem"/> </hbox> </action> </template> <hbox id="http://www.xulplanet.com/rdf/b"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/b"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/c"> <bu...
XML Assignments - Archive of obsolete content
here is an example: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?namelength" expr="string-length(@name)"/> <assign var="?siblings" expr="count(../*) - 1"/> </query> <action> <hbox uri="?" align="center"> <button label="?name"/> <label value="?gender"/> <label value="?namelength"/> <label value="?siblings"/> ...
...(in this case, the number of xml node siblings in the document, not the number of real siblings the people have, clearly the people in the datasource aren't actually siblings).
Template Guide - Archive of obsolete content
ries using multiple queries to generate more results building trees with templates building trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sorting results additional template attributes template logging xml namespaces alternative approaches javascript templates xuljsdatasource: a component for extensions, which bring a "javascript template syntax".
... it allows to use javascript objects as a data source for xul templates.
Adding Style Sheets - Archive of obsolete content
> <menuitem label="date modified"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"/> ...
... find files example so far : source view in the next section, we will look at how to apply styles to trees.
Additional Install Features - Archive of obsolete content
finally, we call the file.copy function which copies the source file to the destination.
...for example, you might put the following as the last section of your script: if (getlasterror() == success) { performinstall(); } else { cancelinstall(); } error codes that could be returned by getlasterror() are listed in the mozilla source file nsinstall.h.
Localization - Archive of obsolete content
/> <menuitem label="&type.date;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="&mode.is;"/> <menuitem label="&mode.isnot;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"...
... find files example so far: source next, we'll look at property files.
Manifest Files - Archive of obsolete content
the browser.manifest file used by firefox looks like this: content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes overlay chrome://global/content/viewsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://global/content/viewpartialsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul two packages are listed here, 'branding' and 'browser'.
...<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:myapplication"/> </rdf:seq> <rdf:description about="urn:mozilla:package:myapplication" chrome:displayname="application title" chrome:author="author name" chrome:name="myapplication" chrome:extension="true"/> </rdf:rdf> content,install,url,file:///main/app/ create a directory somewhere on your disk.
More Tree Features - Archive of obsolete content
example hierarchical tree the following is a simple example: example 1 : source view <tree rows="6"> <treecols> <treecol id="firstname" label="first name" primary="true" flex="3" /> <treecol id="lastname" label="last name" flex="7" /> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="guys" /> </treerow> <treechildren> <treeitem> <treerow> <treecell ...
...you will need to save a number of attributes as indicated in the example below: example 2 : source view <tree enablecolumndrag="true" flex="1"> <treecols> <treecol id="runner" label="runner" flex="2" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="city" label="home city" flex="2" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="starttime" label="start time" flex="1" persist="width ordinal hidden" /> <s...
Splitters - Archive of obsolete content
splitter example an example would be helpful here: example 1 : source view <hbox flex="1"> <iframe id="content-1" width="60" height="20" src="w1.html"/> <splitter collapse="before" resizeafter="farthest"> <grippy/> </splitter> <iframe id="content-2" width="60" height="20" src="w2.html"/> <iframe id="content-3" width="60" height="20" src="w3.html"/> <iframe id="content-4" width="60" height="20" src="w4.html"/> </hbox> here, four iframes have bee...
... normal state: collapsed state: find files example so far : source view next, we'll find out how to create toolbars.
Tabboxes - Archive of obsolete content
tabbox example example 1 : source view <tabbox> <tabs> <tab label="mail"/> <tab label="news"/> </tabs> <tabpanels> <tabpanel id="mailtab"> <checkbox label="automatically check for mail"/> </tabpanel> <tabpanel id="newstab"> <button label="clear news buffer"/> </tabpanel> </tabpanels> </tabbox> here, two tabs have been added, the first labeled 'mail' and the other 'news'.
... find files example so far : source view next, we'll look at how to create grids of content.
Toolbars - Archive of obsolete content
a simple toolbar inside a toolbox source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> </toolbar> </toolbox> this has created a toolbar containing two buttons, a back button and a forward button.
... the find files example so far: source view next, we'll find out how to add a menu bar to a window.
Tree Box Objects - Archive of obsolete content
example 1 : source view <script> function doscroll(){ var value = document.getelementbyid("tbox").value; var tree = document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecol...
... example 2 : source view <script> function updatefields(event){ var row = {}, column = {}, part = {}; var tree = document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.getcellat(event.clientx, event.clienty, row, column, part); if (column.value && typeof column.value != "string") column.value = column.value.id...
XBL Example - Archive of obsolete content
example 1 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext"/> <xul:label flex="1"/> <xul:button xbl:inherits="label=nexttext"/> </xul:hbox> </xul:vbox> </content> </binding> this bindin...
... the final code the final code is as follows: example 2 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext" oncommand="parentnode.parentnode.parentnode.page--;"/> <xul:description flex="1"/> <xul:button xbl:inherits="label=next...
XPCOM Interfaces - Archive of obsolete content
function copyfile(sourcefile,destdir) { // 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.
XML - Archive of obsolete content
xul is little beyond the set of tags used to define interface widgets, the relationship between them, or grammar, and some built-in flexibility for using extra resources like images, html elements, and other standards-based technologies.
...as the figure below indicates, xul is an amalgam of these different standards: css for styling or "skinning", dom for the object model and scriptable access, javascript for the linking and behavior, rdf for resources, xml for the structure, and html for the content and some little extras.
XUL Event Propagation - Archive of obsolete content
ert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems.
...if you cut and paste the source code from the example above into a separate file, you can see that the effect of these event handlers is to display as many as four different alert dialogs as the event bubbles up the hierarchy.
arrowscrollbox - Archive of obsolete content
"orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width c...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width disabled type: boolean gets and sets the value of the disabled attribute.
assign - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
bbox - Archive of obsolete content
ArchiveMozillaXULbbox
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
box - Archive of obsolete content
ArchiveMozillaXULbox
horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
broadcaster - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
broadcasterset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
button - Archive of obsolete content
horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source.
... vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source.
column - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
columns - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
command - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a command element can be used to invoke an operation that can come from multiple sources.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
deck - Archive of obsolete content
ArchiveMozillaXULdeck
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
dropmarker - Archive of obsolete content
examples properties accessibletype attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), geteleme...
grid - Archive of obsolete content
ArchiveMozillaXULgrid
<menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
grippy - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
groupbox - Archive of obsolete content
roperties accessibletype examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), geteleme...
hbox - Archive of obsolete content
ArchiveMozillaXULhbox
example <!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
iframe - Archive of obsolete content
parent 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 whethe...
...this can be used to workaround things like bug 540911 inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
keyset - Archive of obsolete content
attributes disabled examples <keyset> <key id="sample-key" modifiers="shift" key="r"/> </keyset> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width d...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
listcol - Archive of obsolete content
"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
listcols - Archive of obsolete content
listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
listhead - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattribute...
listheader - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), geteleme...
observes - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
page - Archive of obsolete content
ArchiveMozillaXULpage
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
popupset - Archive of obsolete content
ples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
preferences - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods void firechangedevent(in domelement preference); creates and dispatches a changed (non-bubbling) event to the specified preference element.
progressmeter - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
queryset - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inher...
...ited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserda...
resizer - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
row - Archive of obsolete content
ArchiveMozillaXULrow
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
rows - Archive of obsolete content
ArchiveMozillaXULrows
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
rule - Archive of obsolete content
ArchiveMozillaXULrule
when no query element is used in a template, a default query is used and the simple query syntax may be used for rdf datasources.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
script - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
scrollbox - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
scrollcorner - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width proper...
...ties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfea...
separator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
spacer - Archive of obsolete content
examples <box> <button label="left"/> <spacer flex="1"/> <button label="right"/> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
spinbuttons - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
stack - Archive of obsolete content
ArchiveMozillaXULstack
--> </hbox> </stack> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
statusbar - Archive of obsolete content
properties accessibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width proper...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsb...
stringbundle - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element which can be used to load localized resources from property files.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
stringbundleset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevent...
...s, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens()...
tabpanel - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
titlebar - Archive of obsolete content
dow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note:...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, ...
toolbar - Archive of obsolete content
the chromeclass-toolbar class may be used to create a toolbar where its visibility depends on the toolbar flag when opening the window with the window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() method.
toolbarbutton - Archive of obsolete content
horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source.
... vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source.
toolbargrippy - Archive of obsolete content
properties accessible examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, ge...
toolbaritem - Archive of obsolete content
d="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
toolbarpalette - Archive of obsolete content
tton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
toolbarseparator - Archive of obsolete content
properties accessibletype examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width proper...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsby...
toolbarset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width proper...
...ties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatur...
toolbarspacer - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute,...
toolbarspring - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width proper...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsb...
treecell - Archive of obsolete content
this attribute should be placed alongside the datasources attribute.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
treechildren - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
treecol - Archive of obsolete content
use the sortresource attribute to specify the sort key.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
treecols - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), geteleme...
treeitem - Archive of obsolete content
elements that appear inside the element with the attribute will be repeated for each node in the rdf datasource.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getele...
treerow - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
treeseparator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
vbox - Archive of obsolete content
ArchiveMozillaXULvbox
example <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
where - Archive of obsolete content
ArchiveMozillaXULwhere
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi.
... where is the source code?
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi.
... where is the source code?
Application Update - Archive of obsolete content
getting started you will need the following utility scripts from http://lxr.mozilla.org/mozilla/sourc...ate-packaging/ (or local source of xulrunner) common.sh make_full_update.sh you will need mar / mar.exe to build a complete update patch.
... resources http://wiki.mozilla.org/software_update http://wiki.mozilla.org/updategeneration http://developer.mozilla.org/en/docs/setting_up_an_update_server http://chatzilla.rdmsoft.com/xulrunner/update/ http://developer.mozilla.org/en/docs/xulrunner_tips ...
Building XULRunner - Archive of obsolete content
please read and follow the general build documentation for instructions on how to get sources and set up build prerequisites.
...for instance, in firefox 2.0.0.9 you will get : mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.8.1.9) gecko/20071025 firefox/2.0.0.9 therefore the xulrunner version for this firefox version is : 1.8.1.9 fetching sources from mercurial as with all other mozilla products, one would fetch recent sources from mercurial.
Getting started with XULRunner - Archive of obsolete content
note: make sure your application name is lowercase and longer than 3 characters step 5: set up the chrome manifest the chrome manifest file is used by xulrunner to define specific uris which in turn are used to locate application resources.
...installing the application creates an os x application bundle: /library/frameworks/xul.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip once installed, you can run the application: /library/frameworks/xul.framework/xulrunner-bin "/applications/finkle/testapp.app/contents/resources/application.ini" you may run it without installing (but with the menu bar and dock icon missing) in os x by typing: /library/frameworks/xul.framework/xulrunner-bin "/<full path>/testapp/application.ini" note: the full path is required or a "error: couldn't parse application.ini."-message will be returned.
reftest opportunities files - Archive of obsolete content
introduction these are files in the mozilla source that may be usable for reftest.
...org/css/test/sec170503 http://dbaron.org/css/test/sec170504 http://dbaron.org/css/test/tborder1 http://dbaron.org/css/test/tborder2 http://dbaron.org/css/test/sec1706c http://dbaron.org/css/test/sec1801 http://dbaron.org/css/test/sec1802 http://dbaron.org/css/test/sec1803 http://dbaron.org/css/test/outline http://dbaron.org/css/test/sq_small http://dbaron.org/css/test/sq_large tests from mozilla source tree parser/htmlparser/tests/html/xmp005.html parser/htmlparser/tests/html/value001.html parser/htmlparser/tests/html/utf8001.html parser/htmlparser/tests/html/usascii.html parser/htmlparser/tests/html/title01.html parser/htmlparser/tests/html/title.html parser/htmlparser/tests/html/tiny.html parser/htmlparser/tests/html/thead001.html parser/htmlparser/tests/html/text003.html parser/htmlparser/t...
Monitoring plugins - Archive of obsolete content
it is therefore technically incorrect to say that the runtime is a measure of cpu use, however, it is a good representation of overall resources being consumed by the plugin.
...erver services unregister: function() { if (this.registered == true) { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "experimental-notify-plugin-call"); this.registered = false; } } } additional resources more information on the observer service: nsiobserverservice nsiobserver ...
NP_GetMIMEDescription - Archive of obsolete content
on windows you have to define supported mimetypes in the dll resource file.
... one mime type // example inside http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/basic/unix/plugin.cpp #define mime_type_description "application/basic-plugin:bsp:basic example plug-in for mozilla" const char* np_getmimedescription(void) { return(mime_types_description); } two mime types const char* np_getmimedescription(void) { return "application/basic-example-plugin:xmp1:example 1;application/basic-example2-plugin:xmp2, xm2p:example 2"; } gnome integration if you use gnome vfs (gnome-vfs-2.0), you can get the mime type description with a function.
NP_Initialize - Archive of obsolete content
allocate any memory or resources shared by all instances of your plug-in at this time.
... after the last instance of a plug-in has been deleted, the browser calls np_shutdown, where you can release allocated memory or resources.
Writing a plugin for Mac OS X - Archive of obsolete content
the sample is posted under a bsd-style license that means you can use it for anything, even if you don't plan to release your source code.
... getting started if you check out the mozilla source code in mac os x, you can simply open basicplugin.xcodeproj in xcode, click build, and you're done.
Proposal - Archive of obsolete content
draft exists source guid when an rss item is posted in response to a previous item (called the source item) rss 2.0 offers the source element which allows the item to refer to the rss feed which contains the source item.
... the sguid specification provides a more granular approach by offering an sourceref element which can reference the guid permalink of the source.
TCP/IP Security - Archive of obsolete content
while this provides a very high degree of control and flexibility over the application’s security, it may require a large resource investment to add and configure controls properly for each application.
... another good source of information is nist sp 800-52, guidelines on the selection and use of transport layer security, available from https://csrc.nist.gov/publications/nistpubs/.) the use of tls typically requires each application to support tls; however, unlike application layer controls, which typically involve extensive customization of the application, transport layer controls such as tls are much less intrusiv...
Building a Theme - Archive of obsolete content
when you load content using a chrome uri, firefox uses the chrome registry to translate these uris into the actual source files on disk (or in jar packages).
... open the file called chrome.manifest that you created alongside the chrome directory at the root of your extension's source folder hierarchy.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- 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:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_the...
...me:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_theme:help"/> </rdf:seq> </chrome:packages> </rdf:description> <!-- version information.
azimuth - Archive of obsolete content
ArchiveWebCSSazimuth
in combination with elevation, the azimuth css property enables different audio sources to be positioned spatially for aural presentation.
... initial valuecenterapplies toall elementsinheritedyescomputed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -360deg to 360deg.
CSS - Archive of obsolete content
ArchiveWebCSS
rty is a microsoft extension that specifies whether zooming is enabled.-ms-filterthe -ms-filter css property is a microsoft extension that sets or retrieves the filter or collection of filters applied to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.-m...
...a slider control is one possible representation of <input type="range">.::-ms-valuethe ::-ms-value css pseudo-element is a microsoft extension that applies rules to the value of a text or password <input> control or the content of a <select> control.@mediaparent for archived media features.azimuthin combination with elevation, the azimuth css property enables different audio sources to be positioned spatially for aural presentation.
The Business Benefits of Web Standards - Archive of obsolete content
furthermore by strictly marking the production process, time, budgets, and resources for both the initial development and the ongoing publishing of emerging content can be measured and controlled.
... according to many sources, gecko-based browsers are now much more common than netscape 4.x and msie 4 browsers, and it is increasing significantly with time.
XQuery - Archive of obsolete content
the extension now includes and interfaces with the open-source version of saxonica's saxon b (though this extension currently only performs the xqueries).
...berkeley db xml was the initial choice by the extension developer for its support across many languages (c++, java, python, perl, php, etc.) (besides its also being open source), but now some problems may exist with bdbxml (unlike saxon).
Common causes of memory leaks in extensions - Extensions
all zombie compartments in extensions are caused by a failure to release resources appropriately in certain circumstances, such as when a window is closed, a page unloads, or an extension is disabled or removed.
... the following example shows how to unload your modules again (bootstrap.js): components.utils.import("resource://gre/modules/services.jsm"); function startup(data, reason) { // this assumes your add-on did register some chrome components.utils.import("chrome://myaddon/content/mymodule.jsm"); } function shutdown(data, reason) { // no need to do regular clean up when the application is closed // unless you need to break circular references that might negatively // impact the shutdown process.
bootstrap.js - Extensions
function startup(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// app_startup /// addon_enable /// addon_install /// addon_upgrade /// addon_downgrade } function shutdown(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// ...
... /// reason types: /// app_shutdown /// addon_disable /// addon_uninstall /// addon_upgrade /// addon_downgrade } function install(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// addon_install /// addon_upgrade /// addon_downgrade } function uninstall(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// addon_uninstall /// addon_upgrade /// ...
Anatomy of a video game - Game development
obviously, cleaning up resources is not time sensitive (especially if tidying is more disruptive than the garbage itself).
...those are good candidates to throttle when available resources become a concern.
Examples - Game development
pyramid solitaire ancient egypt pyramid solitaire app ported to webassembly with emscripten assorted demos wavegl webgl visualizer for sound sources.
... autumn falling autumn leaves, with light source shining through.
Building up a basic demo with A-Frame - Game development
note: an entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
... a-frame takes care of setting up everything you need: a default light source and camera are included, so the cube is visible.
Building up a basic demo with PlayCanvas editor - Game development
an entity is any object used in the scene — it cna be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
...as you can see, the file contains some boilerplate code already: pc.script.create('boxanimation', function (app) { // creates a new boxanimation instance var boxanimation = function (entity) { this.entity = entity; }; boxanimation.prototype = { // called once after all resources are loaded and before the first update initialize: function () { }, // called every frame, dt is time in seconds since last update update: function (dt) { } }; return boxanimation; }); the most interesting part is the update() function, which is where we can put any code that we want repeated on every frame.
Building up a basic demo with the PlayCanvas engine - Game development
built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
... note: an entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
Building up a basic demo with Three.js - Game development
to have both, the phong and lambert materials properly visible, we need to introduce a source of light.
... lights there are various types of light sources available in three.js.
GLSL Shaders - Game development
the cube's source code instead of creating everything from scratch we can reuse the building up a basic demo with three.js source code of the cube.
...our example doesn't do much but there are many more cool things you can do with shaders — check out some really cool ones on shadertoy for inspiration and to learn from their sources.
3D games on the Web - Game development
building up a basic demo with playcanvas playcanvas is a popular 3d webgl game engine open-sourced on github, with an editor available online and good documentation.
... source code you can find all the source code for this series demos on github.
Desktop mouse and keyboard controls - Game development
it's also easier to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code.
... you can see this example in action online at end3r.github.io/javascript-game-controls and the full source code can be found at github.com/end3r/javascript-game-controls.
Implementing controls using the Gamepad API - Game development
demo the full version of the hungry fridge game was built first, and then to showcase the gamepad api in action and show the javascript source code, a simple demo was created.
...you can play the full version of the hungry fridge game directly in your browser, install it from the firefox marketplace or check the source code of the demo along with all the other resources on the gamepad api content kit.
Square tilemaps implementation: Scrolling maps - Game development
ndcol; c++) { for (var r = startrow; r <= endrow; r++) { var tile = map.gettile(c, r); var x = (c - startcol) * map.tsize + offsetx; var y = (r - startrow) * map.tsize + offsety; if (tile !== 0) { // 0 => empty tile this.ctx.drawimage( this.tileatlas, // image (tile - 1) * map.tsize, // source x 0, // source y map.tsize, // source width map.tsize, // source height math.round(x), // target x math.round(y), // target y map.tsize, // target width map.tsize // target height ); } } } demo our scrolling tilemap ...
...you can take a look at a live demo, and see its source code.
Create the Canvas and draw on it - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson1.html.
... compare your code here's the full source code of the first lesson, running live in a jsfiddle: exercise: try changing the size and color of the given shapes.
Animations and tweens - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson14.html.
... animations in phaser, animations, involve taking a spritesheet from an external source and displaying the sprites sequentially.
Visual typescript game engine - Game development
dia.ts | | | | ├── broadcaster.ts | | | | ├── connector.ts | | | | ├── network.ts | | | ├── visual-methods/ | | | | ├── sprite-animation.ts | | | | ├── text.ts | | | | ├── texture.ts | | | ├── browser.ts | | | ├── math.ts | | | ├── position.ts | | | ├── resources.ts | | | ├── sound.ts | | | ├── system.ts | | | ├── view-port.ts | | | ├── visual-render.ts | | ├── interface/ | | | ├── drawi.ts | | | ├── global.ts | | | ├── visual-components.ts | | ├── multiplatform/ | | | ├── mobile/ | | | | ├── player-controls.ts | | | ├...
... code format : npm run fix npm run tslint or use : tslint -c tslint.json 'src/**/*.ts' --fix tslint -c tslint.json 'src/**/*.ts' the external licence in this project : - networking based on : muaz khan mit license www.webrtc-experiment.com/licence - base physics based on : original source: matter.js https://github.com/liabru/matter-js matter.ts used because typescript orientation.
Game development
in this area of the site, we provide resources for web developers wanting to develop games.
...also, check out games.mozilla.org for more useful resources!
Continuous Media - MDN Web Docs Glossary: Definitions of Web-related terms
continuous media is data where there is a timing relationship between source and destination.
...continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict.
DNS - MDN Web Docs Glossary: Definitions of Web-related terms
dns (domain name system) is a hierarchical and decentralized naming system for internet connected resources.
... dns maintains a list of domain names along with the resources, such as ip addresses, that are associated with them.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
a distributed denial-of-service (ddos) is an attack in which many compromised systems are made to attack a single target, in order to swamp server resources and block legitimate users.
...ddos concerns computer networks and cpu resource management.
Domain - MDN Web Docs Glossary: Definitions of Web-related terms
a domain is an authority within the internet that controls its own resources.
...many owners choose to have a subdomain "www" to point to their world_wide_web resource, but that's not required (and has even fallen somewhat out of favor).
Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded.
... for instance, script-src allows developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts.
Gonk - MDN Web Docs Glossary: Definitions of Web-related terms
gonk is the lower-level operating system of firefox os and consists of a linux kernel (based on the android open source project (aosp)) and userspace hardware abstraction layer (hal).
... the kernel and several of the userspace libraries are common open-source projects: linux, libusb, bluez, and so forth.
HTTP - MDN Web Docs Glossary: Definitions of Web-related terms
resources using the "http" schema are typically transported over unencrypted connections using the http protocol.
... the "https" scheme (as in "https://developer.mozilla.org") indicates that a resource is transported using the http protocol, but over a secure tls channel.
Packet - MDN Web Docs Glossary: Definitions of Web-related terms
it consists of network addresses for the source and destination, sequencing information, and error detection codes and is generally found in packet headers and footer.
... addresses when routing network packets it requires two network addresses the source address of the sending host, and the destination address of the receiving host.
SRI - MDN Web Docs Glossary: Definitions of Web-related terms
subresource integrity (sri) is a security feature that enables browsers to verify that files they fetch (for example, from a cdn) are delivered without unexpected manipulation.
... learn more subresource integrity content-security-policy: require-sri-for ...
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
to access a web component, a client supplies a unique universal identifier, called a url (uniform resource location) or uri (uniform resource identifier) (formally called universal document identifier (udi)).
... linking, or connecting resources through hyperlinks, is a defining concept of the web, aiding its identity as a collection of connected documents.
WAI-ARIA basics - Learn web development
it is difficult to find a conclusive resource that states what features of wai-aria are supported, and where, because: there are a lot of features in the wai-aria spec.
...we'll return to our simple absolutely-positioned tabbed interface (see hiding things in our css and javascript accessibility article), which you can find at tabbed info box example (see source code).
Backgrounds and borders - Learn web development
you can create a gradient then copy and paste out the source code that generates it.
... the background-attachment property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).
Pseudo-classes and pseudo-elements - Learn web development
:playing matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.
... :paused matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.
Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> you can find the finished example on github (see also the source code.) color the color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).
... verdana sans-serif note: among various resources, the cssfontstack.com website maintains a list of web safe fonts available on windows and macos operating systems, which can help you make your decision about what you consider safe for your usage.
Styling lists - Learn web development
the unstyled example is available on github (check out the source code too.) the html for our list example looks like so: <h2>shopping (unordered) list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ul> <li>hummus</li> <li>pita</li> <li>green salad</li> <li>halloumi</li> </ul> <h2>recipe (ordered) list</h2> <p>paragraph for reference...
... handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { line-height: 1.5; } /* description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; } the first rule sets a sitewide font an...
How do I use GitHub Pages? - Learn web development
you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it.
...underneath source, choose master branch.
What are browser developer tools? - Learn web development
chrome: open the developer tools and then select the sources tab.
... source code set breakpoints where you want to pause execution.
Common questions - Learn web development
these terms are often a source of confusion for newcomers to the web, or are used incorrectly.
...it is the mechanism used by browsers to retrieve any published resource on the web.
Advanced form styling - Learn web development
th: 100%; padding: 5px; height: 30px; } input[type="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } label { margin-bottom: 5px; } button { width: 60%; margin: 0 auto; } note: if you want to test these examples across a number of browsers simultaneously, you can find it live here (also see here for the source code).
...ottom, #eee, #ccc); border: 1px solid rgb(169, 169, 169); border-radius: 5px; text-align: center; line-height: 1.5; } label[for="file"]:hover { background: linear-gradient(to bottom, #fff, #ddd); } label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; } you can see the result of the above css styling in the below live example (see also styled-file-picker.html live, and the source code).
Publishing your website - Learn web development
sometimes you get what you pay for, but sometimes these resources are good enough for your initial experiments.
...you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it.
Tips for authoring fast-loading HTML pages - Learn web development
tools such as html tidy can automatically strip leading whitespace and extra blank lines from valid html source.
... other tools can "compress" javascript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions.
Mozilla splash page - Learn web development
project brief in this assessment we are presenting you with a mostly-finished mozilla splash page, which aims to say something nice and interesting about what mozilla stands for, and provide some links to further resources.
... along with mdn.svg, these images will be your icons to link to further resources, inside the further-info area.
Inheritance in JavaScript - Learn web development
i\'m ' + this.name.first + '.'); }; note: in the source code, you'll also see bio() and farewell() methods defined.
...you can do so by going back to your source code and adding the following line at the bottom: object.defineproperty(teacher.prototype, 'constructor', { value: teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true }); now if you save and refresh, entering teacher.prototype.constructor should return teacher(), as desired, plus we are now inheriting from person()!
Object prototypes - Learn web development
you can use our oojs-class-further-exercises.html example (see also the source code), if you don't already have it from working through the last article.
... go back to our oojs-class-further-exercises.html example and make a local copy of the source code.
Aprender y obtener ayuda - Learn web development
there are also several other great resources on the web, some of which we'll mention below.
... other online resources we already mentioned stack overflow, but there are other online resources that can help.
HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...
Measuring performance - Learn web development
the performance api, which provides access to performance-related information for the current page, includes the performance timeline api, the navigation timing api, the user timing api, and the resource timing api.
...performance entries are also created in indirect ways; such as loading a resource, like an image.
Website security - Learn web development
while the data from post or get requests is the most common source of xss vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and displayed.
...the requests may simply be numerous, or they may individually consume large amounts of resource (e.g., slow reads or uploading of large files).
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Ember interactivity: Events, classes and state - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React interactivity: Events and state - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React interactivity: Editing, filtering, conditional rendering - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Beginning our React todo list - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Starting our Svelte Todo list app - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Componentizing our Svelte app - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Using Vue computed properties - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue conditional rendering: editing existing todos - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Adding a new todo form: Vue events, methods, and models - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Styling Vue components with CSS - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new t...
...odo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Setting up your own test automation environment - Learn web development
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 your tests (see later on),...
... note: the resources menu option on the browserstack automation dashboard contains a wealth of useful information on using it to run automated tests.
Git and GitHub - Learn web development
depending on how you like to work, you could use a git gui client (we'd recommend github desktop, sourcetree or git kraken) or just stick to using a terminal window.
... guides note that the links below take you to resources on external sites.
Command line crash course - Learn web development
a great resource for getting a quick overview of specific terminal commands is tldr.sh.
... with prettier there's a number of ways automation can be achieved and though they're beyond the scope of this article, there's some excellent resources online to help (some of which have been linked to).
omni.ja (formerly omni.jar)
omni.ja contents the omni.ja file contains assorted application resources: chrome.manifest the chrome manifest file.
... /res/ miscellaneous resource files.
Information for External Developers Dealing with Accessibility
in addition, here is a list of official keyboard ui guidelines for each desktop: windows keys: guidelines on keyboard ui design and on implementing keyboard shortcuts: an excellent resource from microsoft.
... other useful resources links for those who wish to learn more about web accessibility or open source accessibility.
Theme concepts
static themes static themes are specified using the same resources as a browser extension: a manifest.json file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder.
... these resources are then packed in a zip for publication on addons.mozilla.org (amo) or for self-distribution.
Command line options
-safe-mode launches the application with all extensions disabled, for that launch only (extensions are not loaded, but are not permanently disabled in the extension manager data source).
... --class=wm_class set the wm_class resource class of the x11 windows created by the application.
Debugging on Windows
debugging release and nightly builds refer to the steps to use the mozilla symbol server and source server.
... creating a visual c++ project for firefox please refer to the documentation on firefox-source-docs.
Makefiles - Best practices and suggestions
for ex use defines within sources to shift platform logic into your source code.
... all subsequent make calls must become a nop unless sources or dependencies change or have been removed.
Simple Sunbird build
# get the source hg clone http://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # setup a basic .mozconfig file echo 'ac_add_options --enable-application=calendar' > .mozconfig # let's build sunbird...
...how to build again later in your comm-central directory, run these commands: # get the latest source python client.py checkout then just re-run the "make -f client.mk" command above.
Updating NSPR or NSS in mozilla-central
the nspr and nss sources in mozilla-central are maintained by the nspr and nss teams and always taken from exports of hg tags.
.../nss are separately maintained and released, the mozilla hg server rejects accidental changes/forking, if the required keywords are missing in the commit comment.) if nspr or nss must be upgraded to a new static tag, follow this procedure: before starting, make sure your local repository is updated to mozilla-central tip and that there are no local changes: $ hg status -mard pull the new sources $ python client.py update_nspr nspr_tag_name or $ python client.py update_nss nss_tag_name if you update a branch older than mozilla 17 (without the change from bug 782784), you must manually add a dummy change (add or remove a blank line) to force a rebuild of nspr: mozilla/nsprpub/config/prdepend.h or nss: mozilla/security/nss/coreconf/coreconf.dep check directory mozilla...
Creating Custom Events That Can Pass Data
(see bug 427537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system.
...the trunk you needed to download (or check out) the trunk source because you will have to modify it in order to implement your event.
Contributing to the Mozilla code base
there are plenty of resources available on the mdn web docs!
...here are some further resources to help: ask for help in a comment on the bug, or in #introduction:mozilla.org or #developers:mozilla.org check out https://developer.mozilla.org/docs/developer_guide and its parent document, https://developer.mozilla.org/docs/mozilla our reviewer checklist is very useful, if you have a patch near completion, and seek a favorable review utilize our build tool mach, its linting, static anal...
Error codes returned by Mozilla APIs
ns_error_no_aggregation (0x80040110) ns_error_not_available (0x80040111) an operation could not be completed because some other necessary component or resource was not available.
... ns_error_port_access_not_allowed (0x804b0013) ns_error_net_reset (0x804b0014) ns_error_ftp_login (0x804b0015) ns_error_ftp_cwd (0x804b0016) ns_error_ftp_pasv (0x804b0017) ns_error_ftp_pwd (0x804b0018) ns_error_not_resumable (0x804b0019) ns_error_invalid_content_encoding (0x804b001b) the content encoding of the source document was incorrect, for example returning a plain html document advertised as content-encoding: gzip ns_error_ftp_list (0x804b001c) ns_error_unknown_host (0x804b001e) ns_error_redirect_loop (0x804b001f) ns_error_entity_changed (0x804b0020) ns_error_unknown_proxy_host (0x804b002a) ns_error_unknown_socket_type (0x804b0033) ns_error_socket_create_failed (0x804b0034) ...
Security best practices for Firefox front-end engineers
the canonical truth for the list of whitelisted elements is the source code.
...the linter makes an exception for code that uses string literals that are hard coded in the source code, assuming benevolent developers.
Firefox
firefox is an open source project; much of the code is contributed by our huge community of volunteers.
... developer guide our developer guide provides details on how to get and compile the firefox source code, how to find your way around, and how to contribute to the project.
Getting Started with Chat
the following are some other options available to you: windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available.
... if not, you'll have to download source code and compile.
How to Report a Hung Firefox
the steps to induce a crash are slightly different on each platform: windows on windows, the stability team has written a utility which will inject a crash into firefox which will trigger the crash reporter: download crashfirefox.exe here (source code).
...etmostrecentwindow("navigator:browser"); let browser = win.gbrowser.selectedbrowser; if (browser.isremotebrowser) { browser.messagemanager.loadframescript('data:,let appinfo = components.classes["@mozilla.org/xre/app-info;1"];if (appinfo && appinfo.getservice(components.interfaces.nsixulruntime).processtype != components.interfaces.nsixulruntime.process_type_default) {components.utils.import("resource://gre/modules/ctypes.jsm");var zero = new ctypes.intptr_t(8);var badptr = ctypes.cast(zero, ctypes.pointertype(ctypes.int32_t));var crash = badptr.contents;}', true); } other techniques on os x if you use a nightly build (>= firefox 16), you can use activity monitor's "sample process" feature to generate a sample.
JavaScript Tips
instead, use instanceof, e,g,: if (target instanceof components.interfaces.nsirdfresource) return target.value; if (target instanceof components.interfaces.nsirdfliteral) return target.value; return null; don't test the return value of queryinterface, it always returns the original variable if it succeeds.
...the properties are: align allowevents contextmenu datasources dir flex height id left maxheight maxwidth minheight minwidth observes orient pack persist ref statustext top tooltip tooltiptext width xul also maps the ordinal attribute but this defaults to "1" if it is not present.
Assert.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://testing-common/assert.jsm"); the assert class offers methods for performing common logical assertions.
...iled, actual, expected, message, operator ); parameters failed indicates if the assertion failed or not actual the result of evaluating the assertion expected expected result from the test author message short explanation of the expected result operator operation qualifier used by the assertion method (ex: '==') examples custom reporter example components.utils.import("resource://testing-common/assert.jsm"); let assert = new assert(); assert.setreporter(function customreporter(err, message, stack) { if (err) { do_report_result(false, err.message, err.stack); } else { do_report_result(true, message, stack); } }); ...
JNI.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/jni.jsm"); this module was available in firefox since version 17.
...this shows how to get the paths to the "pictures" folder: components.utils.import("resource://gre/modules/jni.jsm"); components.utils.import("resource://gre/modules/osfile.jsm"); // because we use os.path.join in this example var my_jenv = null; try { my_jenv = jni.getforthread(); var sig = { environment: 'landroid/os/environment;', string: 'ljava/lang/string;', file: 'ljava/io/file;' }; var environment = jni.loadclass(my_jenv, sig.environment.
Sqlite.jsm
before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/sqlite.jsm") obtaining a connection sqlite.jsm exports the sqlite symbol.
... here is an example: components.utils.import("resource://gre/modules/sqlite.jsm"); try { const conn = await sqlite.openconnection({ path: "mydatabase.sqlite", sharedmemorycache: false }); // connection is the opened sqlite connection (see below for api).
Bootstrapping a new locale
clone the source code the next step is to download a copy of the source code to your local system, using mercurial.
... if you are interested in localizing thunderbird 3, seamonkey 2 or other mozilla projects based on gecko 1.9.1 you'll need to follow the instructions on getting the source-code of the comm-central repository.
Localization content best practices
add localization notes localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add comments to the localizable files themselves, too.
... if you change the entity or property name of a string, you must also update all instances where that entity or property name is used in the source code, including localization comments.
Localizing with Koala
koala will now try to clone the en-us source repository from http://hg.mozilla.org/releases/mozilla-1.9.2.
...to make sure you're always translating the most recent en-us reference, you should update the source repository before you start working.
QA phase
preliminary instructions we will be using the following file directories for this example: your working directory (root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-aurora )/ l10n-central (directory for l10n directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file ...
... to create and configure this file, follow these instructions: until the fix for bug 1063880 lands on mozilla-aurora and mozilla-beta when building language packs against those two trees you should: remove ac_add_options --disable-compile-environment from .mozconfig in step 3 use ./mach build config after step 4 update the mozilla source code: $ cd mozilla-aurora $ hg pull -u enter the following command to create the .mozconfig file: $ nano -w .mozconfig enter the following lines in your .mozconfig file: mk_add_options moz_objdir=@topsrcdir@/../firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[brows...
Creating localizable web content
per-locale customizations check if there are alternative links for localized pages (e.g., links to mdn, addons.mozilla.org, or other external resources, are there translated equivalents we can use).
...sometimes you can leave some freedom of modification for a block of text so that the localizers link to relevant local resources.
What every Mozilla translator should know
l10n stands for localization = l + another 10 letters + n mailing lists and other resources there are several mailing lists to keep the track of what's going on, which are available as newsgroups, as well, both on news.mozilla.org and google groups: the main l10n list also available as mozilla.dev.l10n, .l10n in short.
... some branch/release names identified: mozilla source + en-us localization files for [ab-cd] locale corresponding firefox version branches in hg mozilla-central l10n-central firefox.next (trunk) mozilla-1.9.2 l10n-mozilla-1.9.2 firefox 3.6 mozilla-1.9.1 l10n-mozilla-1.9.1 firefox 3.5 and, on the former revision control system, cvs: cvs trunk (the default branch) -> firefox/thunderbird...
Writing localizable code
use a good source directory structure be sure to put the localizable files in the right place.
...using a directory structure like this eases the localization process without the source code and is especcially recommended to extension authors.
Mozilla Framework Based on Templates (MFBT)
its code resides in the mfbt/ source directory, but headers within it should be included using paths like "mozilla/standardinteger.h".
... scoped.h implements scope-based resource management, to simplify the task of cleaning up resources when leaving a scope.
Basics
you can view its source.
... however, mathml documents tend to be verbose and you might get lost trying to locate a mathml fragment with the usual view source.
Mozilla Web Developer FAQ
the fonts have to be served from the same origin (protocol, host, port) as the content that uses them unless the fonts are served with the appropriate cross-origin resource sharing http headers.
...even if you had the source code for browser x, you couldn’t change anything without risking changing one or more of the unknown and unintentional interactions within the program.
Mozilla Style System
in one half (the backend) are the sources of specified style data, and in the other half (the frontend) is the code that turns the specified values into computed values.
... the barrier between these two halves consists of three abstract interfaces, plus some smaller structures associated with some methods on each: nsistylesheet nsistylesheet represents what one would think of as a style sheet: the in-memory representation of a css file or other source of style data.
Investigating leaks using DMD heap scan mode
definitions i'll write $objdir for the object directory for your firefox dmd build, $srcdir for the top level of the firefox source directory, and $heapgraph for the location of the heapgraph repo, and $logdir for the location you want logs to go to.
... the first thing i did to try to confirm that this was the source of the leak was pass the address of this object into the cycle collector analysis log, find_roots.py, that we used at an earlier step.
Profiling with the Firefox Profiler
at present there is no central list of these thread names, but you can find them by grepping the source.
... contribute source is located in tools/profiler.
about:memory
├───40,214,384 b (04.17%) -- add-ons │ ├──21,184,320 b (02.20%) ++ {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}/js-non-window/zones/zone(0x100496800)/compartment([system principal], jar:file:///users/njn/library/application%20support/firefox/profiles/puna0zr8.new/extensions/%7bd10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d%7d.xpi!/bootstrap.js (from: resource://gre/modules/addons/xpiprovider.jsm:4307)) │ ├──11,583,312 b (01.20%) ++ jid1-xufzosoflzsoxg@jetpack/js-non-window/zones/zone(0x100496800) │ ├───5,574,608 b (00.58%) -- {59c81df5-4b7a-477b-912d-4e0fdf64e5f2} │ │ ├──5,529,280 b (00.57%) -- window-objects │ │ │ ├──4,175,584 b (00.43%) ++ top(chrome://chatzilla/content/chatzilla.xul, id=4293) │...
...graphics is often a source of high memory usage, and so these measurements can be helpful for detecting such cases.
nglayout.debug.disable_xul_cache
the effect is that the source xml file is not read and re-parsed each time the chrome in question is displayed.
...possible values and their effects: true: do not cache parsed xul documents and do not save the cache to the xul fastload file on exit; re-read the source files each time the window or dialog needs to be displayed.
Preference reference
the effect is that the source xml file is not read and re-parsed each time the chrome in question is displayed.
... color in which the background of a text selection in the user interface or in content will be styled.ui.textselectforegroundui.textselectforeground saves the color in which the text of a text selection in the user interface or the content will be styled.ui.tooltipdelayui.tooltipdelay stores the delay in milliseconds between the mouse stopping over an element and the appearing of its tooltip.view_source.syntax_highlightthe preference view_source.syntax_highlight controls whether markup in the view source view is syntax highlighted.
Installing JSHydra
prerequisites mercurial 1.0 is needed to access source repositories.
...by default, the configure script will obtain a known working copy of spidermonkey; it is possible via the --moz-src and --moz-obj configure arguments to tell jshydra to use existing copies of the source and build.
Leak And Bloat Tests
provide a consistent number from build to build where no source code has changed.
...code locations the files specific to leak and bloat testing are be stored in: http://mxr.mozilla.org/comm-central/source/mailnews/test/performance these files consist of: overlays (used to provide the hooks for the javascript): bloat/bloataddroverlay.xul bloat/bloatcomposeoverlay.xul bloat/bloatmainoverlay.xul javascript files (used to drive the tests): bloat/bloataddroverlay.js bloat/bloatcomposeoverlay.js bloat/bloatmainoverlay.js preference settings (used to provide a defined profile, see below): common...
NSPR release procedure
source tarball binary distributions right now i use the mozilla/nsprpub/admin/repackage.sh script to generate the binary distributions published on ftp.mozilla.org.
...note: for nss, the script equivalent to nspr's repackage.sh is /u/robobld/bin/sbsinit/nss/push/buildbindist.sh in the "svbuild" source tree.
Building NSS
get the source nss and nspr use mercurial for source control like other mozilla projects.
... to check out the latest sources for nss and nspr--which may not be part of a stable release--use the following commands: hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss to get the source of a specific release, see nss releases.
Certificate functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions cert_addcerttolisttail mxr 3.2 and later cert_addextension mxr 3.5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.4 and later cert_addrdn mxr 3.2.1 and later cert_asciitoname mxr 3.2 and later cert_cachecrl mxr 3.10 and later cert_clearocspcache mxr 3.11.7 and later cert_certchainfromcert mxr 3.2 and later cert_certlistfromcert mxr 3.2 and later cert_certtimesvalid mxr 3.2 and later cert_changecerttrust mxr 3.2 and later cert_c...
Cryptography functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions pk11_algtagtomechanism mxr 3.2 and later pk11_authenticate mxr 3.2 and later pk11_blockdata mxr 3.2 and later pk11_changepw mxr 3.2 and later pk11_checkuserpassword mxr 3.2 and later pk11_cipherop mxr 3.2 and later pk11_clonecontext mxr 3.2 and later pk11_configurepkcs11 mxr 3.2 and later pk11_convertsessionprivkeytotokenprivkey mxr 3.6 and later pk11_convertsessionsymkeytotoke...
Deprecated SSL functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code replacement in nss 3.2 ssl_enable mxr ssl_optionset ssl_enablecipher mxr ssl_cipherprefsetdefault ssl_enabledefault mxr ssl_optionsetdefault ssl_redohandshake mxr ssl_rehandshake ssl_setpolicy mxr ssl_cipherpolicyset ...
Encrypt Decrypt MAC Keys As Session Objects
/* this source code form is subject to the terms of the mozilla public * license, v.
...(argc, argv, "c:d:i:o:f:p:z:a"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 'a': ascii = pr_true; break; case 'c': command = strdup(optstate->value); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'o': outfilename = strdup(optstate->value); break; c...
Encrypt and decrypt MAC using token
/* this source code form is subject to the terms of the mozilla public * license, v.
...(argc, argv, "c:d:i:o:f:p:z:a"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 'a': ascii = pr_true; break; case 'c': command = strdup(optstate->value); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'o': outfilename = strdup(optstate->value); break; c...
Getting Started With NSS
learn about getting the nss sources, building, and testing.
... creating your patch seee our section on nss sources, building, and testing to get started making your patch.
4.3 Release Notes
source tarballs are available from https://archive.mozilla.org/pub/security/jss/releases/jss_4_3_rtm/src/jss-4.3.tar.bz2 binary releases are no longer available on mozilla.
... source may be viewed with a browser (via the mxr tool) at http://mxr.mozilla.org/mozilla/source/security/jss/ the run time behavior of jss can be affected by the nss environment variables.
JSS FAQ
MozillaProjectsNSSJSSJSS FAQ
jss example code is essentially developer test code; with that understanding, the best directory to look for sample code is in the org/mozilla/jss/tests directory: http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/tests org/mozilla/jss/tests/closedbs.java org/mozilla/jss/tests/keyfactorytest.java org/mozilla/jss/tests/digesttest.java org/mozilla/jss/tests/jcasigtest.java org/mozilla/jss/tests/keywrapping.java org/mozilla/jss/tests/listcerts.java org/mozilla/jss/tests/pk10gen.java org/mozilla/jss/tests/sdr.java org/mozilla/jss/...
... check http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/ssl/sslsocket.java#730 how can i debug my ssl connection?
JSS 4.4.0 Release Notes
jss 4.4.0 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/jss_4_4_0_rtm/src/ new in jss 4.40 new functionality new functions new macros notable changes in jss 4.40 picks up work done downstream for fedora and rhel and used by various linux distributions with includes:.
... bugs fixed in jss 4.4.0 this bugzilla query returns all the bugs fixed in nss 4.4.0: https://bugzilla.mozilla.org/buglist.cgi?product=jss&target_milestone=4.4&target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest the latest - openjdk 1.8.
NSS_3.11.10_release_notes.html
nss 3.11.10 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_11_10_rtm/src/.
...rk solutions certificate authority root to nss bug 431621: add diginotar root ca root to nss bug 431772: add network solutions and diginotar root certs to nss bug 442912: fix nssckbi version number on 3.11 branch bug 443045: fix pk11_generatekeypair for ecc keys on the 3.11 branch bug 444850: nss misbehaves badly in the presence of a disabled pkcs#11 slot bug 462948: lint warnings for source files that include keythi.h documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
NSS 3.12.5 release_notes
you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_5_rtm nss see the documentation section for the build instructions.
... nss 3.12.5 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_5_rtm/src/.
NSS 3.12.6 release notes
nss 3.12.6 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_6_rtm/src/.
... bug 542538: nss: add function for recording ocsp stapled replies bug 544191: use system zlib on mac os x bug 544584: segmentation fault when enumerating the nss database bug 544586: various nss-sys-init patches from fedora bug 545273: remove unused function sec_init bug 546389: nsssysinit binary built inside source tree documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
NSS 3.14 release notes
for an additional explantation on gpl/lgpl compatibility, see security/nss/copying in the source code.
... nss 3.14 source tarballs can be downloaded from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_rtm/src/.
NSS 3.25 release notes
nss 3.25 source distributions are available on ftp.mozilla.org for secure https download at the following location.
... source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_25_rtm/src/ new in nss 3.25 new functionality implemented dhe key agreement for tls 1.3.
NSS 3.28 release notes
nss 3.28 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_rtm/src/ new in nss 3.28 new functionality nss includes support for tls 1.3 draft -18.
... this was previously possible by replacing certain nss source files.
NSS 3.37 release notes
nss 3.37 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_37_rtm/src/ notable changes in nss 3.37 the tls 1.3 implementation was updated to draft 28.
... (the classic implementation for rng seeding on the linux/unix platform, which may use additional sources for the default seeding, is still available and will be used if seed_only_dev_urandom is undefined.) with nss 3.37, this alternative implementation for linux/unix can be selected in "make" builds by defining the environment variable nss_seed_only_dev_urandom.
NSS 3.44.1 release notes
nss 3.44.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_1_rtm/src/ other releases are available in nss releases.
... new in nss 3.44.1 new functionality 1546229 - add ipsec ike support to softoken many new fips test cases (note: this has increased the source archive by approximately 50 megabytes for this release.) bugs fixed in nss 3.44.1 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough input checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) 1515236 - add a sslkeylogfile enable/disable flag at build.sh 1473806 - fix seckey_converttopublickey handling of non-rsa keys 1546477 - updates to testing for fips validation 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) 1551041 - unbreak build on gcc < 4.3 big-endian ...
NSS 3.45 release notes
nss 3.45 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_45_rtm/src/ other releases are available in nss releases.
... bug 1546477 - various changes in response to the ongoing fips review note: the source package size has increased substantially due to the new fips test vectors.
NSS 3.47 release notes
nss 3.47 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_47_rtm/src/ other releases are available in nss releases.
... bug 1542207 - limit policy check on signature algorithms to known algorithms bug 1560329 - drbg: add continuous self-test on entropy source bug 1579290 - asan builds should disable lsan while building bug 1385061 - build nspr tests with nss make; add gyp parameters to build/run nspr tests bug 1577359 - build atob and btoa for thunderbird bug 1579036 - confusing error when trying to export non-existent cert with pk12util bug 1578626 - [cid 1453375] ub: decrement nullptr.
Enc Dec MAC Output Public Key as CSR
generates encryption/mac keys and outputs public key as certificate signing request /* this source code form is subject to the terms of the mozilla public * license, v.
...gv, "c:d:i:o:f:p:z:a:s:r:"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 'a': ascii = pr_true; break; case 'c': cmd = option2command(optstate->value); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'o': outfilename = strdup(optstate->value); break; c...
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
generates encryption/mac keys and outputs public key as pkcs11 certificate signing request /* this source code form is subject to the terms of the mozilla public * license, v.
...om cert in header file */ case 's': /* sign with private key */ case 'd': /* decrypt with the matching private key */ case 'v': /* verify with the matching public key */ cmd = option2command(optstate->option); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'b': headerfilename = strdup(optstate->value); b...
Encrypt Decrypt_MAC_Using Token
/* this source code form is subject to the terms of the mozilla public * license, v.
...(argc, argv, "c:d:i:o:f:p:z:a"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 'a': ascii = pr_true; break; case 'c': command = strdup(optstate->value); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'o': outfilename = strdup(optstate->value); break; c...
NSS Sample Code Sample_3_Basic Encryption and MACing
n", "note :"); fprintf(stderr, "%-7s <ipfilename>.enc and <ipfilename>.header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes <ipfilename>.enc and <ipfilename>.header\n", ""); fprintf(stderr, "%-7s as input files and produces <opfilename> as a final output file.\n\n", ""); exit(-1); } /* this source code form is subject to the terms of the mozilla public * license, v.
...(argc, argv, "c:d:i:o:f:p:z:a"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 'a': ascii = pr_true; break; case 'c': command = strdup(optstate->value); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'o': outfilename = strdup(optstate->value); break; c...
NSS Sample Code Utilities_1
< nb) i++; /* terminate passphrase */ phrases[i++] = '\0'; /* clean up any eol before the start of the next passphrase */ while ( (i<nb) analyze="" char="" current="" getmodulepassword="" if="" int="" now="" passphrase="" phrase="&amp;phrases[startphrase];" phraselen="" pk11slotinfo="" pwdata="=" pwdata-="" retry="" return="" secupwdata="" the="" void="" while="">source != pw_none) { pr_fprintf(pr_stderr, "incorrect password/pin entered.\n"); return null; } switch (pwdata->source) { case pw_none: sprintf(prompt, "enter password or pin for \"%s\":", pk11_gettokenname(slot)); return getpassword(stdin, stdout, prompt, checkpassword); case pw_fromfile: pw = filepasswd(slot, retry, pwdata->data)...
...; pwdata->source = pw_plaintext; pwdata->data = pl_strdup(pw); return pw; case pw_plaintext: return pl_strdup(pwdata->data); default: break; } pr_fprintf(pr_stderr, "password check failed: no password found.\n"); return null; } /* * generaterandom */ secstatus generaterandom(unsigned char *rbuf, int rsize) { char meter[] = { "\r| |" }; int fd, count; int c; secstatus rv = secsuccess; cc_t orig_cc_min; cc_t orig_cc_time; tcflag_t orig_lflag; struct termios tio; fprintf(stderr, "to generate random numbers, " "continue typing until the progress meter is full:\n\n"); ...
EncDecMAC using token object - sample 3
encdecmac using token object example: <h2 id="nss_sample_code_3_hashing.">nss sample code 3: enc/dec/mac using token object id.</h2> <p class="summary">computes the hash of a file and saves it to another file, illustrates the use of nss message apis.</p> <pre class="brush: cpp"> /* this source code form is subject to the terms of the mozilla public * license, v.
...progname + 1 : argv[0]; /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "c:d:i:o:f:p:z:a"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 'a': ascii = pr_true; break; case 'c': command = strdup(optstate->value); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'o': outfilename = strdup(optstate->value); break; case 'z': noisefilename = strdup(optstate->value); break; default: usage(progname); break; } } pl_destroyoptstate(optstate); if (!command || ...
sample2
/* this source code form is subject to the terms of the mozilla public * license, v.
...'a': /* add cert to database */ case 'h': /* save cert to the header file */ case 'e': /* encrypt with public key from cert in header file */ case 's': /* sign with private key */ case 'd': /* decrypt with the matching private key */ case 'v': /* verify with the matching public key */ cmd = option2command(optstate->option); break; case 'd': dbdir = strdup(optstate->value); break; case 'f': pwdata.source = pw_fromfile; pwdata.data = strdup(optstate->value); break; case 'p': pwdata.source = pw_plaintext; pwdata.data = strdup(optstate->value); break; case 'i': infilename = strdup(optstate->value); break; case 'b': headerfilename = strdup(optstate->value); break; case 'e': encryptedfilename = strdup(optstate->value); break; case 'o': outfilename = strdup(optstate->value); break; case 'z': noisefilen...
nss tech note8
for servers these pointers point to sec->cache = ssl_sid_cache; sec->uncache = ssl_sid_uncache; which are functions defined in sslsnce.c, the server session cache source file.
... for clients these pointers point to sec->cache = cachesid; sec->uncache = lockanduncachesid; which are functions defined in sslnonce.c, the client session cache source file.
PKCS 12 functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions sec_pkcs12addcertandkey mxr 3.2 and later sec_pkcs12addpasswordintegrity mxr 3.2 and later sec_pkcs12createexportcontext mxr 3.2 and later sec_pkcs12createpasswordprivsafe mxr 3.2 and later sec_pkcs12createunencryptedsafe mxr 3.2 and later sec_pkcs12decoderfinish mxr 3.2 and later sec_pkcs12decodergetcerts mxr 3.4 and later sec_pkcs12decoderimportbags mxr 3.2 and later sec_pkcs12decoderiterateinit m...
PKCS 7 functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions sec_pkcs7addcertificate mxr 3.3 and later sec_pkcs7addrecipient mxr 3.2 and later sec_pkcs7addsigningtime mxr 3.2 and later sec_pkcs7containscertsorcrls mxr 3.4 and later sec_pkcs7contentisencrypted mxr 3.4 and later sec_pkcs7contentissigned mxr 3.4 and later sec_pkcs7contenttype mxr 3.2 and later sec_pkcs7copycontentinfo mxr 3.4 and later sec_pkcs7createcertsonly mxr 3.3 and later ...
Migration to HG
each project now lives in its own separate space, they can be found at: https://hg.mozilla.org/projects/nspr/ https://hg.mozilla.org/projects/nss/ https://hg.mozilla.org/projects/jss/ https://hg.mozilla.org/projects/python-nss/ this migration has been used as an opportunity to change the layout of the source directories.
... however, below is a brief summary that shows how to checkout the source code and build both nspr and nss: mkdir workarea cd workarea hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss cd nss # set use_64=1 on 64 bit architectures # set build_opt=1 to get an optimized build make nss_build_all note that the jss project has been given a private copy of the former mozilla/security/coreconf direct...
NSS tools : cmsutil
-i infile use infile as a source of data (default is stdin).
...." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
S/MIME functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions nss_cmscontentinfo_getbulkkey mxr 3.2 and later nss_cmscontentinfo_getbulkkeysize mxr 3.2 and later nss_cmscontentinfo_getcontent mxr 3.2 and later nss_cmscontentinfo_getcontentencalgtag mxr 3.2 and later nss_cmscontentinfo_getcontenttypetag mxr 3.2 and later nss_cmscontentinfo_setbulkkey mxr 3.2 and later nss_cmscontentinfo_setcontent mxr 3.2 and later nss_cmscontentinfo_setcontent_data mxr 3.2 and later ...
Utility functions
the mozilla cross reference (mxr) link for each function provides access to the function definition, prototype definition, and source code references.
... function name/documentation source code nss versions atob_asciitodata mxr deprecated 3.2 use nssbase64_decodebuffer atob_convertasciitoitem mxr deprecated 3.2 use nssbase64_decodebuffer btoa_convertitemtoascii mxr deprecated 3.2 use nssbase64_encodeitem btoa_datatoascii mxr deprecated 3.2 use nssbase64_encodeitem der_asciitotime mxr 3.5 and later der_decodetimechoice mxr 3.9 and later der_encode mxr 3.4 and later der_encodetimechoice mxr 3.9 and later der_g...
NSS tools : cmsutil
MozillaProjectsNSStoolscmsutil
-i infile use infile as a source of data (default is stdin).
...." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
Network Security Services
for information on downloading nss releases as tar files, see download pki source.
... get the source code and build it instructions on how to build nss on the different supported platforms.
Necko Interfaces Overview
scheme, host, path, ...) per protocol implementation necko provides uri impl's for common uri formats (see nsstandardurl, nssimpleuri) nsichannel : nsirequest represents a logical connection to the resource identified by a nsiuri per protocol implementation single use (ie.
... channel is used to download the resource once) download initiated via nsichannel::asyncopen method can be canceled via nsirequest::cancel method at anytime after invocation of asyncopen method nsiprotocolhandler a service that manages a protocol, identified by it's uri scheme (eg.
Installing Pork
svn co https://mcpp.svn.sourceforge.net/svnroot/mcpp/trunk mcpp cd mcpp ./configure --enable-replace-cpp make sudo make install note: if you followed the dehydra installation instructions for linux and compiled your own gcc, then you should not need to "sudo" make install.
...in particular, -k tells mcpp to add the macro annotations we use to get exact source positions.
Rhino and BSF
the bean scripting framework (or bsf) was originally developed by ibm and now published as open source as a project at the apache software foundation.
... this framework has been embedded in a number of open source projects, including the xsl processor xalan and the xml/java build tool ant.
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.
... load([filename, ...]) load javascript source files named by string arguments.
Shumway
please note that source code will be requested for the shumway developers to use as small test cases.
... there does not currently exist a private method to contribute source code.
JSPrincipals
added in spidermonkey 17 description jsprincipals is the abstract base class of all principals objects, the objects that identify the source of a function or script and are used to determine its privileges.
... a principals object is like a java codesource.
JS_CompileFunction
body is a string containing the source code of the function.
... length is the length of the source code in characters.
JS_CompileFunctionForPrincipals
body const char * or const jschar * string containing the source code of the function to compile.
... body is the string containing the source code of the function.
JS_CompileScript
length size_t the length, in characters, of source.
... description js_compilescript compiles a script, source, for execution.
JS_DecompileFunction
generates the complete source code of a function declaration from a compiled function.
... description js_decompilefunction generates the complete source code of a function declaration from a function's compiled form, fun.
JS_EncodeCharacters
srclen size_t the length of the source string, in 16-bit values.
... this happens if the destination is too small for the resulting string or if the source buffer isn't proper utf-16 because it contains unpaired surrogate values.
SpiderMonkey 1.8
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz (md5 checksum: eaad8815dcc66a717ddb87e9724d964e).
...it is source-compatible with spidermonkey 1.7 though, which means you can probably just recompile and relink your application.
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.
... source metadata generated from file: js/src/doc/savedframe/savedframe.md watermark: sha256:3475238d6704c659cb3e411b9c601d6ee836762dea14203f1f00ecf2c3b32452 changeset: 251fccc1f62b ...
SpiderMonkey: The Mozilla JavaScript runtime
standalone source code releases can be found on the releases page.
... guides building spidermonkey build documentation how to get spidermonkey source code, build it, and run the test suite.
TPS Tests
steps get the source code clone mozilla-central (choose your flavor): hg clone hg.mozilla.org/mozilla-central or git clone github.com/mozilla/gecko-dev cd into the tps folder cd testing/tps create the environment i suggest the path to be outside of the mc source tree python create_venv.py --username=%email% --password=%password% %path% note: if you are updatin...
...g the tps environment and want to keep your existing config (eg, the existing username and password), you should instead execute: python create_venv.py --keep-config %path% activate the environment source %path%/bin/activate run some tests note that the testfile is not a path, it should only be the filename from services/sync/tests/tps/ runtps --debug --testfile %test_file_name% --binary %firefox_binary_path% additionally, omitting a --testfile parameter will cause it to run all tps tests listed in services/sync/tests/tps/all_tests.json an example on osx, for running just the test_sync.js testfile against a locally built firefox (where the mozconfig set the objdir to obj-ff-artifact): runtps --debug --testfile test_sync.js --binary obj-ff-artifact/di...
Redis Tips
this document is a collection of some examples and tips for using redis, the open-source data structure server.
... if you have not, here is a fantastic on-line, interactive redis tutorial: http://try.redis.io/ for reference later on, you'll want the source of all things redis: https://redis.io you'll want to run a redis-server on your machine, and use the redis-cli at the command-line for hacking.
Setting up an update server
you can use this command with firefox's browser console to determine the update directory: const {fileutils} = chromeutils.import("resource://gre/modules/fileutils.jsm"); fileutils.getdir("updrootd", [], false).path once you have determined the update directory, close firefox, browse to the directory and remove the subdirectory called updates.
... 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": { "appupdateurl": "http://127.0.0.1:8000/update.xml" } } now you are ready to update!
Places utilities for JavaScript
localstore warning: local store provided access to the local-store rdf data source, which stores persisted information about the browser.
... return type returns an array of objects representing each item contained by the source.
XML Extras
feature status feature status xmlserializer available xmlhttprequest available domparser (string and stream input source) available web services with soap and wsdl no longer available from gecko 1.9/firefox 3.
...if you follow that link to look at the examples you will need to look at page source for the html documents.
An Overview of XPCOM
the most important use of xpcom is within gecko, an open source, standards compliant, embeddable web browser and toolkit for creating web browsers and other applications.
... see resources for more information about python and other languages for which support has been added in xpcom.
Setting up the Gecko SDK
note that mozilla-config.h may be need to be included before other includes in your component's source code.
...gecko_sdk_path ?= $(home)/tmp/xr xpidl ?= $(gecko_sdk_path)/bin/xpidl cxx ?= c++ xpidlsrcs = \ interfacea.idl \ interfaceb.idl \ $(null) cppsrcs = \ sourcea.cpp \ sourceb.cpp \ $(null) cppflags += -fno-rtti \ -fno-exceptions \ -fshort-wchar \ -fpic \ $(null) # gcc only define which allows us to not have to #include mozilla-config # in every .cpp file.
Using XPCOM Utilities to Make Things Easier
the following table summarizes the macro usage in this portion of the weblock.cpp source file: common xpcom macros ns_impl_isupportsn implements nsisupports for a given class with n number of interfaces ns_decl_isupports declares methods of nsisupports including mrefcnt ns_init_isupports initializes mrefcnt to zero.
...the entire source file with these macros included appears in weblock2.cpp.
Components.utils.importGlobalProperties
example components.utils.import("resource://gre/modules/devtools/console.jsm"); components.utils.importglobalproperties(["atob", "btoa"]); var encoded = btoa("hello"); console.log(encoded); // "sgvsbg8=" console.log(atob(encoded)); // "hello" alternative methods if importglobalproperties does not support the targeted firefox version, here are some alternative methods to import these objects.
...knowing that, we can just get a valid blob by importing a known module that has the objects, such as services.jsm const {blob, file, services} = cu.import("resource://gre/modules/services.jsm", {}); reference: stackoverflow :: use blob on firefox add-on hiddendomwindow the hidden domwindow has all of these objects automatically imported.
nsIRegistry
nsiregistry on mxr other documentation: libreg source, reg.h in particular okay!
...rs.openwellknownregistry(2); // 2 signifies the applicationregistry, if i understand right var st = rs.enumerateallsubtrees(2); // 2 signifies "common", see libreg source (reg.h) for info now you have an nsienumerator that can report the subtrees.
HOWTO
e.g., you use: components.utils.import("resource://app/modules/gloda/log4moz.js"); however, you get (for that particular line, which is the first import): uncaught exception: [exception...
...t("chrome://myall/content/file.jsm"); see: http://mxr.mozilla.org/comm-central/...figutils.js#54 solution 2 append the following at the top of your js file which you want to run in xpcshell { // <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> // <https://bugzilla.mozilla.org/show_bug.cgi?id=546628> let cc = components.classes; let ci = components.interfaces; // register resource://app/ uri let ios = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice); let reshandler = ios.getprotocolhandler("resource") .queryinterface(ci.nsiresprotocolhandler); let mozdir = cc["@mozilla.org/file/directory_service;1"] .getservice(ci.nsiproperties) .get("curprocd", ci.nsilocalfile); let mozdiruri = ios.newfileuri(mozdir); reshandler.setsubst...
Language bindings
the resources here provide information about this language binding and how to use it.pyxpcompyxpcom allows for communication between python and xpcom, such that a python application can access xpcom objects, and xpcom can access any python class that implements an xpcom interface.
...you can find additional information using the resource links below.xpconnectxpconnect is a bridge between javascript and xpcom.
nsAutoRefTraits
nsautoreftraits<t> is a template class describing traits of resources held by objects of class nsautoref<t> and/or nscountedref<t>.
... when the handle to the resource is a pointer to t the specialization may be derived from nspointerreftraits<t>, so that only definitions of the release(t*) static method and possibly the addref(t*) static method need to be added.
XPCOM glue classes
this class is typically used to represent unicode character arrays.nsastring (external)class declarationnsastring_internalclass declarationnsautorefnsautoref<t> is a template class implementing an object that holds a handle to a resource that must be released, typically on destruction of the object.</t>nsautoreftraitsnsautoreftraits<t> is a template class describing traits of resources held by objects of class nsautoref<t> and/or nscountedref<t>.</t>nsautostringclass declarationnsautostring (external)class declarationnscautostringclass declarationnscautostring (external)class declarationnscomptrthis utility class simplifies manag...
...ing xpcom interface references from c++ code.nscountedrefnscountedref<t> is a template class implementing an object that takes a strong reference to a reference-counted resource that must be released, typically on destruction of the object.</t>nscstringclass declarationnscstring externalclass declarationnscstringcontainer (external)class declaration nscstringencodingthe nscstringencoding enumeration describes the set of character encodings understood by the ns_cstringtoutf16 and ns_utf16tocstring functions.nsdependentcstringclass declarationnsdependentcstring externalclass declarationnsdependentcsubstringclass declarationnsdependentcsubstring externalclass declarationnsdependentstringclass declarationnsdependentstring externalclass declarationnsdependentsubstringclass declarationnsdependents...
mozIJSSubScriptLoader
it must be a local chrome:, resource: or file: url (see bug 307686 and bug 418356).
...it must be a local chrome:, resource: or file: url.
mozIRegistry
it happens that this objective requires storing information about which implementation to use in a place distinct from your source code.
...it is envisioned that there will be multiple flavors of underlying rdf data sources corresponding to the libreg .reg file(s), the shared libraries installed, additional components accessible via the 'net, etc.
nsIApplicationCacheNamespace
successful top-level loads of resources in this namespace should be placed into the application cache.
... see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcachechannel nsiapplicationcacheservice nsidomofflineresourcelist ...
nsIChannel
this is used in the case of a redirect or uri "resolution" (for example resolving a resource: uri to a file: uri) so that the original pre-redirect uri can still be obtained.
...this means that: the stream listener this channel will be notifying was initially passed to the asyncopen() method of some other channel this channel's uri is a better identifier of the resource being accessed than this channel's originaluri.
nsIChannelEventSink
new requests for this resource should continue to use the uri of the old channel.
...new requests for this resource should use the uri of the new channel (this might be an http 301 reponse).
nsIDOMFontFace
attributes font source attributes these attributes indicate how the font was found during the font matching process.
... name domstring full font name as obtained from the font resource.
nsIDOMWindowInternal
void home() void stop() void print() void moveto(in long xpos, in long ypos) void moveby(in long xdif, in long ydif) void resizeto(in long width, in long height) void resizeby(in long widthdif, in long heightdif) void scroll(in long xscroll, in long yscroll) nsidomwindow window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... 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] in boolean showdialog) domstring atob(in domstring aasciistring) domstring btoa(in domstring abase64data) nsivariant showmodaldialog(in nsivariant aargs, [optional] in domstring aoptions) void postmessage(in domstring message,...
nsIDeviceMotion
native code only!addwindowlistener sets the nsiaccelerometer as the source for mozorientation events on the specified dom window.
... native code only!removewindowlistener removes the nsiaccelerometer as the source for mozorientation events on the specified dom window.
nsIDragSession
sourcedocument nsidomdocument the document where the drag was started, which will be null if the drag originated outside the application.
... sourcenode nsidomnode the dom node that was originally dragged to start the session, which will be null if the drag originated outside the application.
nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes); selected content removal void deleteselection(in short action, in short stripwrappers); ...
...t); node manipulation methods void setattribute(in nsidomelement aelement, in astring attributestr,in astring attvalue); boolean getattributevalue(in nsidomelement aelement, in astring attributestr, out astring resultvalue); void removeattribute(in nsidomelement aelement, in astring aattribute); void cloneattribute(in astring aattribute, in nsidomnode asourcenode); void cloneattributes(in nsidomnode destnode, in nsidomnode sourcenode); nsidomnode createnode(in astring tag, in nsidomnode parent, in long position); void insertnode(in nsidomnode node, in nsidomnode parent, in long aposition); void splitnode(in nsidomnode existingrightnode, in long offset, out nsidomnode newleftnode); void joinnodes(in nsidomno...
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.
nsIInstallLocation
itemismanagedindependently() determines whether or not an item's resources are managed by the extension system or by some other user or process.
... return value true if the item's resources are managed independently of the extension system, false otherwise.
nsIMicrosummaryGenerator
g: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview long calculateupdateinterval(in nsidomnode apagecontent); boolean equals(in nsimicrosummarygenerator aother); astring generatemicrosummary(in nsidomnode apagecontent); attributes attribute type description loaded boolean has the generator itself (which may be a remote resource) been loaded.
...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.
nsIMsgDatabase
void setattributesonpendinghdr(in nsimsgdbhdr pendinghdr, in string property, in string propertyval, in long flags); void createcollationkey(in astring sourcestring, out octetptr key, out unsigned long len); native code only!
...tallofflinemsgs() [noscript] void listallofflinemsgs(in nsmsgkeyarrayptr offlinemsgs); setattributesonpendinghdr() void setattributesonpendinghdr(in nsimsgdbhdr pendinghdr, in string property, in string propertyval, in long flags); createcollationkey() [noscript] void createcollationkey(in astring sourcestring, out octetptr key, out unsigned long len); comparecollationkeys() [noscript] long comparecollationkeys(in octetptr key1, in unsigned long len1, in octetptr key2, in unsigned long len2); getnewlist() the l...
nsIMsgIncomingServer
g name); boolean getboolvalue(in string attr); acstring getcharattribute(in string name); acstring getcharvalue(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 nsiurllistener aurllistener); 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 anewh...
...e ); parameters name missing description return value missing description exceptions thrown missing exception missing description getintvalue() long getintvalue( in string attr ); parameters attr missing description return value missing description exceptions thrown missing exception missing 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 nsiurllistener aurllistener ); parameters afolder missing description amsgwindow missing description aurllis...
nsINavHistoryObserver
onvisit() called when a resource is visited.
... this is called the first time a resource (page, image, and so on.) is seen as well as every subsequent time.
nsINavHistoryResultNode
icon autf8string this uri can be used as an image source uri and will give you the favicon for the page.
... uri autf8string the uri of the resource represented by the node.
nsIOutputStream
nsacstring* pbuf = (nsacstring*) aclosure; const char* data; pruint32 len = ns_cstringgetdata(&data); data += afromoffset; len -= afromoffset; if (len > acount) len = acount; memcpy(atosegment, data, len); // indicate that we have copied len bytes to the segment *areadcount = len; return ns_ok; } // write the contents of asource into astream, using writesegments // to avoid intermediate buffer copies.
... nsresult writestream(const nsacstring& asource, nsiinputstream* astream) { pruint32 num; return astream->writesegments(copysegment, (void*) &asource, asource.length(), &num); } remarks this interface was frozen for gecko 1.0.
nsIPrincipal
_with_user_permission 3 enable_granted 4 methods native code only!canenablecapability short canenablecapability( in string capability ); parameters capability missing description return value missing description exceptions thrown missing exception missing description checkmayload() checks whether this principal is allowed to load the network resource located at the given uri under the same-origin policy.
... this means that codebase principals are only allowed to load resources from the same domain, the system principal is allowed to load anything, and null principals are not allowed to load anything.
nsIStackFrame
this is the location that caused the error, which may or may not be a source file location.
... sourceline string the location of this function in filename read only.
nsITraceableChannel
/////// start - do not edit var {classes: cc, interfaces: ci, results: cr, constructor: cc, utils: cu} = components; cu.import('resource://gre/modules/services.jsm'); var binaryinputstream = cc('@mozilla.org/binaryinputstream;1', 'nsibinaryinputstream', 'setinputstream'); var binaryoutputstream = cc('@mozilla.org/binaryoutputstream;1', 'nsibinaryoutputstream', 'setoutputstream'); var storagestream = cc('@mozilla.org/storagestream;1', 'nsistoragestream', 'init'); function tracinglistener() { this.receivedchunks = []; // array fo...
...holds chunks as they come, onstoprequest we join these junks to get the full source this.responsebody; // we'll set this to the this.responsestatuscode; this.deferreddone = { promise: null, resolve: null, reject: null }; this.deferreddone.promise = new promise(function(resolve, reject) { this.resolve = resolve; this.reject = reject; }.bind(this.deferreddone)); object.freeze(this.deferreddone); this.promisedone = this.deferreddone.promise; } tracinglistener.prototype = { ondataavailable: function(arequest, acontext, ainputstream, aoffset, acount) { var istream = new binaryinputstream(ainputstream) // binaryainputstream var sstream = new storagestream(8192, acount, null); // storagestream // not sure why its 8192 but thats how eveyrone is doing it, we shoul...
nsIURI
netwerk/base/public/nsiuri.idlscriptable this is an interface for an uniform resource identifier with internationalization support, offering attributes that allow setting and querying the basic components of a uri, and methods for performing basic operations on uris.
... inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / 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 nsiurl, impose further structure on the uri.
nsIUUIDGenerator
exceptions thrown ns_error_failure if a uuid cannot be generated (for example if an underlying source of randomness is not available) native code only!generateuuidinplace obtain a new uuid like the generateuuid() method, but place it in the provided nsid pointer instead of allocating a new nsid.
... exceptions thrown ns_error_failure if a uuid cannot be generated (for example if an underlying source of randomness is not available) example generating a uuid var uuidgenerator = components.classes["@mozilla.org/uuid-generator;1"] .getservice(components.interfaces.nsiuuidgenerator); var uuid = uuidgenerator.generateuuid(); var uuidstring = uuid.tostring(); ...
nsIWebBrowserPersist
example function downloadfile(httploc, sourcewindow) { try { //new obj_uri object var obj_uri = components.classes["@mozilla.org/network/io-service;1"].getservice(components.interfaces.nsiioservice).newuri(httploc, null, null); //new file object var obj_targetfile = components.classes["@mozilla.org/file/local;1"].createinstance(components.interfaces.nsilocalfile); //set file with path obj_targetfile.initwithpath("...
... = components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"].createinstance(components.interfaces.nsiwebbrowserpersist); // with persist flags if desired const nsiwbp = components.interfaces.nsiwebbrowserpersist; const flags = nsiwbp.persist_flags_replace_existing_files; obj_persist.persistflags = flags | nsiwbp.persist_flags_from_cache; var privacycontext = sourcewindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsiloadcontext); //save file to target obj_persist.saveuri(obj_uri,null,null,null,null,obj_targetfile,privacycontext); // starting with firefox 36 saveuri...
nsIWebPageDescriptor
constants display type constants constant value description display_as_source 0x0001 generates an optionally syntax-highlighted (for xml/html documents) source of the original page.
...note that if the descriptor is that of the source of another page, this keeps the source view, but uses the current syntax highlighting preference.
nsIWebSocketChannel
this is used in the case of a redirect or uri "resolution" (for example resolving a resource: uri to a file: uri) so that the original pre-redirect uri can still be obtained.
... aorigin the uri of the originating resource.
nsIXULSortService
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void insertcontainernode(in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify); native code only!
...void insertcontainernode( in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify ); parameters db sortstateptr root trueparent container node anotify sort() sort the contents of the widget containing anode using asortkey as the comparison key, and asorthints as how to sort.
nsIZipWriter
var {cc: classes, ci: interfaces, cu: utils} = components; var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifilepicker.returnok) { var dir = fp.file; //dir must exist, as the user selected ...
... saveinzipas = saveinzipas.replace(/\\/g,'/'); //remember must use forward slash (/) cu.reporterror('--' + saveinzipas); zw.addentryfile(saveinzipas, ci.nsizipwriter.compression_none, entry, false); } } zw.close() } other examples for other examples, take a look at the unit tests in the source tree: modules/libjar/zipwriter/test/unit see also nsizipreader nsifile nsichannel nsiinputstream ...
XPCOM Interface Reference
getnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomsto...
...servernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstr...
NS_CStringToUTF16
#include "nsstringapi.h" nsresult ns_cstringtoutf16( const nsacstring& asrc, nscstringencoding asrcencoding, nsastring& adest ); parameters asrc [in] a nsacstring instance containing the source string to be converted.
... asrcencoding [in] the character encoding of the source string.
NS_UTF16ToCString
#include "nsstringapi.h" nsresult ns_utf16tocstring( const nsastring& asrc, nscstringencoding adestencoding, nsacstring& adest ); parameters asrc [in] a nsastring instance containing the source utf-16 string to be converted.
... the source string should be encoded using the host byte order.
Storage
opening a connection javascript example of opening my_db_file_name.sqlite in the profile directory: components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/fileutils.jsm"); let file = fileutils.getfile("profd", ["my_db_file_name.sqlite"]); let dbconn = services.storage.opendatabase(file); // will also create the file if it does not exist likewise, the c++ would look like this: nscomptr<nsifile> dbfile; rv = ns_getspecialdirectory(ns_app_user_profile_50_dir, ...
...a c++ example is omitted here because it would be verbose, but real-world code can be found in the mozilla source tree (mxr id search for mozistoragestatementcallback).
Frequently Asked Questions
bibliography web resources nscomptr.h, and nscomptr.cpp are the source to nscomptr.
... you can examine the source to nscomptr online using (the wonderful) lxr.
wrappedJSObject
more specifically, as xpconnect source comments say, you can get comp.wrappedjsobject if three conditions are met: comp really is an xpconnect wrapper around a js object.
... nsixpcsecuritymanager allows access (see the source code comments for details; this is usually not an issue for mozilla extensions and applications) this means that in order to access the js object implementing our component directly, we must modify the component.
Xptcall Porting Guide
the tree mozilla/xpcom/reflect/xptcall +--public // exported headers +--src // core source | \--md // platform specific parts | +--mac // mac ppc | +--unix // all unix | \--win32 // win32 | +--test // simple tests to get started \--tests // full tests via api porters are free to create subdirectories under the base md directory for their given platforms and to integrate into the build system as appropriate for their platform.
...inline assembly language is used here, but it is equally valid to use separate assembly language source files.
XPIDL Syntax
MozillaTechXPIDLSyntax
status of this document this is a partial reverse-engineering of the libidl source code's parser, limited mostly to the subset of functionality that is supported by the mozilla xpidl binary.
...some productions can only occur at the beginning of lines; to simplify the grammar, i will not mention them in the grammar, especially since they are handled as a preprocessing step before the idl source code is actually parsed.
XUL Overlays
MozillaTechXULOverlays
the chrome registry, which is a special rdf datasource into which user-specific information is persisted, or stored, contains information about the components or additional packages that have been installed with the browser.
...in xul, attributes control important features of the skin like image sources, as in the following example, where an overlay destructively overwrites the image source in the base file with a replacement.
Activity Manager examples
e: ~mycopyeventundo() {} }; ns_impl_isupports1(mycopyeventundo, nsiactivityundohandler) ns_imethodimp mycopyeventundo::undo(nsiactivityevent *event, nsresult *result) { nsresult rv; // get the subjects of this copy event pruint32 length; nsivariant **subjectlist; rv = event->getsubjects(&length, &subjectlist); if(ns_failed(rv)) return rv; // first subject in the list is the source folder in this particular case nscomptr<nsimsgfolder> folder = do_queryinterface(subjectlist[0]); // get the initiator nsivariant *initiator; event->getinitiator(&initiator); if (initiator) { nsisupports* ptr; rv = object->getasisupports(&ptr); if(ns_failed(rv)) return rv; nscomptr<nsimsgcopyservice> copyservice = do_queryinterface(ptr); if (copyservice) ...
...// same for the source folder, it is required for undo operation, but // since it is the subject of this activity (event), it goes into the // subject list.
Using the Mozilla symbol server
you will need to source this script before loading symbols (the part where it spends a few seconds loading each .so when you attach gdb).
... the source server in addition to symbols, mozilla also has a source server, letting you do source-level debugging and inspection on demand.
WebIDL bindings
for example, this webidl: dictionary dict { long foo = 5; domstring bar; }; interface test { void initsomething(optional dict arg = {}); }; will correspond to this c++ function declaration: void initsomething(const dict& arg); and the dict struct will look like this: struct dict { bool init(jscontext* acx, js::handle<js::value> aval, const char* asourcedescription = "value"); optional<nsstring> mbar; int32_t mfoo; } note that the dictionary members are sorted in the struct in alphabetical order.
... components.utils.import("resource://gre/modules/xpcomutils.jsm"); function mynumberinner() { this.value = 111; this.invisiblevalue = 12345; } mynumberinner.prototype = { classdescription: "get my number xpcom component", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), // dummy uuid contractid: "@mozilla.org/my-number;1", queryinterface: xpcomutils.generateqi([components.interfaces.nsisupports]), ...
ctypes.open
see: http://stackoverflow.com/questions/19382201/how-to-load-dll-from-sdk-addon-data-folder it is important to note that custom native files cannot be loaded through chrome:// or resource:// uris.
... if the native file is located at chrome://youraddon/content/mysubfolder/mycfunctionsforunix.so then it is converted to a file uri like this: components.utils.import("resource://gre/modules/services.jsm"); var cr = components.classes['@mozilla.org/chrome/chrome-registry;1'].getservice(components.interfaces.nsichromeregistry); var chromeuri_mylib = services.io.newuri('chrome://youraddon/content/mysubfolder/mycfunctionsforunix.so', 'utf-8', null); var localfile_mylib = cr.convertchromeurl(chromeuri_mylib); var jarpath_mylib = localfile_mylib.spec; // "jar:file:///c:/use...
ABI
method overview string tosource() string tostring() methods tosource() returns the string "ctypes.***_abi".
... string tosource() parameters none.
ArrayType
method overview methods inherited from ctype ctype array([n]) string tosource() string tostring() arraytype cdata syntax cdata sized_arraytype(); cdata unsized_arraytype(length); sized_arraytype and unsized_arraytype are arraytype ctype.
... arraytype cdata method_overview cdata addressofelement(idx) methods inherited from cdata cdata address() string tosource() string tostring() arraytype cdata methods addressofelement() returns a new cdata object of the appropriate pointer type, whose value points to the specified array element on which the method was called.
PointerType
method overview methods inherited from ctype ctype array([n]) string tosource() string tostring() pointertype cdata syntax cdata pointertype(); pointertype is pointertype ctype.
... pointertype cdata method_overview bool isnull() methods inherited from cdata cdata address() string tosource() string tostring() pointertype cdata methods isnull() determines whether or not the pointer's value is null.
StructType
method overview define(fields) methods inherited from ctype ctype array([n]) string tosource() string tostring() methods define() defines a previously declared opaque type's fields.
... structtype cdata method_overview cdata addressoffield(name) methods inherited from cdata cdata address() string tosource() string tostring() structtype cdata methods addressoffield() returns a new cdata object of the appropriate pointer type, whose value points to the specified field of the structure on which the method was called.
Streams - Plugins
this function allows the browser to send only as much data to the instance as it can handle at one time, and it helps both the browser and the plug-in to use their resources efficiently.
...this mode consumes more resources than the others.
Search - Firefox Developer Tools
the source pane will display a list of all matching files as you type.
... you can use the up and down arrows to move through the list, and return to open the file you want: searching within a file to search for a particular substring in the file currently loaded into the source pane, press control + f (or command + f on a mac) while the source pane is focused.
Tutorial: Set a breakpoint - Firefox Developer Tools
click on the scratchpad panel and enter the following code: components.utils.import("resource://gre/modules/jsdebugger.jsm"); components.utils.import("resource://gre/modules/console.jsm"); // this simply defines 'debugger' in this scratchpad; // it doesn't actually start debugging anything.
... source metadata generated from file: js/src/doc/debugger/tutorial-breakpoint.md watermark: sha256:c8dd4bb69972b58e59fcbe6870499206463a5e330fda25f1214893595a1c01d0 changeset: ffa775dd5bd4 ...
All keyboard shortcuts - Firefox Developer Tools
command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 source editor this table lists the default shortcuts for the source editor.
...if you do this, the selected bindings will be used for all the developer tools that use the source editor.
Cache Storage - Firefox Developer Tools
if you select a cache, you'll see a list of the resources it contains.
... for each resource, you'll see: the url for the resource.
Web Audio Editor - Firefox Developer Tools
within that context they then construct a number of audio nodes, including: nodes providing the audio source, such as an oscillator or a data buffer source nodes performing transformations such as delay and gain nodes representing the destination of the audio stream, such as the speakers each node has zero or more audioparam properties that configure its operation.
...here's the graph for the violent theremin demo: you can see that it uses three nodes: an oscillatornode as the source, a gainnode to control the volume, and an gainnode as the destination.
AesGcmParams - Web APIs
iv a buffersource — the initialization vector.
... additionaldata optional a buffersource.
Animation.timeline - Web APIs
a timeline is a source of time values for synchronization purposes, and is an animationtimeline-based object.
... syntax var animationstimeline = animation.timeline; animation.timeline = newtimeline; value a timeline object to use as the timing source for the animation, or null to use the default, which is the document's timeline.
AudioBuffer.copyFromChannel() - Web APIs
startinchannel optional an optional offset into the source channel's buffer from which to begin copying samples.
... the value of startinchannel is outside the current range of samples that already exist in the source buffer; that is, it's greater than its current length.
AudioBuffer.copyToChannel() - Web APIs
the copytochannel() method of the audiobuffer interface copies the samples to the specified channel of the audiobuffer, from the source array.
... syntax myarraybuffer.copytochannel(source, channelnumber, startinchannel); parameters source a float32array that the channel data will be copied from.
AudioParam.exponentialRampToValueAtTime() - Web APIs
examples in this example, we have a media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, exponentialramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively.
...; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var exprampplus = document.queryselector('.exp-ramp-plus'); var exprampminus = document.queryselector('.exp-ramp-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set its gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(audioctx.destinatio...
AudioParam.linearRampToValueAtTime() - Web APIs
example in this example, we have a media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, linearramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively.
...tx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var linearrampplus = document.queryselector('.linear-ramp-plus'); var linearrampminus = document.queryselector('.linear-ramp-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(audioctx.destinati...
AudioParam.setTargetAtTime() - Web APIs
time since starttime value 0 * timeconstant 0% 0.5 * timeconstant 39.3% 1 * timeconstant 63.2% 2 * timeconstant 86.5% 3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a media source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the length of time the effect lasts being controlled by the timeconstant.
...text; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var attimeplus = document.queryselector('.at-time-plus'); var attimeminus = document.queryselector('.at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.d...
AudioParam.setValueAtTime() - Web APIs
examples this simple example features a media element source with two control buttons (see our webaudio-examples repo for the source code, or view the example live).
...ext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var targetattimeplus = document.queryselector('.set-target-at-time-plus'); var targetattimeminus = document.queryselector('.set-target-at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.d...
AudioParam.setValueCurveAtTime() - Web APIs
examples in this example, we have a media source with a single button (see the webaudio-examples repo for the source code, or view the example live.) when this button is pressed, setvaluecurveattime() is used to change the gain value between the values contained in the wavearray array: // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for exam...
...ple var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var valuecurve = document.queryselector('.value-curve'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set button to do something onclick var wavearray = new float32array(9); wavearray[0] = 0.5; wavearray[1] = 1; wavear...
AudioParam.value - Web APIs
WebAPIAudioParamvalue
consider this example: const source = new audiobuffersourcenode(...); const rate = 5.3; source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); the log output will be false, because the playback rate parameter, rate, was converted to the 32-bit floating-point number closest to 5.3, which yields 5.300000190734863.
... one solution is to use the math.fround() method, which returns the single-precision value equivalent to the 64-bit javascript value specified—when setting value, like this: const source = new audiobuffersourcenode(...); const rate = math.fround(5.3); source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); in this case, the log output will be true.
AudioTrack - Web APIs
sourcebuffer read only the sourcebuffer that created the track.
... returns null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the mediasource.sourcebuffers attribute of its parent media source.
BaseAudioContext.createBiquadFilter() - Web APIs
for a complete working example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioc...
BiquadFilterNode.Q - Web APIs
for a complete working example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.type = "peaking"; biquadfilte...
BiquadFilterNode.detune - Web APIs
for a complete working example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.detune.value = 100; specific...
BiquadFilterNode.frequency - Web APIs
for a complete working example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification ...
BiquadFilterNode.gain - Web APIs
for a complete working example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification ...
BiquadFilterNode.type - Web APIs
for a complete working example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification ...
BiquadFilterNode - Web APIs
for a complete working example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioc...
CanvasRenderingContext2D.createPattern() - Web APIs
syntax canvaspattern ctx.createpattern(image, repetition); parameters image a canvasimagesource to be used as the pattern's image.
... examples creating a pattern from an image this example uses the createpattern() method to create a canvaspattern with a repeating source image.
Applying styles and colors - Web APIs
image is a canvasimagesource (that is, an htmlimageelement, another canvas, a <video> element, or the like.
... note: shadows are only drawn for source-over compositing operations.
Compositing example - Web APIs
var canvas1 = document.createelement("canvas"); var canvas2 = document.createelement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas conte...
...anvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext(pop, 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawon.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, hei...
ChannelSplitterNode - Web APIs
the channelsplitternode interface, often used in conjunction with its opposite, channelmergernode, separates the different channels of an audio source into a set of mono outputs.
... var ac = new audiocontext(); ac.decodeaudiodata(somestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we /...
Client.type - Web APIs
WebAPIClienttype
a document) function sendmessage(message) { return new promise(function(resolve, reject) { // note that this is the serviceworker.postmessage version navigator.serviceworker.controller.postmessage(message); window.serviceworker.onmessage = function(e) { resolve(e.data); }; }); } // controlling service worker self.addeventlistener("message", function(e) { // e.source is a client object e.source.postmessage("hello!
... your message was: " + e.data); // let's also post the type value back to the client e.source.postmessage(e.source.type); }); specifications specification status comment service workersthe definition of 'type' in that specification.
CloseEvent - Web APIs
the following definitions are sourced from the iana website [ref].
...the only permitted codes to be specified in firefox are 1000 and 3000 to 4999 [source, bug].
Crypto.getRandomValues() - Web APIs
implementations are required to use a seed with enough entropy, like a system-level entropy source.
...user agents are instead urged to provide the best entropy they can when generating random numbers, using a well-defined, efficient pseudorandom number generator built into the user agent itself, but seeded with values taken from an external source of pseudorandom numbers, such as a platform-specific random number function, the unix /dev/urandom device, or other source of random or pseudorandom data.
Crypto - Web APIs
WebAPICrypto
properties this interface implements properties defined on randomsource.
... methods this interface implements methods defined on randomsource.
DOMMatrix - Web APIs
WebAPIDOMMatrix
this is equivalent to the dot product a⋅b, where matrix a is the source matrix and b is the matrix given as an input to the method.
...this is equivalent to the dot product b⋅a, where matrix a is the source matrix and b is the matrix given as an input to the method.
DataTransfer.addElement() - Web APIs
the datatransfer.addelement() method sets the drag source to the given element.
... syntax void datatransfer.addelement(el); arguments el the element to set as the drag source.
DataTransfer.setData() - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer's setdata(), getdata() and cleardata()</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; // set the drag's format and data.
...lt(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // clear the drag data cache (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition o...
DataTransfer.setDragImage() - Web APIs
demo <!doctype html> <html lang=en> <title>example of datatransfer.setdragimage()</title> <meta name="viewport" content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // set the drag's format and data.
...ion dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition o...
DirectoryEntrySync - Web APIs
not_found_err the path was structurally correct, but refers to a resource that does not exist.
... not_found_err the path was structurally correct, but refers to a resource that does not exist.
Document Object Model (DOM) - Web APIs
it is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided: documenttouch domconfiguration domerrorhandler domimplementationlist domimplementationregistry domimplementationsource domlocator domobject domsettabletokenlist domuserdata elementtraversal entity entityreference namelist notation typeinfo userdatahandler html dom a document containing html is described using the document interface, which is extended by the html specification to include various html-specific features.
...vganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...
Element.innerHTML - Web APIs
WebAPIElementinnerHTML
usage notes the innerhtml property can be used to examine the current html source of the page, including any changes that have been made since the page was initially loaded.
...as a result, the document contents are replaced with a display of the page's entire source code.
EventTarget.addEventListener() - Web APIs
note, however that when using an anonymous function as the handler, such listeners will not be identical, because anonymous functions are not identical even if defined using the same unchanging source-code simply called repeatedly, even if in a loop.
... my_element.addeventlistener('click', (e) => { console.log(this.classname) // warning: `this` is not `my_element` console.log(e.currenttarget === this) // logs `false` }) if an event handler (for example, onclick) is specified on an element in the html source, the javascript code in the attribute value is effectively wrapped in a handler function that binds the value of this in a manner consistent with the addeventlistener(); an occurrence of this within the code represents a reference to the element.
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.
... this means, for example, if a service worker intercepts a stylesheet or worker script, then the provided response.url will be used to resolve any relative @import or importscripts() subresource loads (bug 1222008).
Fetch basic concepts - Web APIs
the fetch api provides an interface for fetching resources (including across the network).
... in a nutshell at the heart of fetch are the interface abstractions of http requests, responses, headers, and body payloads, along with a global fetch method for initiating asynchronous resource requests.
FontFace.FontFace() - Web APIs
WebAPIFontFaceFontFace
syntax var fontface = new fontface(family, source, descriptors); parameters family specifies a name that will be used as the font face value for font properties.
... source the font source.
Using the Gamepad API - Web APIs
you can view the demo live, and find the source code on github.
...you can find a working demo and look at the full source code on github.
GlobalEventHandlers.ondrag - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preve...
...ntdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <!-- <div class="source"> --> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definit...
GlobalEventHandlers.ondragover - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preve...
...ntdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragover' in that sp...
GlobalEventHandlers.ondragstart - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preve...
...ntdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragstart' in that s...
GlobalEventHandlers.ondrop - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preve...
...ntdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondrop'...
GlobalEventHandlers.onload - Web APIs
the load event fires when a given resource has loaded.
... there are also dom events like domcontentloaded and domframecontentloaded (which can be handled using eventtarget.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading.
HTMLAnchorElement.download - Web APIs
the htmlanchorelement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
... the value, if any, specifies the default file name for use in labeling the resource in a local file system.
HTMLCanvasElement.toBlob() - Web APIs
the code snippet below, for example, takes the image in the <canvas> element whose id is "canvas", obtains a copy of it as a png image, then appends a new <img> element to the document, whose source image is the one created using the canvas.
... cu.import('resource://gre/modules/osfile.jsm'); var writepath = os.path.join(os.constants.path.desktopdir, iconname + '.ico'); var promise = os.file.writeatomic(writepath, new uint8array(r.result), {tmppath:writepath + '.tmp'}); promise.then( function() { console.log('successfully wrote file'); }, function() ...
HTMLCanvasElement: webglcontextrestored event - Web APIs
once the context is restored, webgl resources such as textures and buffers that were created before the context was lost are no longer valid.
... you need to reinitialize the state of your webgl application and recreate resources.
HTMLElement.innerText - Web APIs
html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="...
...innertextoutput" rows="6" cols="30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext; result specification specification status comment html living standardthe definition of 'innertext' in that specification.
HTMLIFrameElement.referrerPolicy - Web APIs
the htmliframeelement.referrerpolicy property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
... this policy will leak origins and paths from tls-protected resources to insecure origins.
HTMLImageElement.crossOrigin - Web APIs
the htmlimageelement interface's crossorigin attribute is a string which specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
... syntax htmlimageelement.crossorigin = crossoriginmode; let crossoriginmode = htmlimageelement.crossorigin; value a domstring of a keyword specifying the cors mode to use when fetching the image resource.
HTMLMediaElement: abort event - Web APIs
the abort event is fired when the resource was not fully loaded, but not as the result of an error.
... bubbles no cancelable no interface event event handler property onabort examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('abort', () => { console.log(`abort loading: ${videosrc}`); }); const source = document.createelement('source'); source.setattribute('src', videosrc); source.setattribute('type', 'video/webm'); video.appendchild(source); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement.currentSrc - Web APIs
the htmlmediaelement.currentsrc property contains the absolute url of the chosen media resource.
... syntax var mediaurl = 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.seekable - Web APIs
media source extensionsthe definition of 'htmlmediaelement extensions, like for seekable' in that specification.
... recommendation specifies a new algorithm for returning the seekable time range of a media element whose source is a mediasource object.
HTMLScriptElement.referrerPolicy - Web APIs
the referrerpolicy property of the htmlscriptelement interface reflects the html referrerpolicy of the <script> element and fetches made by that script, defining which referrer is sent when fetching the resource.
...this policy will leak origins and paths from tls-protected resources to insecure origins.
Recommended Drag Types - Web APIs
the data for this type should be serialized html source code.
...the data should be just the text without any of the source tags or attributes.
HkdfParams - Web APIs
this may be one of: sha-1 sha-256 sha-384 sha-512 salt a buffersource.
... info a buffersource representing application-specific contextual information.
IDBCursor - Web APIs
WebAPIIDBCursor
the cursor has a source that indicates which index or object store it is iterating over.
... idbcursor.source read only returns the idbobjectstore or idbindex that the cursor is iterating.
IDBRequest - Web APIs
idbrequest.source read only the source of the request, such as an idbindex or an idbobjectstore.
... if no source exists (such as when calling idbfactory.open), it returns null.
InstallEvent - Web APIs
the promise resolves when all resources have been fetched and cached, or when any exception occurs.
...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) { co...
Key Values - Web APIs
vk_dimmer gdk_key_brightnessadjust (0x1008ff3b) "displayswap" cycles among video sources.
... vk_display_swap "dvr" switches the input source to the digital video recorder (dvr).
KeyframeEffect.KeyframeEffect() - Web APIs
syntax var keyframes = new keyframeeffect(element, keyframeset, keyframeoptions); var keyframes = new keyframeeffect(sourcekeyframes); parameters the first type of constructor (see above) creates a completely new keyframeeffect object instance.
...its parameter is as follows: sourcekeyframes a keyframeeffect object that you want to clone.
Location - Web APIs
WebAPILocation
methods location.assign() loads the resource at the url provided in parameter.
... location.replace() replaces the current resource with the one at the provided url (redirects to the provided url).
Locks.name - Web APIs
WebAPILockname
the name is selected by the developer to represent an abstract resource for which use is being coordinated across multiple tabs, workers, or other code within the origin.
... for example, if only one tab of a web application should be synchronizing network resources with an offline database, it could use a lock name such as "net_db_sync".
MediaCapabilities.decodingInfo() - Web APIs
syntax mediacapabilities.decodinginfo(mediadecodingconfiguration) parameters mediadecodingconfiguration a valid mediadecodingconfiguration dictionary containing a valid media decoding type of file or media-source and a valid media configuration: either an audioconfiguration or a videoconfiguration.
... example //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaDecodingConfiguration - Web APIs
media-source: represents a configuration that is meant to be used for playback of a mediasource.
... examples //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaImage - Web APIs
the media session api's mediaimage dictionary describes the images associated with the media resource mediametadata.
... sizes specifies the resource in multiple sizes so that user agent does not have to scale a single image.
MediaRecorderErrorEvent.error - Web APIs
this may be the case, for example, with sources obtained using getusermedia() when the user denies permission to use an input device.
... this also happens when a mediastreamtrack within the stream is marked as isolated due to the peeridentity constraint on the source stream.
MediaStreamTrack.enabled - Web APIs
the enabled property on the mediastreamtrack interface is a boolean value which is true if the track is allowed to render the source stream or false if it is not.
...when enabled, a track's data is output from the source to the destination; otherwise, empty frames are output.
MediaStreamTrack: ended event - Web APIs
bubbles no cancelable no interface event event handler property mediastreamtrack.onended usage notes ended events fire when the media stream track's source permanently stops sending data on the stream.
... the hardware generating the source data has been removed or ejected.
MediaStreamTrack: mute event - Web APIs
the mute event is sent to a mediastreamtrack when the track's source is temporarily unable to provide media data.
... bubbles no cancelable no interface event event handler property onmute examples in this example, event handlers are established for the mute and unmute events in order to detect when the media is not flowing from the source for the mediastreamtrack referenced by musictrack.
MediaStreamTrack.remote - Web APIs
the mediastreamtrack.remote read-only property allows javascript to know whether a webrtc mediastreamtrack is from a remote source or a local one.
... it returns a boolean with a value of true if the track is sourced remotely (that is, sourced by an rtcpeerconnection), or false if it is sourced locally.
MediaStreamTrack: unmute event - Web APIs
the unmute event is sent to a mediastreamtrack when the track's source is once again able to provide media data after a period of not being able to do so.
... examples in this example, event handlers are established for the mute and unmute events in order to detect when the media is not flowing from the source for the mediastreamtrack stored in the variable musictrack.
Recording a media element - Web APIs
while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
... line 10 when the preview video begins to play, we know there's media to record, so we respond by calling the startrecording() function we created earlier, passing in the preview video stream (as the source media to be recorded) and recordingtimems as the number of milliseconds of media to record.
Using the MediaStream Recording API - Web APIs
you can see this demo running live, or grab the source code on github.
...we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back.
MediaTrackConstraints - Web APIs
this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track.
... logicalsurface a constrainboolean value which may contain a single boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas.
MediaTrackSettings.autoGainControl - Web APIs
automatic gain control is a feature in which a sound source automatically manages changes in the volume of its source media to maintain a steady overall volume level.
... this feature is typically used on microphones, although it can be provided by other input sources as well.
MessageEvent - Web APIs
this is used to represent messages in: server-sent events (see eventsource.onmessage).
... messageevent.source read only a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
Navigator.msLaunchUri() - Web APIs
the uniform resource identifier (uri) contains the protocol for the default service or app, such as mailto://test@contoso.com.
... 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.nextSibling - Web APIs
WebAPINodenextSibling
syntax nextnode = node.nextsibling notes gecko-based browsers insert text nodes into a document to represent whitespace in the source markup.
...see the resources in the notes section.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
iv-01').nextelementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.nodename); el = el.nextelementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "nextelementsibling", { get: function(){ var e = this.nextsibling; while(e && 1 !== e.nodetype) e = e.nextsibling; return e; } }); } polyfil...
...l for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/nextelementsibling/nextelementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('nextelementsibling')) { return; } object.defineproperty(item, 'nextelementsibling', { configurable: true, enumerable: true, get: function () { var el = this; while (el = el.nextsibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status comment domthe definition of 'childnodenextelementsibling' in that...
NonDocumentTypeChildNode.previousElementSibling - Web APIs
div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("previouselementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "previouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explore...
...r 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('previouselementsibling')) { return; } object.defineproperty(item, 'previouselementsibling', { configurable: true, enumerable: true, get: function () { let el = this; while (el = el.previoussibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status comment domthe definition of 'nondocumenttypechildnode.previouselement...
OfflineAudioContext.OfflineAudioContext() - Web APIs
example const offlinectx = new offlineaudiocontext({ numberofchannels: 2, length: 44100 * 40, samplerate: 44100, }); const source = offlinectx.createbuffersource(); // etc...
... for a full working example, see our offline-audio-context-promise github repo (see the source code too.) specifications specification status comment web audio apithe definition of 'offlineaudiocontext()' in that specification.
PerformanceNavigationTiming.toJSON() - Web APIs
syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performancenavigationtiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes.
... example // get a resource performance entry var perfentries = performance.getentriesbytype("navigation"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performancenavigationtiming.tojson() = " + s); specifications specification status comment navigation timing level 2the definition of 'tojson()' in that specification.
ProgressEvent() - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
ProgressEvent.initProgressEvent() - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
PublicKeyCredentialCreationOptions.challenge - Web APIs
the challenge property of the publickeycredentialcreationoptions dictionary is a buffersource used as a cryptographic challenge.
... syntax challenge = publickeycredentialcreationoptions.challenge value a buffersource which is at least 16 bytes long.
PublicKeyCredentialCreationOptions.user - Web APIs
icon optional an url as a usvstring value which points to an image resource which can be the avatar image for the user.
... id a buffersource uniquely identifying a given user.
PublicKeyCredentialRequestOptions.challenge - Web APIs
the challenge property of the publickeycredentialrequestoptions dictionary is a buffersource used as a cryptographic challenge.
... syntax challenge = publickeycredentialrequestoptions.challenge value a buffersource which is at least 16 bytes long.
RTCDataChannel.onbufferedamountlow - Web APIs
example this example responds to the bufferedamountlow event by fetching up to 64kb of a file represented by an object source and calling rtcdatachannel.send() to queue up the retrieved data for sending on the data channel.
...*/ dc.onbufferedamountlow = function() { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onbufferedamountlow' in that specification.
RTCIceCandidate.address - Web APIs
the rtcicecandidate interface's read-only address property is a string providing the address of the device which is the source of the candidate.
... security notes it's important to note here that although webrtc does not require the two peers on an rtcpeerconnection to know one another's true ip addresses, the address property on rtcicecandidate can expose more information about the source of the remote peer than the user expects.
RTCIceCandidatePairStats.circuitBreakerTriggerCount - Web APIs
a 5-tuple defining a tcp connection is made up of the following data: the source ip address.
... the source port number.
RTCOfferAnswerOptions.voiceActivityDetection - Web APIs
the default value, true, indicates that voice detection should be used and that if possible, the user agent should automatically disable or mute outgoing audio when the audio source is not sensing a human voice.
...the default value, true, indicates that the user agent should monitor the audio coming from the microphone or other audio source and automatically cease transmitting data or mute when the user isn't speaking into the microphone, a value of false indicates that the audio should continue to be transmitted regardless of whether or not speech is detected.
RTCRtpReceiver - Web APIs
methods rtcrtpreceiver.getcontributingsources() returns an array of rtcrtpcontributingsource instances for each unique csrc (contributing source) identifier received by the current rtcrtpreceiver in the last ten seconds.
... rtcrtpreceiver.getsynchronizationsources() returns an array including one rtcrtpsynchronizationsource instance for each unique ssrc (synchronization source) identifier received by the current rtcrtpreceiver in the last ten seconds.
RTCStatsReport - Web APIs
properties common to all statistic categories all webrtc statistics objects are fundamentally based on the rtcstats dictionary, which provides the most fundamental information: the timestamp, the statistic type string, and an id uniquely identifying the source of the data: id a domstring which uniquely identifies the object which was inspected to produce this object based on rtcstats.
... csrc an rtccontributingsourcestats object which contains statistics related to a contributing source (csrc) that contributed to an inbound rtp stream.
ReadableStream - Web APIs
the supplied reason argument will be given to the underlying source, which may or may not use it.
... examples in the following example, an artificial response is created to stream html fragments fetched from another resource to the browser.
ReadableStreamBYOBReader.cancel() - Web APIs
the supplied reason parameter will be given to the underlying source, which may or may not use it.
... exceptions typeerror the source object is not a readablestreambyobreader, or the stream has no owner.
ReadableStreamDefaultController.error() - Web APIs
exceptions typeerror the source object is not a readablestreamdefaultcontroller, or the stream is not readable for some other reason.
... examples the a readable stream with an underlying push source and backpressure support example in the spec provides a good example of using readablestreamdefaultcontroller.desiredsize to manually detect when the stream is full and apply backpressure, and also of using error() to manually trigger a stream error if another part of the system it relies on fails.
ReadableStreamDefaultReader.cancel() - Web APIs
the supplied reason argument will be given to the underlying source, which may or may not use it.
... exceptions typeerror the source object is not a readablestreamdefaultreader, or the stream has no owner.
ReadableStreamDefaultReader - Web APIs
the supplied reason argument will be given to the underlying source, which may or may not use it.
... examples in the following example, an artifical response is created to stream html fragments fetched from another resource to the browser.
Request.integrity - Web APIs
WebAPIRequestintegrity
the integrity read-only property of the request interface contains the subresource integrity value of the request.
... syntax var myintegrity = request.integrity; value the subresource integrity value of the request (e.g., sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=).
Resize Observer API - Web APIs
examples you find a couple of simple examples on our github repo: resize-observer-border-radius.html (see source): a simple example with a green box, sized as a percentage of the viewport size.
... resize-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width.
SVGAElement.target - Web APIs
this property is used when there are multiple possible targets for the ending resource, like when the parent document is a mlti-frame html or xhtml document.
... syntax mylink.target = 'value'; value an svganimatedstring indicating the ending resource target that opens the document when the link is activated.
SVGFontElement - Web APIs
x" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgexternalresourcesrequired and svgstylable.
... methods this interface has no methods but inherits methods from its parent, svgelement and implements methods from svgexternalresourcesrequired and svgstylable.
SecurityPolicyViolationEvent.blockedURI - Web APIs
the blockeduri read-only property of the securitypolicyviolationevent interface is a usvstring representing the uri of the resource that was blocked because it violates a policy.
... syntax let blockeduri = violationeventinstance.blockeduri; value a usvstring representing the uri of the blocked resource.
SecurityPolicyViolationEvent.referrer - Web APIs
the referrer read-only property of the securitypolicyviolationevent interface is a usvstring representing the referrer of the resources whose policy was violated.
... syntax let referrer = violationeventinstance.referrer; value a usvstring representing the url of the referrer of the violating resources.
Server-sent events - Web APIs
interfaces eventsource defines all the features that handle connecting to a server, receiving events/data, errors, closing a connection, etc.
... living standard see also tools eventsource polyfill for node.js remy sharp’s eventsource polyfill yaffle’s eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support related topics ajax javascript websockets other resources a twitter like application powered by server-sent events and its code on github.
ServiceWorkerContainer.register() - Web APIs
alternatively, if this code were included in a page at example.com/product/description.html, with the javascript file residing at example.com/product/sw.js, then the service worker would only apply to resources under example.com/product.
... the following code, if included in example.com/index.html, at the root of a site, would only apply to resources under example.com/product.
Streams API - Web APIs
concepts and usage streaming involves breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit.
...previously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process the whole lot after it is fully received.
Touch.clientX - Web APIs
WebAPITouchclientX
in this example, we assume the user initiates a touch on an element with an id of source, moves within the element or out of the element and then releases contact with the surface.
... // register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
Touch.clientY - Web APIs
WebAPITouchclientY
in this example, we assume the user initiates a touch on an element with an id of source, moves within the element or out of the element and then releases contact with the surface.
... // register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
Touch.pageX - Web APIs
WebAPITouchpageX
in following simple code snippet, we assume the user initiates one or more touch contacts on the source element, moves the touch points and then releases all contacts with the surface.
... // register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
Touch.pageY - Web APIs
WebAPITouchpageY
in following simple code snippet, we assume the user initiates one or more touch contacts on the source element, moves the touch points and then releases all contacts with the surface.
... // register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
Touch.screenX - Web APIs
WebAPITouchscreenX
in following simple code snippet, we assume the user initiates multiple touch contacts on an element with an id of source and then releases contacts with the surface.
... // register a touchstart listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points and log each screenx/y coordinate.
Touch.target - Web APIs
WebAPITouchtarget
in following simple code snippet, we assume the user initiates one or more touch contacts on the source element.
... // register a touchmove listener for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points that were activiated // for this element.
Multi-touch interaction - Web APIs
the source code is available on github and pull requests and bug reports are welcome.
...id = " + ev.targettouches[i].identifier + " "; } o.innerhtml += s; } } function clearlog(event) { var o = document.getelementsbytagname('output')[0]; o.innerhtml = ""; } related topics and resources pointer events ...
TrackDefault.byteStreamTrackID - Web APIs
the bytestreamtrackid read-only property of the trackdefault interface returns the id of the specific track that the sourcebuffer should apply to.
... if not specified in the constructor, this value will be an empty string and the sourcebuffer can contain any tracks of the specified trackdefault.type.
UIEvent() - Web APIs
WebAPIUIEventUIEvent
sourcecapabilities: an instance of the inputdevicecapabilities interface which provides information about the physical device responsible for generating a touch event.
... specifications specification status comment inputdevicecapabilities draft added sourcecapabilities property.
UIEvent - Web APIs
WebAPIUIEvent
uievent.sourcecapabilities read only returns an instance of the inputdevicecapabilities interface, which provides information about the physical device responsible for generating a touch event.
... specifications specification status comment inputdevicecapabilities draft added sourcecapabilities property.
VideoTrack - Web APIs
sourcebuffer read only the sourcebuffer that created the track.
... returns null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the mediasource.sourcebuffers attribute of its parent media source.
WebGL2RenderingContext - Web APIs
the webgl tutorial has more information, examples, and resources on how to get started with webgl.
... webgl2renderingcontext.invalidatesubframebuffer() invalidates portions of the contents of attachments in a framebuffer webgl2renderingcontext.readbuffer() selects a color buffer as the source for pixels.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
examples checking compilation messages /* load shader source code.
... */ gl.shadersource(shader, shadercode); /* compile shader source code.
A basic 2D WebGL animation example - Web APIs
function compileshader(id, type) { let code = document.getelementbyid(id).firstchild.nodevalue; let shader = gl.createshader(type); gl.shadersource(shader, code); gl.compileshader(shader); if (!gl.getshaderparameter(shader, gl.compile_status)) { console.log(`error compiling ${type === gl.vertex_shader ?
... the source code is sent into the new shader by passing it into gl.shadersource(), and then the shader is compiled using gl.compileshader() compile errors are logged to the console.
Hello GLSL - Web APIs
/script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = g...
...ntext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Hello vertex attributes - Web APIs
x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = g...
...ntext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Textures from code - Web APIs
entposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = g...
...ntext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Animating textures in WebGL - Web APIs
you can use similar code to use any sort of data (such as a <canvas>) as the source for your textures.
... the video must be loaded from a secure source in order to be used to provide texture data to webgl.
Using shaders to apply color in WebGL - Web APIs
to use these colors, the vertex shader needs to be updated to pull the appropriate color from the color buffer: const vssource = ` attribute vec4 avertexposition; attribute vec4 avertexcolor; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying lowp vec4 vcolor; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vcolor = avertexcolor; } `; the key difference here is that for each vertex, we pass its color using a varying...
... coloring the fragments as a refresher, here's what our fragment shader looked like previously: const fssource = ` void main() { gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0); } `; in order to pick up the interpolated color for each pixel, we need to change this to fetch the value from the vcolor varying: const fssource = ` varying lowp vec4 vcolor; void main(void) { gl_fragcolor = vcolor; } `; each fragment receives the interpolated color based on its position relative to the vertex positions instead of a fixed value.
WebGL model view projection - Web APIs
this function handles the basics of taking some glsl source code and compiling it into a webgl program.
...in real world applications, you don't have all your source coordinates already in clip space coordinates.
Signaling and video calling - Web APIs
regardless of why an attempt to get the stream fails, we call our closevideocall() function to shut down the rtcpeerconnection, and release any resources already allocated by the process of attempting the call.
... hanging up when the user clicks the "hang up" button to end the call, the hangupcall() function is called: function hangupcall() { closevideocall(); sendtoserver({ name: myusername, target: targetusername, type: "hang-up" }); } hangupcall() executes closevideocall() to shut down and reset the connection and release resources.
Taking still photos with WebRTC - Web APIs
it is the <video> element's source to our new stream.
... using specific devices you can, if needed, restrict the set of permitted video sources to a specific device or set of devices.
Example and tutorial: Simple synth keyboard - Web APIs
because oscillatornode is based on audioscheduledsourcenode, this is to some extent an example for that as well.
...then, at last, the oscillator is started up so that it begins to produce sound by calling the oscillator's inherited audioscheduledsourcenode.start() method.
Functions and classes available to Web Workers - Web APIs
fetch the fetch spec provides an up-to-date definition of, and api for, fetching resources (e.g.
... 34.0 (34.0) no support 33.0 no support performanceentry, performancemeasure, performancemark, performanceobserver, performanceresourcetiming enables retrieval and analysis of detailed data regarding various aspects of an application's network performance.
Window: load event - Web APIs
WebAPIWindowload event
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
... this is in contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
Window: unload event - Web APIs
the unload event is fired when the document or a child resource is being unloaded.
... bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
WindowEventHandlers.onunload - Web APIs
these events fire when the window is unloading its content and resources.
... the resource removal is processed after the unload event occurs.
WritableStream.WritableStream() - Web APIs
it can clean up any held resources, much like close(), but abort() will be called even if writes are queued up — those chunks will be thrown away.
...the data source can wither write more data (line 11) or call close() (line 24).
XMLHttpRequest.send() - Web APIs
an xmlhttprequestbodyinit, which per the fetch spec can be a blob, buffersource, formdata, urlsearchparams, or usvstring object.
... networkerror the resource type to be fetched is a blob, and the method is not get.
XRSession.onsqueezeend - Web APIs
to learn more about how the sequence of squeeze events works, see primary squeeze actions in inputs and input sources.
... xrsession.onsqueezeend = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (user.heldobject) { cancelobjectdrag(user.heldobject); } } }; this code presumes that if the user actually intentionally completed the drag, user.heldobject will be null here.
XRSession.onsqueezestart - Web APIs
to learn more about how to use and handle webxr controller inputs, see inputs and input sources.
... xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.
Generating HTML - Web APIs
figure 2 xml file :(example2.xml)view example | view source xml document (example2.xml): <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example2.xsl"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
... the final xslt stylesheet looks as follows: figure 6 : final xslt stylesheetview example | view source xsl stylesheet: <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/>...
XSL Transformations in Mozilla FAQ - Web APIs
make sure the mime type for both source and stylesheet are set to an xml mimetype, namely text/xml or application/xml.
...having xslt stylesheet specific to particular media would require to retransform the original xml source, which counteracts the expectations of the user.
XSLTProcessor - Web APIs
[throws] documentfragment xsltprocessor.transformtofragment(node source, document owner) transforms the node source by applying the stylesheet imported using the xsltprocessor.importstylesheet() function.
... [throws] document xsltprocessor.transformtodocument(node source) transforms the node source applying the stylesheet given importing using the xsltprocessor.importstylesheet() function.
Using the aria-describedby attribute - Accessibility
<div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
... used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-describedby ...
Using the link role - Accessibility
the link role is used to identify an element that creates a hyperlink to a resource that is in the application or external.
... aria attributes used link related aria techniques button role additional resources aria best practices - link role: http://www.w3.org/tr/wai-aria-practices/#link ...
Using the log role - Accessibility
examples example 1: adding the role in the html code the snippet below shows how the log role is added directly into the html source code.
... aria attributes used log related aria techniques marquee role compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices – mplementing live regions: http://www.w3.org/tr/wai-aria-practices/#liveregions ...
Using the status role - Accessibility
examples example 1: adding the status role in html the snippet below shows how the status role is added directly into the html source code.
...p> working examples: notes aria attributes used status related aria techniques alert role live region roles live region attributes compatibility the paciello group published some data on compatibility via their 2014 blog post: screen reader support for aria live regions tbd: add updated support information for common ua and at product combinations additional resources previous recommendations from wai-aria 1.0 (2014) for the status role ...
ARIA Test Cases - Accessibility
- - - - nvda - 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.
...fail - no landmarks reported on page load but there are many in the source.
ARIA annotations - Accessibility
</p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-details="comment-source"><span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span></span>.
... </p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use some more interesting styling of your own, for example: ins, [role="insertion"] { color: #0c0; text-decoration: underline; } del, [role="deletion"] { color: red; text-decoration: line-through; } ins, [role="insertion"], del, [role="deletion"] { text-decoration-thickness: 2px; background-color: #fee; padding: 2px 4px; margin: 0 1px; } comments online document applications also commonly feature commenting systems, and it would be nice to have a way to semantically associate commented content and its comments.
ARIA: Suggestion role - Accessibility
</p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-details="comment-source"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>.
... </p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
ARIA: textbox role - Accessibility
examples example 1: adding the role in the html code for single line input the snippet below shows how the textbox role is added directly into the html source code.
... <div role="textbox" contenteditable="true"></div> example 2: adding the role in the html code for multi-line input the snippet below shows how the textbox role is added directly into the html source code.
Keyboard-navigable JavaScript widgets - Accessibility
the order in which elements gain focus when using a keyboard, is the source order by default.
...see the source code of this aria radiogroup example for a direct illustration of how this works.
Web Accessibility: Understanding Colors and Luminance - Accessibility
ed seizures: expert consensus of the epilepsy foundation of america working group w3c issues and discussions contrast ratio math and related visual issues #695 luminance / luma confusion #236 outdated threshold for srgb companding in the "relative luminance" definition #308 non-srgb color spaces, outdated srgb threshold, and other issues in the "relative luminance" definition #360 w3c resources css color module level 3 css color module level 4 ensuring that a contrast ratio of 3:1 is provided for icons understanding success criterion 1.4.3: contrast (minimum) wcag working group's wiki page on relative luminance contributers many, many thanks to wayne dick of the low vision task force of the w3c and the intense discussions on luminance; to teal for his help and discussions on ...
...human perception of the color blue and how software companies create algorithms for image output based on it; and to tom jewett from knowbility; for the tools and educational resources he developed, that help us all.
Understanding the Web Content Accessibility Guidelines - Accessibility
target wcag 2.0 first when allocating resources.
...if you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
in this guide we will look at how well flexbox is supported in browsers, and look at some potential issues, resources and methods for creating workarounds and fallbacks.
...if you are trying to ensure backwards compatibility with old versions of browsers, and in particular ie10 and 11, the flexbugs site is a helpful resource.
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the external resources and see also sections of this document link to more writing modes resources.
... see also writing modes external resources css writing modes, jen simmons on 24 ways ...
OpenType font features guide - CSS: Cascading Style Sheets
the typefaces shown are playfair display, source serif pro, ibm plex serif, dancing script, and kokoro (all available and free to use, most are on google fonts and other services).
...you can see examples of a number of them above, and there are several resources available for finding more of them.
Stacking context example 3 - CSS: Cascading Style Sheets
note: in the source code you will see that second-level and third level menus are made of several divs contained in an absolutely positioned container.
... example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 {...
Media queries - CSS: Cascading Style Sheets
media queries in html in html, media queries can be applied to various elements: in the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied.
... in the <source> element's media attribute, they define the media to which that source should be applied.
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
hborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-ri...
...percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@name...
border-image-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
...ge areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels.
element() - CSS: Cascading Style Sheets
WebCSSelement
fox full support 57prefixed full support 57prefixed prefixed implemented with the vendor prefix: -moz- no support 29 — 57prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image, background, border-image and border-image-source.
...oid full support 60prefixed full support 60prefixed prefixed implemented with the vendor prefix: -moz- no support 29 — 60prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image, background, border-image and border-image-source.
flex-direction - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>th...
grid-column - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
...one can use a little javascript to enable automatic annotation: source repository.
grid-row - CSS: Cascading Style Sheets
WebCSSgrid-row
the source for this interactive example is stored in a github repository.
...one can use a little javascript to enable automatic annotation: source repository.
<image> - CSS: Cascading Style Sheets
WebCSSimage
its specified size, defined by css properties like width, height, or background-size; and (3) its default size, determined by the kind of property the image is used with: kind of object (css property) default object size background-image the size of the element's background positioning area list-style-image the size of a 1em character border-image-source the size of the element's border image area cursor the browser-defined size matching the usual cursor size on the client's system mask-image ?
... mask-border-source ?
shape-outside - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
...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.
Ajax - Developer guides
WebGuideAJAX
this article will explain how to use some ajax techniques, like: analyzing and manipulating the response of the server monitoring the progress of a request submitting forms and upload binary files – in pure ajax, or using formdata objects using ajax within web workers fetch api the fetch api provides an interface for fetching resources.
...this feature allows web apps to obtain an html resource as a parsed dom using xmlhttprequest.
Adding captions and subtitles to HTML5 video - Developer guides
note: you can find the source on github, and also view the example live.
...we actually have our subtitles in three different languages — english, german, and spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> </video> as ...
Writing Web Audio API code that works in every browser - Developer guides
things that are not ready yet second, ensure that your project doesn't use node types that are not implemented yet in firefox: mediastreamaudiosourcenode, mediaelementaudiosourcenode and oscillatornode.
...if you're a person that learns by example, it might be interesting to have a look at their source and see how they have resolved the compatibility issues.
Media buffering, seeking, and time ranges - Developer guides
ciated timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillr...
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-col...
Challenge solutions - Developer guides
you see two items listed, one that references an internal resource and one that references your stylesheet file.
... the internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.
Making content editable - Developer guides
sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.appendchild(opre); document.execcommand("defaultparagraphseparator", false, "div"); } else {...
...type html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock'...
Separate sites for mobile and desktop - Developer guides
however any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code.
...if you’d like to see the source code behind an example of this approach in action, feel free to check out the github repository for amo or sumo.
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
it will be replaced by an implementation of the media source extensions api which will allow support for dash via javascript libraries such as dash.js.
... using dash - client side you'll want to modify your web page to point to the dash manifest first, instead of directly to a particular video file: <video> <source src="movie.mpd"> <source src="movie.webm"> your browser does not support the video tag.
<cite>: The Citation element - HTML: Hypertext Markup Language
WebHTMLElementcite
the source for this interactive example is stored in a github repository.
... to include a reference to the source of quoted material which is contained within a <blockquote> or <q> element, use the cite attribute on the element.
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
WebHTMLElementi
historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.
... the source for this interactive example is stored in a github repository.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
important: while the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "view source" functionality.
... the output looks like this: note: you can also find the example on github (see the source code, and also see it running live).
<ins> - HTML: Hypertext Markup Language
WebHTMLElementins
the source for this interactive example is stored in a github repository.
... cite this attribute defines the uri of a resource that explains the change, such as a link to meeting minutes or a ticket in a troubleshooting system.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
WebHTMLElementmark
the source for this interactive example is stored in a github repository.
... usage notes typical use cases for <mark> include: when used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance.
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
WebHTMLElementq
the source for this interactive example is stored in a github repository.
... cite the value of this attribute is a url that designates a source document or message for the information quoted.
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
WebHTMLElementrb
{{embedinteractiveexample("pages/tabbed/rb.html", "tabbed-standard")}} the source for this interactive example is stored in a github repository.
... even though <rb> is not an empty element, it is common to just include the opening tag of each element in the source code, so that the ruby markup is less complex and easier to read.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
WebHTMLElementstrong
the source for this interactive example is stored in a github repository.
...<b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask "should i use <b> or <strong>?
<style>: The Style Information element - HTML: Hypertext Markup Language
WebHTMLElementstyle
the source for this interactive example is stored in a github repository.
...it is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial.
Data URLs - HTTP
data:text/html,lots of text...<p><a name%3d"bottom">bottom</a>?arg=val this represents an html resource whose contents are: lots of text...<p><a name="bottom">bottom</a>?arg=val syntax the format for data urls is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64 format.
...for example, the opera 11 browser limited urls to 65535 characters long which limits data urls to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a mime type).
Browser detection using the user agent - HTTP
from this point on, we shall assume that all the dog boxes are at the top of the source code, that all the cat boxes are at the bottom of the source code, and that all these boxes have the same parent element.
...if more people visit the webpage to see the cats, then it might be a good idea to put all the cats higher in the source code than the dogs so that more people can find what they are looking for faster on smaller screens where the content collapses down to one column.
Reason: CORS request did not succeed - HTTP
other possible causes include: trying to access an https resource that has an invalid certificate will cause this error.
... trying to access an http resource from a page with an https origin will also cause this error.
Reason: CORS header 'Access-Control-Allow-Origin' missing - HTTP
the response to the cors request is missing the required access-control-allow-origin header, which is used to determine whether or not the resource can be accessed by content operating within the current origin.
... for example, to allow a site at https://amazing.site to access the resource using cors, the header should be: access-control-allow-origin: https://amazing.site you can also configure a site to allow any site to access it by using the * wildcard.
Reason: CORS request not HTTP - HTTP
resources in the same directory and its subdirectories were treated as having the same origin for purposes of the cors same-origin rule.
...therefore, other resources in the same directory or its subdirectories no longer satisfy the cors same-origin rule.
Allow - HTTP
WebHTTPHeadersAllow
the allow header lists the set of methods supported by a resource.
...an empty allow header indicates that the resource allows no request methods, which might occur temporarily for a given resource, for example.
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.
CSP: plugin-types - HTTP
the http content-security-policy (csp) plugin-types directive restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded.
... instantiation of an <embed>, <object> or <applet> element will fail if: the element to load does not declare a valid mime type, the declared type does not match one of specified types in the plugin-types directive, the fetched resource does not match the declared type.
Content-Type - HTTP
the content-type entity header is used to indicate the media type of the resource.
... syntax content-type: text/html; charset=utf-8 content-type: multipart/form-data; boundary=something directives media-type the mime type of the resource or the data.
If-Unmodified-Since - HTTP
the if-unmodified-since request http header makes the request conditional: the server will send back the requested resource, or accept it in the case of a post or another non-safe method, only if it has not been last modified after the given date.
... if the resource has been modified after the given date, the response will be a 412 (precondition failed) error.
Last-Modified - HTTP
the last-modified response http header contains the date and time at which the origin server believes the resource was last modified.
... it is used as a validator to determine if a resource received or stored is the same.
Location - HTTP
WebHTTPHeadersLocation
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.
OPTIONS - HTTP
WebHTTPMethodsOPTIONS
options /resources/post-here/ http/1.1 host: bar.example accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type the server now can respond if it will accept a request under these circumstances...
...in this example, the server response says that: access-control-allow-origin the https://foo.example origin is permitted to request the bar.example/resources/post-here/ url via the following: access-control-allow-methods post, get, and options are permitted methods for the url.
201 Created - HTTP
WebHTTPStatus201
the http 201 created success status response code indicates that the request has succeeded and has led to the creation of a resource.
... 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.
204 No Content - HTTP
WebHTTPStatus204
the common use case is to return 204 as a result of a put request, updating a resource, without changing the current content of the page displayed to the user.
... if the resource is created, 201 created is returned instead.
301 Moved Permanently - HTTP
WebHTTPStatus301
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).
304 Not Modified - HTTP
WebHTTPStatus304
the http 304 not modified client redirection response code indicates that there is no need to retransmit the requested resources.
... it is an implicit redirection to a cached resource.
307 Temporary Redirect - HTTP
WebHTTPStatus307
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.
...this is useful when you want to give an answer to a put method that is not the uploaded resources, but a confirmation message (like "you successfully uploaded xyz").
308 Permanent Redirect - HTTP
WebHTTPStatus308
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).
405 Method Not Allowed - HTTP
WebHTTPStatus405
the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the target resource.
... the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods.
412 Precondition Failed - HTTP
WebHTTPStatus412
the hypertext transfer protocol (http) 412 precondition failed client error response code indicates that access to the target resource has been denied.
...in that case, the request, usually an upload or a modification of a resource, cannot be made and this error response is sent back.
A re-introduction to JavaScript (JS tutorial) - JavaScript
this has been a source of confusion ever since.
...the most common host environment is the browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
Control flow and error handling - JavaScript
for example, you may need to release a resource that your script has tied up.
... openmyfile(); try { writemyfile(thedata); // this may throw an error } catch(e) { handleerror(e); // if an error occurred, handle it } finally { closemyfile(); // always close the resource } if the finally block returns a value, this value becomes the return value of the entire try…catch…finally production, regardless of any return statements in the try and catch blocks: function f() { try { console.log(0); throw 'bogus'; } catch(e) { console.log(1); return true; // this return statement is suspended // until finally block has compl...
Regular expressions - JavaScript
use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input.
...(this property is set only if the regular expression uses the g option, described in advanced searching with flags.) 5 source the text of the pattern.
Memory Management - JavaScript
this automaticity is a potential source of confusion: it can give developers the false impression that they don't need to worry about memory management.
... cycles are no longer a problem in the first example above, after the function call returns, the two objects are no longer referenced by any resource that is reachable from the global object.
SyntaxError: illegal character - JavaScript
when something like this happens to your code and you're not able to find the source of the problem, it's often best to just delete the problematic line and retype it.
... var colors = ['#000', '#333', '#666']; hidden characters when copy pasting code from external sources, there might be invalid characters.
SyntaxError: missing ; before statement - JavaScript
you need to provide a semicolon, so that javascript can parse the source code correctly.
...some of them are affected by automatic semicolon insertion (asi), but in this case you need to provide a semicolon, so that javascript can parse the source code correctly.
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 sourceurl pragmas is deprecated.
...and "x"typeerror: 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 //# sourcemappingurl, 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 ...
Functions - JavaScript
a function declaration ceases to be one when it either: becomes part of an expression is no longer a "source element" of a function or the script itself.
... a "source element" is a non-nested statement in the script or a function body: var x = 0; // source element if (x === 0) { // source element x = 10; // not a source element function boo() {} // not a source element } function foo() { // source element var y = 20; // source element function bar() {} // source element while (y === 10) { // source element function blah() {} // not a source element y++; // not a source element } } examples // function declaration function foo() {} // function expression (function bar() {}) // function expression x = function hello() {} if (x) { // function expression function world() {} } // function declaration function a() { // functi...
Array.prototype.reduce() - JavaScript
the source for this interactive example is stored in a github repository.
... the reducer function takes four arguments: accumulator (acc) current value (cur) current index (idx) source array (src) your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.
Array.prototype.map() - JavaScript
the source for this interactive example is stored in a github repository.
...this is the source of possible confusion.
Array.prototype.sort() - JavaScript
the source for this interactive example is stored in a github repository.
... = list.map(function(el, i) { return { index: i, value: el.tolowercase() }; }) // sorting the mapped array containing the reduced values mapped.sort(function(a, b) { if (a.value > b.value) { return 1; } if (a.value < b.value) { return -1; } return 0; }); // container for the resulting order var result = mapped.map(function(el){ return list[el.index]; }); there is an open source library available called mapsort which applies this approach.
Error.prototype.stack - JavaScript
ction('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 //# sourceurl directive to name an eval source.
... see also debug eval sources in the debugger docs and this blog post.
FinalizationRegistry.prototype.unregister() - JavaScript
*/ constructor(label) { // vvvvv−−−−− held value this.#registry.register(this, label, this); // target −−−−−^^^^ ^^^^−−−−− unregister token } /** * releases resources held by this `thingy` instance.
... */ constructor(filename) { this.#file = file.open(filename); // vvvvv−−−−− held value this.#registry.register(this, label, this.#file); // target −−−−−^^^^ ^^^^^^^^^^−−−−− unregister token } /** * releases resources held by this `thingy` instance.
RegExp() constructor - JavaScript
the source for this interactive example is stored in a github repository.
...use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input.
RegExp.prototype.exec() - JavaScript
the source for this interactive example is stored in a github repository.
... false source the text of the pattern.
RegExp.prototype.test() - JavaScript
the source for this interactive example is stored in a github repository.
... const str = 'hello world!'; const result = /^hello/.test(str); console.log(result); // true the following example logs a message which depends on the success of the test: function testinput(re, str) { let midstring; if (re.test(str)) { midstring = 'contains'; } else { midstring = 'does not contain'; } console.log(`${str} ${midstring} ${re.source}`); } using test() on a regex with the "global" flag when a regex has the global flag set, test() will advance the lastindex of the regex.
RegExp - JavaScript
use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and obtain it from another source, such as user input.
... regexp.prototype.source the text of the pattern.
String - JavaScript
primitives passed to eval are treated as source code; string objects are treated as all other objects are, by returning the object.
...rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents.
Symbol - JavaScript
instance methods symbol.prototype.tosource() returns a string containing the source of the symbol object.
... overrides the object.prototype.tosource() method.
WebAssembly.compile() - JavaScript
syntax promise<webassembly.module> webassembly.compile(buffersource); parameters buffersource a typed array or arraybuffer containing the binary code of the .wasm module you want to compile.
... exceptions if buffersource is not a typed array, a typeerror is thrown.
uneval() - JavaScript
the uneval() function creates a string representation of the source code of an object.
... return value a string representing the source code of object.
Destructuring assignment - JavaScript
the source for this interactive example is stored in a github repository.
... const x = [1, 2, 3, 4, 5]; the destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.
switch - JavaScript
the source for this interactive example is stored in a github repository.
... methods for multi-criteria case source for this technique is here: switch statement multiple cases in javascript (stack overflow) multi-case : single operation this method takes advantage of the fact that if there is no break below a case clause it will continue to execute the next case clause regardless if the case meets the criteria.
try...catch - JavaScript
the source for this interactive example is stored in a github repository.
... openmyfile(); try { // tie up a resource writemyfile(thedata); } finally { closemyfile(); // always close the resource } examples nested try-blocks first, let's see what happens with this: try { try { throw new error('oops'); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // output: // "finally" // "outer" "oops" now, if we already caught the exception in the inne...
JavaScript shells - JavaScript
es6console.com - an open-source javascript console to test ecmascript 2015 code inside the browser.
... jsconsole.com -- an open-source javascript console with the ability to easily link to particular expressions javascript shell (web page) - also available as part of the extension developer's extension jash: javascript shell - a dhtml based shell that gives you command line access to a web page.
Codecs used by WebRTC - Web media technologies
other audio codecs codec name browser compatibility g.722 chrome, firefox, safari ilbc[1] chrome, safari isac[2] chrome, safari [1] internet low bitrate codec (ilbc) is an open-source narrow-band codec developed by global ip solutions and now google, designed specifically for streaming voice audio.
... [2] the internet speech audio codec (isac) is another codec developed by global ip solutions and now owned by google, which has open-sourced it.
Optimizing startup performance - Web Performance
the source application might have a main loop that can easily be made to operate asynchronously (by running each main loop iteration separately); startup is often just a continuous, monolithic procedure that might periodically update a progress meter.
... utilize resource hints (like preconnect or preload) whenever possible to indicate to the browser which files are more critical for your application.
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
controlling for environmental variables is helpful in understanding where performance bottlenecks have been occurring and identifying the source of any performance issues.
...if you do want to roll your own monitoring system, take a look at the performance apis, mainly performancenavigationtiming and performanceresourcetiming, but also performancemark, performancemeasure, and performancepainttiming.
Introduction to progressive web apps - Progressive web apps (PWAs)
an example application in this series of articles we will examine the source code of a super simple website that lists information about games submitted to the a-frame category in the js13kgames 2017 competition.
... you can see this app in action online, and the source code is available on github.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
this demo consists of three files: index.js, which contains the source code of our app server.js, which contains the server part (written in node.js) service-worker.js, which contains the service worker-specific code.
... feel free to explore the rest of the examples in the service worker cookbook if you want to know how they are handled — the full source code is available on github.
color-profile - SVG: Scalable Vector Graphics
srgb the source profile is assumed to be srgb.
... <iri> an iri reference to the source color profile.
lighting-color - SVG: Scalable Vector Graphics
the lighting-color attribute defines the color of the light source for lighting filter primitives.
... two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="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); transf...
pointsAtX - SVG: Scalable Vector Graphics
the pointsatx attribute represents the x location in the coordinate system established by attribute primitiveunits on the <filter> element of the point at which the light source is pointing.
... only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <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 val...
pointsAtY - SVG: Scalable Vector Graphics
the pointsaty attribute represents the y location in the coordinate system established by attribute primitiveunits on the <filter> element of the point at which the light source is pointing.
... only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <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 val...
pointsAtZ - SVG: Scalable Vector Graphics
the pointsatz attribute represents the y location in the coordinate system established by attribute primitiveunits on the <filter> element of the point at which the light source is pointing, assuming that, in the initial local coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.
... only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <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 ...
requiredFeatures - SVG: Scalable Vector Graphics
w3.org/tr/svg11/feature#cursor the browser supports the <cursor> element http://www.w3.org/tr/svg11/feature#hyperlinking the browser supports the <a> element http://www.w3.org/tr/svg11/feature#xlinkattribute the browser supports the xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show and xlink:actuate attributes http://www.w3.org/tr/svg11/feature#externalresourcesrequired the browser supports the externalresourcesrequired attribute http://www.w3.org/tr/svg11/feature#view the browser supports the <view> element http://www.w3.org/tr/svg11/feature#script the browser supports the <script> element http://www.w3.org/tr/svg11/feature#animation the browser supports the <animate>, <set>, <animatemotion>, <animatetransform>, <animatecolor> and ...
...sting : http://www.w3.org/tr/svg11/feature#xlinkattribute --> <rect class="ko" x="10" y="960" height="25" width="430" /> <rect class="ok" x="10" y="960" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#xlinkattribute" /> <text x="20" y="977">http://www.w3.org/tr/svg11/feature#xlinkattribute</text> <!-- testing : http://www.w3.org/tr/svg11/feature#externalresourcesrequired --> <rect class="ko" x="10" y="985" height="25" width="430" /> <rect class="ok" x="10" y="985" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#externalresourcesrequired" /> <text x="20" y="1002">http://www.w3.org/tr/svg11/feature#externalresourcesrequired</text> <!-- testing : http://www.w3.org/tr/svg11/feature#view --> <rect class="ko" x="10" y...
scale - SVG: Scalable Vector Graphics
WebSVGAttributescale
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 480 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100"...
... when the value of this attribute is 0, this operation has no effect on the source image.
x - SVG: Scalable Vector Graphics
WebSVGAttributex
value <length> | <percentage> default value 0% animatable yes fepointlight for <fepointlight>, x defines the x location for the light source in the coordinate system defined by the primitiveunits attribute on the <filter> element.
... value <length> | <percentage> default value 0% animatable yes fespotlight for <fespotlight>, x defines the x location for the light source in the coordinate system defined by the primitiveunits attribute on the <filter> element.
xlink:arcrole - SVG: Scalable Vector Graphics
this contextual role can differ from the meaning of the resource when taken outside the context of this particular arc.
... for example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended property.
y - SVG: Scalable Vector Graphics
WebSVGAttributey
value <length> | <percentage> default value 0% animatable yes fepointlight for <fepointlight>, y defines the y location for the light source in the coordinate system defined by the primitiveunits attribute on the <filter> element.
... value <length> | <percentage> default value 0% animatable yes fespotlight for <fespotlight>, y defines the y location for the light source in the coordinate system defined by the primitiveunits attribute on the <filter> element.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang hori...
... x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage.
<feBlend> - SVG: Scalable Vector Graphics
WebSVGElementfeBlend
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <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 specif...
... working draft outsourced blend modes to compositing and blending level 1 scalable vector graphics (svg) 1.1 (second edition)the definition of '<feblend>' in that specification.
<feDistantLight> - SVG: Scalable Vector Graphics
the <fedistantlight> filter primitive defines a distant light source that can be used within a lighting filter primitive: <fediffuselighting> or <fespecularlighting>.
... usage context categorieslight source elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes specific attributes azimuth elevation dom interface this element implements the svgfedistantlightelement interface.
<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 i...
...n="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.
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
svg files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive.
... usage context categoriesgraphics element, graphics referencing elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin.
<metadata> - SVG: Scalable Vector Graphics
WebSVGElementmetadata
example <svg width="400" viewbox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#computera"/> </rdf:description> <rdf:description about="#cableb"> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#computerb"/> </rdf:description> <rdf:description about="#cablen"> <connect:ends rdf:resource="#socket5"/> <connect:ends>everything</connect:ends> </rdf:...
...description> <rdf:description about="#hub"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket5"/> </rdf:description> </rdf:rdf> </metadata> <title>network</title> <desc>an example of a computer network based on a hub.</desc> <style> svg { /* default styles to be inherited */ fill: white; stroke: black; } text { fill: black; stroke: none; } path { fill: none; } </style> <!-- define symbols used in the svg --> <defs> <!-- hubplug symbol.
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.
Securing your site - Web security
http access control the cross-origin resource sharing standard provides a way to specify what content may be loaded from other domains.
... you can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.
Tutorials
whether you are just starting out, learning the basics, or are an old hand at web development, you can find helpful resources here for best practices.
... these resources are created by forward-thinking companies and web developers who have embraced open standards and best practices for web development and that provide or allow translations, through an open content license such as creative commons.
Axes - XPath
WebXPathAxes
following-sibling indicates all the nodes that have the same parent as the context node and appear after the context node in the source document.
... preceding-sibling indicates all the nodes that have the same parent as the context node and appear before the context node in the source document.
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementnumber
optional attributes count specifies what in the source tree should be numbered sequentially.
... level defines how levels of the source tree should be considered in generating sequential numbers.
<xsl:strip-space> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:strip-space> element defines the elements in the source document for which whitespace should be removed.
... syntax <xsl:strip-space elements=list-of-element-names /> required attributes elements specifies a space-separated list of elements in the source whose whitespace-only text nodes should be removed.
Compiling a New C/C++ Module to WebAssembly - WebAssembly
at this point in your source directory you should have: the binary wasm module code (hello.wasm) a javascript file containing glue code to translate between the native c functions, and javascript/wasm (hello.js) an html file to load, compile, and instantiate your wasm code, and display its output in the browser (hello.html) running your example now all that remains is for you to load the resulting hello.html in a bro...
...e to handle memory allocation, memory leaks, and a host of other problems calling a custom function defined in c if you have a function defined in your c code that you want to call as needed from javascript, you can do this using the emscripten ccall() function, and the emscripten_keepalive declaration (which adds your functions to the exported functions list (see why do functions in my c/c++ source code vanish when i compile to javascript, and/or i get no functions to process?)).
Loading and running WebAssembly code - WebAssembly
this is analogous to new function(string), except that we are substituting a string of characters (javascript source code) with an array buffer of bytes (webassembly source code).
... using fetch fetch is a convenient, modern api for fetching network resources.
Using the WebAssembly JavaScript API - WebAssembly
create a <script></script> element in your html file, and add the following code to it: var importobject = { imports: { imported_func: arg => console.log(arg) } }; streaming the webassembly module new in firefox 58 is the ability to compile and instantiate webassembly modules directly from underlying sources.
...al } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", instance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
Compiling an Existing C Module to WebAssembly - WebAssembly
the source for the webp codec is written in c and available on github as well as some extensive api documentation.
... $ git clone https://github.com/webmproject/libwebp to start off simple, expose webpgetencoderversion() from encode.h to javascript by writing a c file called webp.c: #include "emscripten.h" #include "src/webp/encode.h" emscripten_keepalive int version() { return webpgetencoderversion(); } this is a good simple program to test whether you can get the source code of libwebp to compile, as it doesn't require any parameters or complex data structures to invoke this function.
Content Scripts - Archive of obsolete content
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.
Getting Started - Archive of obsolete content
this page is now maintained alongside the sdk code itself: https://github.com/mozilla/gecko-dev/blob/master/addon-sdk/source/contributing.md.
XUL Migration Guide - Archive of obsolete content
my-addon/ chrome/ content/ locale/ skin/ chrome.manifest data/ lib/ package.json there are limitations on what you can do in this manifest file: for example, you can't register overlays, resource: uris, or components.
page-worker - Archive of obsolete content
we can call this "trusted" content, because unlike content loaded from a source outside the add-on, the add-on author knows exactly what it's doing.
panel - Archive of obsolete content
we can call this "trusted" content, because unlike content loaded from a source outside the add-on, the add-on author knows exactly what it's doing.
simple-storage - Archive of obsolete content
accessing storage from the console in the add-on debugger, you can access your add-on's simple-storage programmatically from the console using the following: loader.modules['resource://gre/modules/commonjs/sdk/simple-storage.js'].exports.storage clarification from mozilla needed: writing the above line in add-on debugger console results in "referenceerror: loader is not defined".
widget - Archive of obsolete content
we can call this "trusted" content, because unlike content loaded from a source outside the add-on, the add-on author knows exactly what it's doing.
console/plain-text - Archive of obsolete content
all of its methods are inherited from console.jsm (resource://gre/modules/devtools/console.jsm).
core/heritage - Archive of obsolete content
function takes arbitrary number of source objects and returns a fresh object that inherits from the same prototype as a first one and implements all own properties of all given objects.
core/promise - Archive of obsolete content
// extract sql query then(readdbasync); // exectue extracted query against db nested chaining flat chaining is not always an option though, as in some cases you may want to capture intermediate values of the chain: var result = readasync(url).then(function(source) { var json = parse(source); return readdbasync(extractquery(json)).then(function(data) { return writeasync(json.url, data); }); }); in general, nesting is useful for computing values from more than one promise: function eventualadd(a, b) { return a.then(function (a) { return b.then(function (b) { return a + b; }); }); } var c = eventualadd(aasync(), basync()); err...
event/target - Archive of obsolete content
methods initialize() method initializes this event source.
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.
system/child_process - Archive of obsolete content
const { emit } = require('sdk/event/core'); const { spawn } = require('sdk/system/child_process'); var proc = spawn("/bin/cat"); emit(proc.stdin, 'data', "hello from add-on code"); emit(proc.stdin, 'end'); using child_process in non-jpm extensions // import sdk stuff const commonjs_uri = 'resource://gre/modules/commonjs'; const { require } = cu.import(commonjs_uri + '/toolkit/require.js', {}); var child_process = require('sdk/system/child_process'); // use it in the same way as in the example above ...
util/array - Archive of obsolete content
let { unique } = require('sdk/util/array'); let a = [1, 1, 1, 1, 3, 4, 7, 7, 10, 10, 10, 10]; let b = unique(a); console.log(a); // [1, 1, 1, 1, 3, 4, 7, 7, 10, 10, 10, 10]; console.log(b); // [1, 3, 4, 7, 10]; parameters array : array source array.
jpm - Archive of obsolete content
jpm usage is: jpm [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm.
package.json - Archive of obsolete content
resource://@your-addon-name/data/your-icon-name.png this value will be used as the add-on's em:iconurl element in its install.rdf.
Unit Testing - Archive of obsolete content
now create a new file called "base64.js", and give it the following contents: const { atob, btoa } = require("resource://gre/modules/services.jsm"); exports.atob = a => atob(a); exports.btoa = b => btoa(b); this code exports two functions, which just call the platform's btoa() and atob() functions.
Using XPCOM without chrome - Archive of obsolete content
// this removes the need to import ci and the xpcomutils const { class } = require("sdk/core/heritage"); const { unknown } = require('sdk/platform/xpcom'); const { placesutils } = require("resource://gre/modules/placesutils.jsm"); let bmlistener = class({ extends: unknown, interfaces: [ "nsinavbookmarkobserver" ], //this event most often handles all events onitemchanged: function(bid, prop, an, nv, lm, type, parentid, aguid, aparentguid) { console.log("onitemchanged", "bid: "+bid, "property: "+prop, "isanno: "+an, "new value: "+nv, "lastmod: "+lm, "type: "+type, "parentid:"+parentid,...
Drag & Drop - Archive of obsolete content
ssion.candrop = true; } function _dragdrop(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-service;1'].getservice(components.interfaces.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 (va...
JS XPCOM - Archive of obsolete content
components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/xpcomutils.jsm"); const cc = components.classes; const ci = components.interfaces; function abouthandler() {} abouthandler.prototype = { newchannel: function(uri) { var channel = services.io.newchannel("chrome://mystuff/content/mystuff.xul", null, null); channel.originaluri = uri; return cha...
JavaScript Debugger Service - Archive of obsolete content
learning more a quick and dirty introduction by lei venkman javascript debugger source code firebug service source code jsd architecture (old) ...
Tree - Archive of obsolete content
iew.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v); } other resources xul: tree documentation xul tutorial: tree selection ...
Custom about: URLs - Archive of obsolete content
const {classes: cc, interfaces: ci, manager: cm, results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); // globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132730-2278-11e5-867f-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word = 'myaboutpage' const aboutpage_uri = 'data:text/html,hi this is the page that is shown when navigate to about:myaboutpage'; // c...
Deploying a Plugin as an Extension - Archive of obsolete content
if your plugin is for windows, don't forget add to version resources to your plugin's dll.
Displaying web content in an extension without security issues - Archive of obsolete content
note: this has really nothing to do with the source of the document.
Extension Etiquette - Archive of obsolete content
chrome: or resource: packages, which are often defined in chrome.manifest files.
Inline options - Archive of obsolete content
see mxr for what all this holds: http://mxr.mozilla.org/mozilla-release/source/toolkit/mozapps/extensions/content/setting.xml for example you can fire this.inputchanged() etc etc.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
in order to use this interface in your code, you will need to get the idl files from the source (via cvs, from a tarball, or using lxr).
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
for more information on these technologies, please refer to other sources.
Appendix A: Add-on Performance - Archive of obsolete content
look at the source samples in the article and notice how they mostly consist of nested if statements.
Introduction - Archive of obsolete content
firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.
The Box Model - Archive of obsolete content
if you're not familiar with css, you should read this css getting started guide and other online resources before continuing with this tutorial.
Useful Mozilla Community Sites - Archive of obsolete content
it offers many necessary services such as bug tracking, source code repositories, download mirrors and many communication tools.
XUL School Tutorial - Archive of obsolete content
its contents have been modified from the original source as necessary.
Overlay extensions - Archive of obsolete content
more resources setting up your environment setting up the application for extension development.
Extensions support in SeaMonkey 2 - Archive of obsolete content
some important menu ids are listed below, menu ids are based on firefox 3 source code: menu id in firefox menu id in seamonkey 1.x and 2.0 seamonkey 2.1 overlays menu_filepopup menu_filepopup menu_filepopup file menu popup menu_editpopup menu_edit_popup menu_editpopup edit menu popup menu_viewpopup menu_view_popup menu_view_popup view menu popup ...
Signing an extension - Archive of obsolete content
id" \ -p $mypassword \ -x -z ~/desktop/myextension/dest/myextension-1.0.xpi \ ~/desktop/myextension/source unset mypassword then a signed xpi file will be generated.
Updating addons broken by private browsing changes - Archive of obsolete content
saveurl: takes a new required document argument indicating the source of the url being saved.
Using Dependent Libraries In Extension Components - Archive of obsolete content
nsgetmoduleproc getmoduleproc = (nsgetmoduleproc)lookupsymbol(componentlib, "_nsgetmodule"); if (!getmoduleproc) return ns_error_failure; return getmoduleproc(acompmgr, alocation, aresult); } // convienience method grabbed from // http://mxr.mozilla.org/mozilla-central/source/xpcom/glue/standalone/nsgluelinkingosx.cpp .
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
do you have the resources to invest in making some significant changes up front which can save time and money in the long run?
Beginner tutorials - Archive of obsolete content
creating reusable content with css and xblthis page illustrates how you can use css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.underscores in class and id namessummary: the use of the underscore character in css can lead to major display problems in multiple browsers.
CSS3 - Archive of obsolete content
support for the use of an <image> as the border with the css border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.
Case Sensitivity in class and id Names - Archive of obsolete content
the most common case is where the name uses different case in the document source than is found in the css or javascript.
MozOrientation - Archive of obsolete content
to normalize between the two you can do something like this: function orientationhandler(evt){ // for ff3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / math.pi)); evt.beta = -(evt.y * (180 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the events arrive.
cached - Archive of obsolete content
the cached event is fired when the resources listed in the application cache manifest have been downloaded, and the application is now cached.
downloading - Archive of obsolete content
the downloading event is fired after checking for an application cache update, if the user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
progress - Archive of obsolete content
the progress event is fired when the user agent is downloading resources listed by the manifest.
updateready - Archive of obsolete content
the updateready event is fired when the resources listed in the application cache manifest have been newly redownloaded, and the script can use swapcache() to switch to the new cache.
Getting the page URL in NPAPI plugin - Archive of obsolete content
tradeoffs: uses npapi only works in most browsers does not work in mozillas older than firefox 1.0 via npp_newstream from braden mcdaniel: if you want the uri of the resource for which the plug-in is invoked, the most npapi-friendly way to do that is to get it from the npstream that is passed to npp_newstream.
MMgc - Archive of obsolete content
alternately, you can open the mmgc namespace in your c++ source so that you can refer to the objects more concisely: using namespace mmgc; ...
Defining Cross-Browser Tooltips - Archive of obsolete content
bug 25537#c73, which is to run a proxy server that rewrites html source on the fly, as it is sent to the user.
No Proxy For configuration - Archive of obsolete content
non-fqdn (e.g., http://web/) bug 201685 - no proxy for: support ipv6 address literals bug 136789 - proxy: no proxy ip entries do not block dns resolved ips bug 314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72444 - proxy: "bypass proxy server for local addresses" (ie pref) bug 260883 - "no proxy for" does not use fqdn wildcards "*" like ie bugzilla sources bug 17158 comment 21: the correct separator are spaces or commas.
Using content preferences - Archive of obsolete content
see also nsicontentprefservice nsicontentprefobserver tosource() (potentially useful for serializing objects for later use with eval()) ...
Working with BFCache - Archive of obsolete content
a: in the non-bfcache case, the page is reloaded in the sense of reparsing from the original html source.
Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
as an example, consider the following failed assertion: assertion: no document: 'mdocument != nsnull', file d:/cvs-1.11.4/mozilla/content/xul/content/src/nsxulelement.cpp, line 3173 (note that i have my source tree in d:/cvs-1.11.4/mozilla) if you have a dword in hkcu\software\mozilla.org\windbgdlg\ named "d:/cvs-1.11.5/mozilla/content/xul/content/src/nsxulelement.cpp," (with the comma - matches are whole-word only) and value 0x5, the assert would automatically be ignored.
Bookmark Keywords - Archive of obsolete content
in addition to being handy pointers to useful resources, bookmarks in mozilla can be used to make the address bar itself a power tool.
Structure of an installable bundle - Archive of obsolete content
additional resources (such as chrome:// or resource:// providers can be registered in the chrome.manifest) application-specific /searchplugins/*.src sherlock search plugins firefox 1.5 and greater.
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
again note that the resulting dll filename must start with "np", so either call your project like this or rename the file later delete the .cpp and .h and readme files from the project and disk (if you did not create an empty project) copy the npruntime sample plugin source code into the dir of the new vs project and add the files to the project using the vs gui (.cpp files to "source files", .h files to "header files", .rc file to "resource files").
Tinderbox - Archive of obsolete content
tinderbox is a web tool for tracking the status of the mozilla source code.
Creating a hybrid CD - Archive of obsolete content
raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw '8bim' 'tiff' "photoshop tiff image" .doc raw 'mswd' 'wdbn' "word file" .mov raw 'tvod' 'moov' "quicktime movie" .bin raw 'sitx' 'bina' "mac binary" .h ascii 'cwie' 'text' "c/c++ header file" .c ascii 'cwie' 'text' "c source file" .cp ascii 'cwie' 'text' "c++ source file" .cpp ascii 'cwie' 'text' "c++ source file" .exp ascii 'cwie' 'text' "symbol export file" .mcp raw 'cwie' 'mmpr' "codewarrior project file" .r ascii 'mps ' 'text' "rez file" .html ascii 'moss' 'text' "html file" .htm ascii 'moss' 'text' "html file" .txt ascii 'moss...
In-Depth - Archive of obsolete content
a bunch of 20px x 20px icons in a grid format above is the source image of some icons setup to use the -moz-image-region style.
Links - Archive of obsolete content
some other skin related resources: learning css zvon.org the world wide web consortium ...
Dehydra Function Reference - Archive of obsolete content
decl is a variable type input_end() called once at the end of the c++ source file before the compiler quits.
Dehydra Object Reference - Archive of obsolete content
common properties property type description .loc location object source location of a type or declaration.
Dehydra - Archive of obsolete content
it was also useful to find bugs in source code as it allows for much more error checking than c++ is capable of by itself.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
you can use the value of a cell, or some resource from an rdf file if the tree is built from a template, as the value of a drag.
Drag and drop events - Archive of obsolete content
you can see an example of these events in action here: view source view example see also ^: drag and drop html 5 working draft: drag and drop nsidragservice ...
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
the code has been removed from the mozilla source tree.
Extension Frequently Asked Questions - Archive of obsolete content
please see extensions:other resources and extensions:community.
JSS build instructions for OSX 10.6 - Archive of obsolete content
ozilla.org/jss_build_4.3.html ftp://ftp.mozilla.org/pub/mozilla.org/ <componente> /releases http://www.mozilla.org/projects/secu...using_jss.html steps: export all this: build_opt="1" cvsroot=":pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot" java_home=$(/usr/libexec/java_home") no_mdupdate="1" nsdistmode="copy" ns_use_gcc="1" create working dir: mkdir nss-jss cd nss-jss obtain source: altought manual said nspr_4_6_4_rtm, nss_3_11_4_rtm, jss_4_2_5_rtm, they didnt work for osx, giving many compiling errors.
Style System Overview - Archive of obsolete content
1 matching rule: use value 2+ matching rules: cascade decides which wins: sort by origin (ua, user, author) & weight (!important), then specificity of selector, then order example document source <doc> <title>a few quotes</title> <para class="emph"> franklin said that <quote>"a penny saved is a penny earned."</quote> </para> <para> fdr said <quote>"we have nothing to fear but <span class="emph">fear itself.</span>"</quote> </para> </doc> example document tree doc ↙ ↓ ↘ title pa...
Using microformats - Archive of obsolete content
to use the api, you need to first load the object: components.utils.import("resource://gre/modules/microformats.js"); once you've loaded the microformats api, you can manage microformats using the methods listed here; for information about parsing microformats, see parsing microformats in javascript.
Firefox Sync - Archive of obsolete content
these include: an http api for client-server interaction storage formats used by the the clients cryptographic model for encrypting client data the definitive source for these specifications is http://docs.services.mozilla.com/.
Gecko Coding Help Wanted - Archive of obsolete content
take a look through lxr, and you'll realize that mozilla's source code is a big place.
Help Viewer - Archive of obsolete content
help viewer project page articles & tutorials creating a help content pack task-oriented, as opposed to spec-type stuff like the link below will be other resources content pack specification a technical description of it, meant primarily to solidify the idea of exactly what constitutes a content pack ...
Java in Firefox Extensions - Archive of obsolete content
[note: a simpler hello world version than that below is now available 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...
statusBar - Archive of obsolete content
you can find the complete sourcecode in the status-bar-panel.js file in your jetpack repository.
Jetpack - Archive of obsolete content
get started visit the getting started tutorial download the add-on sdk (formerly called the jetpack sdk) documentation check out the documentation, including tutorials, examples, guides, and api reference join the jetpack community follow jetpack on the mozilla add-ons blog report a bug check out the open bugs discuss jetpack grab the source code join us in #jetpack on irc.mozilla.org ...
Makefile.mozextension.2 - Archive of obsolete content
which is why the code shown below is corrupt - so you may wanna click on edit and view source instead !!
Metro browser chrome tests - Archive of obsolete content
as with mochitest, the path given as an argument is the path to a test file within the mozilla source tree.
Mozilla Application Framework - Archive of obsolete content
flexible licensing with three licenses to choose from (mpl, lgpl, and gpl) so you can develop both open source and proprietary applications and combine the mozilla framework with other libraries.
How to Write and Land Nanojit Patches - Archive of obsolete content
the first version of this document was written just after that merge occurred.) resources nanojit development now takes place on a single shared repository nanojit-central.
Plug-n-Hack Phase1 - Archive of obsolete content
security tool commands manifest an example commands manifest (for owasp zap) is: https://code.google.com/p/zap-extensions/source/browse/branches/beta/src/org/zaproxy/zap/extension/plugnhack/resource/service.json firefox ui in firefox the tool commands will be made available via the developer toolbar (gcli) https://developer.mozilla.org/docs/tools/gcli a example of how the zap commands are currently displayed is: note that user specified parameters can be specified for commands, which can either be free text, a static pull...
Bundles - Archive of obsolete content
the bundle can hold additional resources currently limited to: application ini settings application icon script for the application chrome, not the web content installing a bundle when prism opens a webapp bundle it will unpack it into the webapps/{webapp-id} folder.
Prism - Archive of obsolete content
community blog posts prism forum #prism on irc.mozilla.org goodies bundle library contributing source code in svn bugzilla (for bugs and suggestions) open bugs, enter new bug build documentation related topics xulrunner ...
PyDOM - Archive of obsolete content
almost python code can not be secured - so it will only run from trusted sources.
Same origin policy for XBL - Archive of obsolete content
determining the originating principal the principal originating the load is determined using the following steps: for external stylesheets (<link>, <?xml-stylesheet?>, user sheets, and ua sheets), it depends on where the sheet is loaded from, just like it would for an html document loaded from a similar source.
SpiderMonkey coding conventions - Archive of obsolete content
use the spidermonkey c++ coding style page on wikimo which is more up to date and the canonical source.
File object - Archive of obsolete content
file is non-standard, not generally compiled into distributions, is a potential source of huge security holes, and not well tested.
Standalone XPCOM - Archive of obsolete content
building standalone xpcom here are the instructions for building the standalone xpcom on unix or windows: step 1 : pull the sources cvs -z 3 co mozilla/client.mk cd mozilla gmake -f client.mk pull_all build_modules=xpcom step 2 : build xpcom standalone ./configure --enable-standalone-modules=xpcom --enable-application=standalone gmake testing standalone xpcom xpcom/sample contains a sample application and a component.
Standard Makefile Header - Archive of obsolete content
this header sets variables which tell the makefile where it is and where the source directory is, and then include autoconf.mk, to pick up makefile variables which are set during configuration.
Abc Assembler Tests - Archive of obsolete content
* * the original code is [open source virtual machine.].
Tamarin Acceptance Test Template - Archive of obsolete content
* * the original code is [open source virtual machine.].
Tamarin Build System Documentation - Archive of obsolete content
the compile phase compiles all of the tamarin source code and builds all of the shell executables, any errors will stop the phase and a red box will appear on the slave where the error occurred.
Tamarin Releases - Archive of obsolete content
this page tracks tamarin source code releases, past, present and future.
The Download Manager schema - Archive of obsolete content
source text the source uri for the download.
The life of an HTML HTTP request - Archive of obsolete content
the channel represents the connection to the server, and is the source of the html data stream.
TraceVis - Archive of obsolete content
building with tracevis these are the steps to build a js shell with tracevis, starting from a mozilla source directory.
Using cross commit - Archive of obsolete content
if you don't, however, then from the parent directory of your source dir, do: cvs co mozilla/tools/cross-commit note that you will need to have $cvsroot and such set up correctly for this to work.
Video presentations - Archive of obsolete content
(as quicktime; 122 mb and 110 mb) release builds - from source tree to exe (part 1, part 2) learn how release builds of firefox are created.
XBL 1.0 Reference - Archive of obsolete content
bindings binding content children implementation constructor destructor field property getter setter method parameter body handlers handler resources stylesheet image binding attachment and detachment attachment using css attachment using element.style property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points ...
XBL - Archive of obsolete content
custom xul elements with xbl from the xul school tutorial for add-on developers xbl chapter of "rapid application development with mozilla" xbl 2.0 primer (draft) xbl 2.0 cross-browser implementation in javascript more xbl resources...
XML in Mozilla - Archive of obsolete content
for pointing into resources in xml documents mozilla also supports fixptr, a simplified, non-compatible version of xpointer.
Mac stub installer - Archive of obsolete content
the mac stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...ll/wizard/mac/> the mac stub installer source code resides at: <http://lxr.mozilla.org/seamonkey/sou...izard/mac/src/> how do we get setup to debug the mac installer?
Install Wizards (aka: Stub Installers) - Archive of obsolete content
the xpinstall engine source resides at: <http://lxr.mozilla.org/seamonkey/sou...xpinstall/src/> what do we mean by stub installer?
copy - Archive of obsolete content
method of file object syntax int copy( filespecobject source, filespecobject dest ) parameters the copy method has the following parameters: source a filespecobject object reprsenting the file to be copied.
modDate - Archive of obsolete content
example f = getfolder("program"); filesource = getfolder(f, "myfile.txt"); err = file.moddate(filesource); see moddatechanged for an example of comparing the dates of two files.
execute - Archive of obsolete content
method of install object syntax int execute ( string xpisourcepath [, boolean blocking]); int execute ( string xpisourcepath, string args [, boolean blocking]); parameters the execute method has the following parameters: xpisourcepath the pathname of the file to extract and execute.
Methods - Archive of obsolete content
loadresources returns an object whose properties are localized strings loaded from the specified property file.
WinRegValue - Archive of obsolete content
winregvalue.reg_sz = 1 winregvalue.reg_expand_sz = 2 winregvalue.reg_binary = 3 winregvalue.reg_dword = 4 winregvalue.reg_dword_little_endian = 4 winregvalue.reg_dword_big_endian = 5 winregvalue.reg_link = 6 winregvalue.reg_multi_sz = 7 winregvalue.reg_resource_list = 8 winregvalue.reg_full_resource_descriptor = 9 winregvalue.reg_resource_requirements_list = 10 regdata a java byte array containing the data.
XPInstall API reference - Archive of obsolete content
objects install properties methods adddirectory addfile alert cancelinstall confirm deleteregisteredfile execute gestalt getcomponentfolder getfolder getlasterror getwinprofile getwinregistry initinstall loadresources logcomment patch performinstall refreshplugins registerchrome reseterror setpackagefolder installtrigger no properties methods compareversion enabled getversion install installchrome startsoftwareupdate installversion properties methods ...
Installer Script - Archive of obsolete content
"bin", // jar source folder 29.
XTech 2006 Presentations - Archive of obsolete content
to help migration an open source js2-to-js compiler is being developed, making js2 a reality in 2006.
object - Archive of obsolete content
it can be a variable reference, an rdf resource uri, or an rdf literal value.
oncommand - Archive of obsolete content
example 1: in-line code <button label="click me" oncommand="alert('hi')"/> example 2: function with source argument <button label="click me" oncommand="dosomeprocessing(event.target)"/> and here is the definition of the function: function dosomeprocessing(source) { alert("source: " + source); return true; } see also command element ...
ref - Archive of obsolete content
ArchiveMozillaXULAttributeref
this attribute should be placed alongside the datasources attribute.
sortDirection - Archive of obsolete content
use the sortresource attribute to specify the sort key.
subject - Archive of obsolete content
it can be a variable reference or an rdf resource uri.
template - Archive of obsolete content
« xul reference home template type: id for template generated elements, this attribute may optionally be placed on the root node (the element with the datasources attribute) to refer to a template that exists elsewhere in the xul code.
uri - Archive of obsolete content
ArchiveMozillaXULAttributeuri
elements that appear inside the element with the attribute will be repeated for each node in the rdf datasource.
windowtype - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows ...
command - Archive of obsolete content
ArchiveMozillaXULEventscommand
sourceevent read only event the activation event that caused this command event to be generated.
findbar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width browser type: browser element lets you set and get the browser in which the findbar is located.
Menus - Archive of obsolete content
undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete deletes selection editable text context-selectall selects all context-searchselect selected text is searched context-viewpartialsource-selection views the selection source selection context-viewpartialsource-mathml views the mathml source mathml context-viewsource views the source context-viewinfo views the page info context-metadata views the properties context-spell-check-enabled spell check enabled checkbox context-inspect ins...
Namespaces - Archive of obsolete content
this is a source of perennial confusion for xml namespaces.
builderView - Archive of obsolete content
the builder provides access to the rdf resources for each row in the tree, and allows sorting the data by column.
container - Archive of obsolete content
if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match.
object - Archive of obsolete content
it can be a variable reference, an rdf resource uri, or an rdf literal value.
ref - Archive of obsolete content
ArchiveMozillaXULPropertyref
« xul reference ref type: uri of an rdf resource gets and sets the value of the ref attribute.
subject - Archive of obsolete content
it can be a variable reference or an rdf resource uri.
Providing Command-Line Options - Archive of obsolete content
component {2991c315-b871-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b871-42cd-b33f-bfee4fcbf682} category command-line-handler m-myapp @mozilla.org/commandlinehandler/general-startup;1?type=myapp the javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); components.utils.import("resource://gre/modules/services.jsm"); // changeme: to the chrome uri of your extension or application const chrome_uri = "chrome://myapp/content/"; /** * utility functions */ /** * opens a chrome window.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
the code looks like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <seq about="urn:mozilla:skin:root"> <li resource="urn:mozilla:skin:classic/1.0"/> </seq> <description about="urn:mozilla:skin:classic/1.0"> <chrome:packages> <seq about="urn:mozilla:skin:classic/1.0:packages"> <li resource="urn:mozilla:skin:classic/1.0:myextension"/> </seq> </chrome:packages> </description> <seq about="urn:mozilla:stylesheets"> <li resource="chrome://global/content/customizetoolbar.xul"/> </seq> <seq about="chrome://global/cont...
Tree Widget Changes - Archive of obsolete content
example: treechildren::-moz-tree-separator { margin-top: 1px; border-top: 1px solid threedshadow; border-left: 1px solid threedshadow; border-right: 1px solid threedhighlight; border-bottom: 1px solid threedhighlight; height: 2px; } original document information author: neil deakin source: here ...
Accesskey display rules - Archive of obsolete content
don't include accesskey text in labels xul applications should use dtd for localizable ui resource.
Adding Buttons - Archive of obsolete content
some examples of buttons example 1 : source view <button label="normal"/> <button label="disabled" disabled="true"/> the examples above will generate the buttons in the image.
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
the following alternate syntax can be used when the code in a handler is more complex: <binding id="binding-name"> <handlers> <handler event="event-name"> -- handler code goes here -- </handler> </handlers> </binding> handlers example the following example adds some key handlers to create a very primitive local clipboard: example 1 : source <binding id="clipbox"> <content> <xul:textbox/> </content> <implementation> <field name="clipboard"/> </implementation> <handlers> <handler event="keypress" key="x" modifiers="control" action="this.clipboard=document.getanonymousnodes(this)[0].value; document.getanonymousnodes(this)[0].value='';"/> <handler event="keypress" key="c" modifiers="control" action=...
Adding more elements - Archive of obsolete content
find files example so far source view next, we will look at how to create stacks.
Anonymous Content - Archive of obsolete content
for example, the following xbl will cause text labels and buttons to appear in a different location than other elements: source <binding id="navbox"> <content> <xul:vbox> <xul:label value="labels and buttons"/> <children includes="label|button"/> </xul:vbox> <xul:vbox> <xul:label value="other elements"/> <children/> </xul:vbox> </content> </binding> the first children element only grabs the label and button elements, as indicated by its includes attribute.
Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); ...
Creating a Skin - Archive of obsolete content
our find files example with this skin: source view stylesheet see also mozilla css extensions css reference the next section discusses how to make a xul application localizable.
Creating a Window - Archive of obsolete content
(usually the browser window.) for example, we could open the find files dialog with either of the following: mozilla -chrome chrome://findfile/content/findfile.xul mozilla -chrome resource:/chrome/findfile/content/findfile.xul if you run this command from a command-line (assuming you have one on your platform), the find files dialog will open by default instead of the mozilla browser window.
Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <m...
Custom Tree Views - Archive of obsolete content
example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else ret...
Install Scripts - Archive of obsolete content
the final script for installing the find files component is shown below: source initinstall("find files","/xulplanet/find files","0.5.0.0"); finddir = getfolder("chrome","findfile"); setpackagefolder(finddir); adddirectory("findfile"); registerchrome(install.content | install.delayed_chrome, getfolder(finddir, "content")); registerchrome(install.skin | install.delayed_chrome, getfolder(finddir, "skin")); registerchrome(install.locale | install.delayed_chrome, getfolder(...
More Wizards - Archive of obsolete content
wizard example source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="check...
Persistent Data - Archive of obsolete content
find files example so far : source view next, we'll look at using style sheets with xul files.
Progress Meters - Archive of obsolete content
source view in the next section, we will learn how to add additional elements to the window using html.
Scrolling Menus - Archive of obsolete content
example - scrolling list of buttons the following example shows how to create a scrolling list of buttons (you will need to resize the window to see the arrow buttons): example 1 : source view <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> if you try t...
Simple Menu Bars - Archive of obsolete content
example of a simple menu bar example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> ...
Stack Positioning - Archive of obsolete content
example 1 : source view <stack> <button label="goblins" left="5" top="5"/> <button label="trolls" left="60" top="20"/> <button label="vampires" left="10" top="60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes.
Styling a Tree - Archive of obsolete content
however, you will often set the properties based on values in the datasource.
Using Spacers - Archive of obsolete content
find files example so far source view next, we will learn some additional features of buttons.
XBL Inheritance - Archive of obsolete content
example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
XUL Tutorial - Archive of obsolete content
ection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates trees and templates rdf datasources advanced rules persistent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl xb...
Using nsIXULAppInfo - Archive of obsolete content
cu.import("resource://testing-common/appinfo.jsm"); updateappinfo(); older versions as stated above, older mozilla 1.7-based applications do not support nsixulappinfo.
XUL accessibility tool - Archive of obsolete content
(aaronandy) highlight or blink source element in original xul app upon click of referencing line in report.
commandset - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
dialogheader - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
image - Archive of obsolete content
ArchiveMozillaXULimage
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
key - Archive of obsolete content
ArchiveMozillaXULkey
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
listcell - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
menubar - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
menuitem - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
menupopup - Archive of obsolete content
<menulist> <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> the following example shows how a menupopup can be used as a context menu for an element.
notificationbox - Archive of obsolete content
rrentnotification, allnotifications, notificationshidden methods appendnotification, getnotificationwithvalue, removeallnotifications, removecurrentnotification, removenotification, removetransientnotifications, attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
param - Archive of obsolete content
ArchiveMozillaXULparam
type type: one of the values below the type of the parameter's value integer 32 bit integer int64 64 bit integer double double-precision floating-point number string string literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
scrollbar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
splitter - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
<statusbarpanel> - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, get...
tabpanels - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
toolbox - Archive of obsolete content
oolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
window - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ...
wizard - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties canadvance type: boolean this property is set to true if the user can press the next button to go to the next page.
wizardpage - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent...
XUL - Archive of obsolete content
template guide a detailed guide on xul templates, which is a means of generating content from a datasource.
Custom app bundles for Mac OS X - Archive of obsolete content
imilar to this basic directory structure: example.app/ contents/ info.plist (application bundle properties are specified in this xml file.) pkginfo (this is a simple text file and is created along with the info.plist file) macos/ (the macos folder will contain your xulrunner executable) xulrunner (this is the xulrunner stub) resources/ (this is where you place your xul application code and support files) application.ini (xulrunner-related application settings) example.icns (this is the icon which will be used by your application bundle) chrome/ content/ example.xul (this directory contains your application's chrome) examp...
XULRunner FAQ - Archive of obsolete content
where is the source code?
Using LDAP XPCOM with XULRunner - Archive of obsolete content
create a subdirectory extensions/ldapstub in the mozilla source code directory, containing two files, makefile.in and ldapstubloader.cpp: makefile.in: # copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> depth = ../..
Make your xulrunner app match the system locale - Archive of obsolete content
the first step is to get the code we're about to write to run before any of the locale specific resources are loaded.
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 ...
XUL Application Packaging - Archive of obsolete content
a sample application.ini file can be found in the mozilla source tree.
XULRunner - Archive of obsolete content
build documentation learn how to get the source and build it.
XUL Explorer - Archive of obsolete content
installs latest version: install (windows): xulexplorer-1.0a1pre.en-us.win32.exe 6.6mb install (mac): xulexplorer-1.0a1pre.en-us.mac.dmg 9.3mb install (linux): xulexplorer-1.0a1pre.en-us.linux-i686.tar.bz2 8.4mb contributing source code in svn bugzilla (for bugs and suggestions) open bugs, enter new bug blog posts xul explorer - updated (1.0a1pre) xul explorer 0.4 xul explorer 0.3 xul explorer 0.2 exploring xul ...
Mozprofile - Archive of obsolete content
see https://github.com/mozilla/mozbase/b...permissions.py resources other mozilla programs offer additional and overlapping functionality for profiles.
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-11-10 - Archive of obsolete content
discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility.
2006-11-22 - Archive of obsolete content
he cited some valuable resources on the topic courtesy of the washington post.
2006-10-06 - Archive of obsolete content
sun microsystems contributes to lightning to combine it with openoffice.org sun microsystems provide users with an alternative open source choice by combining openoffice.org respectively staroffice and thunderbird/lightning.
2006-09-29 - Archive of obsolete content
firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-10-26 - Archive of obsolete content
rebuild firefox after modifying source code an inqury about how to rebuild the code after making a minor change - the user is unfamiliar with how to use the command prompt.
2006-10-27 - Archive of obsolete content
rebuild firefox after modifying source code an inqury about how to rebuild the code after making a minor change - the user is unfamiliar with how to use the command prompt.
2006-11-03 - Archive of obsolete content
source code for the nsinstall contained in moztools a user asks for advice about building nsinstall on windows.
2006-10-06 - Archive of obsolete content
discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project.
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 14-20, 2006 announcements eudora goes open source both qualcomm and mozilla will participate in enhancing the capabilities and ease of use of both eudora and thunderbird.
2006-10-06 - Archive of obsolete content
he found out that a broken host_xpidl was the source of the problem.
2006-10-27 - Archive of obsolete content
firefox 2 wont build under solaris 10 x86 october 26: alex was trying to build firefox 2 source on a solaris 10 x86 machine but was not successful with the build.
2006-11-03 - Archive of obsolete content
problems building browser's trunk on windows using vs 2005 originally posted on october 29th: ricardo sixel is trying to retrieve the trunk source code using the browser check out option.
2006-11-24 - Archive of obsolete content
he is using make 3.80, working with the source tarball for xulrunner 1.8.4,running "make -f client.mk distclean" followed by "make -f client.mk build_all".
2006-11-17 - Archive of obsolete content
going to fosdem 2007 fosdem 2007 (free and open source software developers' european meeting), february 24th - 25th.
2006-12-01 - Archive of obsolete content
discussions convert ooo .dic to .xpi convert ooo .dic to .xpi mozillatranslator and sourceforge.net about the best way to organize things creating a <locale>.jar file from the cvs structure discussion on how to package a <locale>.jar from the cvs structure without having to download the entire mozilla source.
2006-11-10 - Archive of obsolete content
james leigh points out that resources are available at o'reily, in the creating applications with mozilla section.
2006-09-29 - Archive of obsolete content
discussions file: vs resource: vs chrome: from a security point of view boris zbarsky gives a summary the current setup for checkloaduri (which type of security principal can load what) and asks for comments about whether that is the desired behaviour.
2006-11-10 - Archive of obsolete content
block images discussion on how where to change source code so that images could be blocked in mozilla.
2006-11-17 - Archive of obsolete content
the possibility of turning the microsummaryresource object into a xpcom component, which accomplishes this task in a "hacky" manner, was also discussed.
NPAPI plugin developer guide - Archive of obsolete content
the main source of documentation for npapi is the npapi plugin api reference.
Multi-process plugin architecture - Archive of obsolete content
plugins are a frequent source of instability or crashes for browser users.
NPN_Status - Archive of obsolete content
the browser always displays the last status line message it receives, regardless of the message source.
NPP_Destroy - Archive of obsolete content
description npp_destroy releases the instance data and resources associated with a plug-in.
NPP_SetWindow - Archive of obsolete content
in this case, the plug-in must not perform any additional graphics operations on the window and should free any associated resources.
NPP_WriteReady - Archive of obsolete content
this function allows the browser to send only as much data to the instance as it can handle at one time, making resource use more efficient for both the browser and plug-in.
NPAPI plugin reference - Archive of obsolete content
on windows you have to define supported mimetypes in the dll resource file.
Samples and Test Cases - Archive of obsolete content
npapi plugin samples collections of npapi plugin samples can be found in the seamonkey source code at /modules/plugin/sdk/samples.
The First Install Problem - Archive of obsolete content
if the "data" file myfile.typ doesn't contain enough resource information to load the correct mimetype handling component (dll), specifying "type" is an additional mechanism.
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
also, when included with builds of mozilla that are based on gtk 1.2 or gtk 2.x, the xt code that hosts the plugins is at best hacky and has been the source for many minor problems including inconsistent focus behavior as well as occasional crashes.
Syndicating content with RSS - Archive of obsolete content
(other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs.
Atomic RSS - Archive of obsolete content
ArchiveRSSModuleAtom
references atomic rss element list examples none available at this time community none available at this time tools none available at this time other resources tim bray's atom rss article rss, atom, rdf, xml ...
Content - Archive of obsolete content
references rss content module element list examples none available at this time community none available at this time tools none available at this time other resources rss content module spec rss, rdf, xml ...
Slash - Archive of obsolete content
ArchiveRSSModuleSlash
references rss slash module element list examples none available at this time community none available at this time tools none available at this time other resources rss slash module slash slashdot rss, rdf, xml ...
Well-Formed Web - Archive of obsolete content
references rss well-formed web module element list examples none available at this time community none available at this time tools none available at this time other resources well-formed web spec rss, rdf, xml ...
Element - Archive of obsolete content
<language> (rss language element) <lastbuilddate> (rss last build date element) <link> (rss link element) m <managingeditor> (rss 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 ...
Confidentiality, Integrity, and Availability - Archive of obsolete content
integrity integrity refers to ensuring the authenticity of information—that information is not altered, and that the source of the information is genuine.
Create Your Own Firefox Background Theme - Archive of obsolete content
online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser.
-ms-flow-from - Archive of obsolete content
the -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.
-ms-flow-into - Archive of obsolete content
the -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.
E4X - Archive of obsolete content
ArchiveWebE4X
workaround: var response = xmlhttprequest.responsetext; // bug 270553 response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 336551 var e4x = new xml(response); resources e4x tutorial processing xml with e4x on mdc e4x for templating see the list of e4x-related pages on mdc ecma-357 standard brendan's presentation e4x at faqts.com e4x quick reference at rephrase.net ...
ArrayBuffer.transfer() - Archive of obsolete content
if (!arraybuffer.transfer) { arraybuffer.transfer = function(source, length) { if (!(source instanceof arraybuffer)) throw new typeerror('source must be an instance of arraybuffer'); if (length <= source.bytelength) return source.slice(0, length); var sourceview = new uint8array(source), destview = new uint8array(new arraybuffer(length)); destview.set(sourceview); return destview.buffer; ...
New in JavaScript 1.3 - Archive of obsolete content
statements label switch do...while export import built-in objects regexp methods of built-in objects tosource() object.prototype.watch() object.prototype.unwatch() function.arity function.prototype.apply() function.prototype.call() array.prototype.concat() array.prototype.pop() array.prototype.push() array.prototype.shift() array.prototype.slice() array.prototype.splice() string.prototype.concat() string.prototype.concat() string.prototype.match() string.prototype.search() string.prototyp...
New in JavaScript - Archive of obsolete content
ecmascript versions language resources learn more about the ecmascript standards on which the javascript language is based on.
JSObject - Archive of obsolete content
the expression is a string of javascript source code which will be evaluated in the context given by "this".
LiveConnect - Archive of obsolete content
mailing list newsgroup rss feed related topics javascript, plugins older notes (please update or remove as needed.) while the bloated liveconnect code in the mozilla source was removed in version 1.9.2 of the platform (see bug 442399), its former api has been restored (see also the specification and this thread) (building on npapi?), and as of java 6 update 12, extensions as well as applets can make use of this restored api.
Examples - Archive of obsolete content
this page contains the source code of the examples related to the "properly using css and javascript in xhtml documents" article.
Server-Side JavaScript - Archive of obsolete content
some, like aptana with the open source jaxer server actually embed the entire mozilla firefox browser engine (including spidermonkey) within a web server to enable server-side ajax and server-side dom access in addition to server-side execution of javascript.
Standards-Compliant Authoring Tools - Archive of obsolete content
currently the work done on nvu is being ported back to mozilla source code.
Implementation Status - Archive of obsolete content
330557; 11.3 xforms-submit-serialize supported 11.4 xforms-submit-done supported 11.5 xforms-submit-error supported 11.6.1 resource supported 11.7.1 method unsupported 11.8 header unsupported 11.8.1 name unsupported 11.8.2 value unsupported 11.9 submission options supported ...
XForms Styling - Archive of obsolete content
however, most of the time the transition is straight-forward: view the source after processing of your xforms document, and map the old styles to the new elements.
XForms Alert Element - Archive of obsolete content
if more than one source of message is specified in this element, the order of precedence is: single node binding attributes, linking attributes, inline text.
XForms Help Element - Archive of obsolete content
if more than one source of message is specified in this element, the order of precedence is: single node binding attributes, linking attributes, inline text.
XForms Hint Element - Archive of obsolete content
if more than one source of message is specified in this element, the order of precedence is: single node binding attributes, linking attributes, inline text.
XForms Label Element - Archive of obsolete content
if more than one source of label text is specified for this element, the order of precedence is: single node binding attributes, linking attributes, inline text.
XForms Message Element - Archive of obsolete content
if more than one source of message is specified in this element, the order of precedence is: single node binding attributes, linking attributes, inline text.
XForms - Archive of obsolete content
documentation implementation status implementation status of the mozilla xforms extension building get started with building your own xforms extensions from source.
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
related resources mozilla's doctype sniffing original document information author(s): eric a.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
this technote explains the source of the problems and how to avoid encountering them.
Styling Abbreviations and Acronyms - Archive of obsolete content
eline 4 of the web content accessibility guidelines, both elements should be given a title attribute to improve "readability of the web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf." the problem authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resource://gre-resources/html.css abbr[title], acronym[title] { text-decoration: dotted underline; } the solution if authors wish to remove the underline from abbr and acronym elements, this can be done with the following rule: abbr[title], acronym[title] { text-decoration: none; } it may be better to lessen the visual weight of the border without actually removing it.
Web Standards - Archive of obsolete content
this article covers common issues associated with migrating applications to the open source mozilla-based browser.
Windows Media in Netscape - Archive of obsolete content
example 1: client-side detection scripts browser architecture supports: netscapeplugin windows media player installed: true windows media scriptable: false windows media version: pluginversion a complete source code listing showing how that detection was done can be found here (devedge-temp).
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
related sources the full sample plugin code can be found in the mozilla source tree under modules/plugin/samples/4x-scriptable/ ibm developer works has published a good article on xpcom.
XUL Booster - Archive of obsolete content
download visit xulbooster at sourceforge.net ...
XUL Parser in Python - Archive of obsolete content
source code the source code for the xul parser is available.
Archive of obsolete content
table reflow internals key: tamarin tracing build documentation the following instructions are for obtaining and building the tamarin tracing source code.
Game monetization - Game development
selling resources if you're a graphic designer, you can sell the assets from the games you've created, or something brand new exclusively for that purpose at online shops like envato market.
Bounding volume collision detection with THREE.js - Game development
) { // get box closest point to sphere center by clamping three.sphere.__closest.set(this.center.x, this.center.y, this.center.z); three.sphere.__closest.clamp(box.min, box.max); var distance = this.center.distancetosquared(three.sphere.__closest); return distance < (this.radius * this.radius); }; demos we have prepared some live demos to demonstrate these techniques, with source code to examine.
3D collision detection - Game development
we have prepared a live collision detection demo (with source code) that you can take a look at to see such techniques in action — this uses the open-source 3d physics engine cannon.js.
Explaining basic 3D theory - Game development
lighting the colors we see on the screen is a result of the light source interacting with the surface colors of the object's material.
Building up a basic demo with Babylon.js - Game development
let there be light there are various light sources available in babylon.js.
WebVR — Virtual Reality for the Web - Game development
you can check the webvr boilerplate sources — it's a good example to start learning webvr from, and a starting point for any web-based vr experience.
Mobile touch controls - Game development
dedicated plugins you could go even further and use dedicated plugins like virtual joystick — this is a paid, official phaser plugin, but you can find free and open source alternatives.
Implementing game control mechanisms - Game development
pure javascript demo there's also a small online demo with full source code available on github where the basic support for the control mechanisms described in the articles is implemented in pure javascript.
WebRTC data channels - Game development
original document information author(s): alan kligman source article: webrtc data channels for great multiplayer other contributors: robert nyman copyright information: alan kligman, 2013 ...
asm.js - Game development
this article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples.
Bounce off the walls - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson3.html.
Build the brick field - Game development
you can find the source code as it would look after completing this lesson at gamedev-canvas-workshop/lesson6.html.
Collision detection - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson7.html.
Finishing up - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson10.html.
Game over - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson5.html.
Mouse controls - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson9.html.
Move the ball - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson2.html.
Paddle and keyboard controls - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson4.html.
Track the score and win - Game development
you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson8.html.
Bounce off the walls - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson06.html.
Build the brick field - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson09.html.
Buttons - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson15.html.
Collision detection - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson10.html.
Extra lives - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson13.html.
Game over - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson08.html.
Load the assets and print them on screen - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson03.html.
Move the ball - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson04.html.
Physics - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson05.html.
Player paddle and controls - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson07.html.
Randomizing gameplay - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson16.html.
Scaling - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson02.html.
The score - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson11.html.
Win the game - Game development
you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson12.html.
404 - MDN Web Docs Glossary: Definitions of Web-related terms
a 404 is a standard response code meaning that the server cannot find the requested resource.
Accessibility - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge accessibility resources at mdn web accessibility on wikipedia learn web accessibility learn accessibility on mdn web accessibility in mind technical reference the aria documentation on mdn the web accessibility initiative homepage the wai-aria recommendation ...
Apple Safari - MDN Web Docs Glossary: Definitions of Web-related terms
it's based on the open source webkit engine.
Base64 - MDN Web Docs Glossary: Definitions of Web-related terms
this means that the base64 version of a string or file will be at most 133% the size of its source (a ~33% increase).
Blink - MDN Web Docs Glossary: Definitions of Web-related terms
blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
Block (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
for example, <p> is by default a block-level element, whereas <a> is an inline element — you can put several links next to one another in your html source and they will sit on the same line as one another in the rendered output.
Block - MDN Web Docs Glossary: Definitions of Web-related terms
for example, <p> is by default a block-level element, whereas <a> is an inline element — you can put several links next to one another in your html source and they will sit on the same line as one another in the rendered output.
Bootstrap - MDN Web Docs Glossary: Definitions of Web-related terms
bootstrap is a free, open source html, css, and javascript framework for quickly building responsive websites.
Canvas - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge canvas on wikipedia learning resources the canvas tutorial on mdn technical information the html <canvas> element on mdn the canvas general documentation on mdn canvasrenderingcontext2d: the canvas 2d drawing api the canvas 2d api specification ...
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
the client can then give the server information about the client's environment, and the server can determine which resources to send based on that information.
Compile - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge compiler on wikipedia the gnu compiler collection (gcc) learning resources base cs introduction on compilers a big list of learning material on stackoverflow ...
Element - MDN Web Docs Glossary: Definitions of Web-related terms
tags begin or end an element in source code, whereas elements are part of the dom, the document model for displaying the page in the browser.
Empty element - MDN Web Docs Glossary: Definitions of Web-related terms
the empty elements in html are as follows: <area> <base> <br> <col> <embed> <hr> <img> <input> <keygen>(html 5.2 draft removed) <link> <meta> <param> <source> <track> <wbr> ...
Exception - MDN Web Docs Glossary: Definitions of Web-related terms
in javascript syntax errors are a very common source of exceptions.
Fork - MDN Web Docs Glossary: Definitions of Web-related terms
forks are often seen in free and open source software development.
GPL - MDN Web Docs Glossary: Definitions of Web-related terms
users of a gpl-licensed program are granted the freedom to use it, read the source code, modify it and redistribute the changes they made, provided they redistribute the program (modified or unmodified) under the same license.
Git - MDN Web Docs Glossary: Definitions of Web-related terms
git is a free, open-source, distributed source code management (scm) system.
Google Chrome - MDN Web Docs Glossary: Definitions of Web-related terms
it's based on the chromium open source project.
HSTS - MDN Web Docs Glossary: Definitions of Web-related terms
it consists in one http header, strict-transport-security, sent by the server with the resource.
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
request header: headers containing more information about the resource to be fetched or about the client itself.
IDE - MDN Web Docs Glossary: Definitions of Web-related terms
an ide normally consists of a source code editor, build automation tools and a debugger.
Mozilla Firefox - MDN Web Docs Glossary: Definitions of Web-related terms
mozilla firefox is a free open-source browser whose development is overseen by the mozilla corporation.
OpenSSL - MDN Web Docs Glossary: Definitions of Web-related terms
openssl is an open-source implementation of ssl and tls.
PHP - MDN Web Docs Glossary: Definitions of Web-related terms
php (a recursive initialism for php: hypertext preprocessor) is an open-source server-side scripting language that can be embedded into html to build web applications and dynamic websites.
Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
page prediction is a browser feature or script which, when enabled, tells the browser to download resources the user is likely to visit before the user requests the content.
Parse - MDN Web Docs Glossary: Definitions of Web-related terms
when the html parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing.
Parser - MDN Web Docs Glossary: Definitions of Web-related terms
a parser is the module of a compiler or interpreter that parses a source code file.
Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
actual performance is a measurement from when a request is made, through the downloading, parsing and execution of all resources, and the final paint.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
the prefetch hints are sent in http headers: link: ; rel=dns-prefetch, ; as=script; rel=preload, ; rel=prerender, ; as=style; rel=preload prefetch attribute value browsers will prefetch content when the prefetch <link> tag directs it to, giving the developer control over what resources should be prefetched.
Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms
for example, a client might be asking a server if it would allow a delete request, before sending a delete request, by using a preflight request: options /resource/foo access-control-request-method: delete access-control-request-headers: origin, x-requested-with origin: https://foo.bar.org if the server allows 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:...
Python - MDN Web Docs Glossary: Definitions of Web-related terms
python is developed under an osi-approved open source license, making it freely usable and distributable, even for commercial use.
QUIC - MDN Web Docs Glossary: Definitions of Web-related terms
resources chromium projects documentation ietf draft see also http/2 ...
REST - MDN Web Docs Glossary: Definitions of Web-related terms
the basic idea of rest is that a resource, e.g.
Random Number Generator - MDN Web Docs Glossary: Definitions of Web-related terms
truly random numbers (say, from a radioactive source) are utterly unpredictable, whereas all algorithms are predictable, and a prng returns the same numbers when passed the same starting parameters or seed.
Repo - MDN Web Docs Glossary: Definitions of Web-related terms
"repository") is a place that hosts an application's code source, together with various metadata.
Responsive web design - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge summary and resources pros and cons of going responsive responsive web design ...
Ruby - MDN Web Docs Glossary: Definitions of Web-related terms
ruby is an open-source programming language.
SDP - MDN Web Docs Glossary: Definitions of Web-related terms
sdp contains the codec, source address, and timing information of audio and video.
SEO - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge seo on wikipedia learn seo google webmasters learning resources ...
SVN - MDN Web Docs Glossary: Definitions of Web-related terms
apache subversion (svn) is a free source control management (scm) system.
Same-origin policy - MDN Web Docs Glossary: Definitions of Web-related terms
the same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.
Server Timing - MDN Web Docs Glossary: Definitions of Web-related terms
see also https://www.w3.org/tr/server-timing/ resource timing ...
Site - MDN Web Docs Glossary: Definitions of Web-related terms
the concept of a site is used in samesite cookies, as well as a web application's cross-origin resource policy.
Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
in css, there are three categories of sources for style changes.
Syntax - MDN Web Docs Glossary: Definitions of Web-related terms
even small errors, like a missing parenthesis, can stop source code from compiling successfully.
Syntax error - MDN Web Docs Glossary: Definitions of Web-related terms
syntax errors are detected while compiling or parsing source code.
TCP slow start - MDN Web Docs Glossary: Definitions of Web-related terms
to implement tcp slow start, the congestion window (cwnd) sets an upper limit on the amount of data a source can transmit over the network before receiving an acknowledgment (ack).
TTL - MDN Web Docs Glossary: Definitions of Web-related terms
caching in the context of caching, ttl (as an unsigned 32-bit integer) being a part of the http response header or the dns query, indicates the amount of time in seconds during which the ressource can be cached by the requester.
Type conversion - MDN Web Docs Glossary: Definitions of Web-related terms
implicit conversion happens when the compiler automatically assigns data types, but the source code can also explicitly require a conversion to take place.
UDP (User Datagram Protocol) - MDN Web Docs Glossary: Definitions of Web-related terms
udp provides checksums for data integrity, and port numbers for addressing different functions at the source and destination of the datagram.
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.
URN - MDN Web Docs Glossary: Definitions of Web-related terms
urn (uniform resource name) is a uri in a standard format, referring to a resource without specifying its location or whether it exists.
WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
they outline a set of guidelines for making content accessible primarily for people with disabilities but also for limited-resource devices such as mobile phones.
WebVTT - MDN Web Docs Glossary: Definitions of Web-related terms
webvtt (web video text tracks) is a w3c specification for a file format marking up text track resources in combination with the html <track> element.
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
xml inclusions (xinclude) is a w3c recommendation to allow inclusion of xml more different sources in a more convenient fashion than xml external entities.
minification - MDN Web Docs Glossary: Definitions of Web-related terms
minification is the process of removing unnecessary or redundant data without affecting how a resource is processed by the browser.
Time to first byte - MDN Web Docs Glossary: Definitions of Web-related terms
ttfb is the time it takes between the start of the request and the start of the response, in milliseconds: ttfb = responsestart - requeststart see also: a typical http session performanceresourcetiming performancetiming ...
MDN Web Docs Glossary: Definitions of Web-related terms
n q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine repo reporting directive request header resource timing response header responsive web design rest rgb ril robots.txt round trip time (rtt) routers rss rtcp (rtp control protocol) rtf rtl (right to left) rtp (real-time transport protocol) and srtp (secure rtp) rtsp: real-time streaming protocol ruby s...
What is accessibility? - Learn web development
webaim has a cognitive page of relevant information and resources.
Organizing your CSS - Learn web development
this can make it easier to keep your css organised, and also means that if multiple people are working on the css you will have fewer situations where two people need to work on the same stylesheet at once, leading to conflicts in source control.
Floats - Learn web development
floats have commonly been used to create entire web site layouts featuring multiple columns of information floated so they sit alongside one another (the default behavior would be for the columns to sit below one another, in the same order as they appear in the source).
Test your skills: Grid Layout - Learn web development
try updating the live code below to recreate the finished example: additional questions: can you now cause the first item to display on top without changing the order of items in the source?
Legacy layout methods - Learn web development
note: you can see this example running at 0_two-column-layout.html (see also the source code).
How CSS is structured - Learn web development
mdn's css reference is a good resource for more information about any shorthand property.
How CSS works - Learn web development
the browser then fetches most of the resources that are linked to by the html document, such as embedded images and videos ...
How can we design for all types of users? - Learn web development
this attribute's value is a url pointing towards a resource explicitly describing in detail the image's content.
How much does it cost to do something on the Web? - Learn web development
some of them, like microsoft visual studio, can cost hundreds, or thousands of dollars; though visual studio express is free for individual developers or open source projects.
How do I start to design my website? - Learn web development
finding a girl/boyfriend is a prime case where it makes more sense to use existing resources rather than build a whole new site.
What are hyperlinks? - Learn web development
external links influence the search ranking both of source and target webpages, but it is unclear by how much.
What is a Domain Name? - Learn web development
for example: local tlds such as .us, .fr, or .se can require the service to be provided in a given language or hosted in a certain country — they are supposed to indicate a resource in a particular language or country.
What is accessibility? - Learn web development
accessibility champions since 1999, the w3c has operated a working group called the web accessibility initiative (wai) promoting accessibility through guidelines, support material, and international resources.
Basic native form controls - Learn web development
due to the on-off nature of checkboxes, the checkbox is considered a toggle button, with many developers and designers expanding on the default checkbox styling to create buttons that look like toggle switches you can see an example in action here (also see the source code).
The HTML5 input types - Learn web development
see the firefox for android keyboard screenshot below for an example: note: you can find examples of the basic text input types at basic input examples (see the source code also).
HTML forms in legacy browsers - Learn web development
there are other resources that can be amazingly helpful: browser vendor documentation mozilla: you're in the right place, just browse mdn microsoft: internet explorer standards support documentation webkit: because there are several different editions of this engine, things are a little trickier.
How to structure a web form - Learn web development
add this to the bottom of your form now: <p> <button type="submit">validate the payment</button> </p> you can see the finished form in action below (also find it on github — see our payment-form.html source and running live): test your skills!
Other form controls - Learn web development
note: you can find a slightly more interesting example of text area usage in the example we put together in the first article of the series (see the source code also).
Sending forms through JavaScript - Learn web development
there are many sources for binary data, including filereader, canvas, and webrtc.
Styling web forms - Learn web development
your form should now look like this: note: if your example does not work quite like you expected and you want to check it against our version, you can find it on github — see it running live (also see the source code).
Your first form - Learn web development
uxmatters is also a very thoughtful resource with good advice from basic best practices to complex concerns such as multi-page forms.
Front-end web developer - Learn web development
modules css first steps (10–15 hour read/exercises) css building blocks (35–45 hour read/exercises) styling text (15–20 hour read/exercises) css layout (30–40 hour read/exercises) additional resources css layout cookbook interactivity with javascript time to complete: 135–185 hours prerequisites it is recommended that you have basic html knowledge before starting to learn javascript.
HTML basics - Learn web development
it does this via the src (source) attribute, which contains the path to our image file.
JavaScript basics - Learn web development
if you enjoyed playing, and wish to go further, take advantage of the resources listed below.
The web and web standards - Learn web development
this allows the web to remain a freely-available public resource.
HTML Cheatsheet - Learn web development
embedded audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee6.ogg" type="audio/ogg"> your browser does not support audio.
Use JavaScript within a webpage - Learn web development
you can hardly ever predict just how long it will take for users or browsers to complete an process (especially asynchronous actions such as loading resources).
Adding vector graphics to the Web - Learn web development
duplication makes for resource-intensive maintenance.
HTML table advanced features and accessibility - Learn web development
it is however sometimes necessary, for example if you want to import content easily from other sources.
HTML table basics - Learn web development
LearnHTMLTablesBasics
first the source code: <table> <tr> <td>&nbsp;</td> <td>knocky</td> <td>flor</td> <td>ella</td> <td>juan</td> </tr> <tr> <td>breed</td> <td>jack russell</td> <td>poodle</td> <td>streetdog</td> <td>cocker spaniel</td> </tr> <tr> <td>age</td> <td>16</td> <td>9</td> <td>10</td> <td>5</td> </tr> <tr> <td>owner</td> <td>mother-in-law</t...
Assessment: Structuring planet data - Learn web development
the finished table should look like this: you can also see the example live here (no looking at the source code — don't cheat!) steps to complete the following steps describe what you need to do to complete the table example.
General asynchronous programming concepts - Learn web development
the code runs in the order it appears in the source, and the later operation doesn't run till the earlier operation has finished running.
Asynchronous JavaScript - Learn web development
in this module we take a look at asynchronous javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
Image gallery - Learn web development
to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do.
Client-side web APIs - Learn web development
this article provides an introduction to the canvas api, and further resources to allow you to learn more.
A first splash into JavaScript - Learn web development
if you can't get the example to work, check it against the source code.
Basic math in JavaScript — numbers and operators - Learn web development
we've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors!
Silly story generator - Learn web development
will generate another random silly story if you press the button again (and again...) the following screenshot shows an example of what the finished program should output: to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do.
Handling text — strings in JavaScript - Learn web development
another point to note is that if you want to split a traditional string over multiple lines, you need to include a newline character, \n: output = 'i like the song "' + song + '".\ni gave it a score of ' + (score/highestscore * 100) + '%.'; template literals respect the line breaks in the source code, so newline characters are no longer needed.
What went wrong? Troubleshooting JavaScript - Learn web development
these are often harder to fix than syntax errors, as there usually isn't an error message to direct you to the source of the error.
Adding features to our bouncing balls demo - Learn web development
the following screenshot gives you an idea of what the finished program should look like: to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do.
JavaScript object basics - Learn web development
this contains very little — a <script> element for us to write our source code into.
JavaScript — Dynamic client-side scripting - Learn web development
asynchronous javascript in this module we take a look at asynchronous javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
Perceived performance - Learn web development
loading additional assets and resources after initial page load improves perceived performance.
The business case for web performance - Learn web development
(source needed).
Web performance - Learn web development
html performance features some attributes and the source order of your mark-up can impact the performance or your website.
Introduction to cross browser testing - Learn web development
if not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving.
Deploying our app - Learn web development
parcel src/index.html is running in the background to watch for changes and to automatically build our source.
Tools and testing - Learn web development
once you've started to become comfortable programming with core web technologies (like html, css, and javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides.
Learn web development
the aim of this area of mdn is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." from there, you should be able to start making your way, learning from the rest of mdn, and other intermediate to advanced resources that assume a lot of previous knowledge.
Mozilla accessibility architecture
however, because this would have caused a lot of difficulty when implementing the accessibility cache, the code was moved in to the "wrap" classes in a source directory specific to each toolkit.
CSUN Firefox Materials
that's the great thing about the open firefox community model and source code license -- anyone can contribute, and everyone benefits.
Gecko info for Windows accessibility vendors
(i recommend sdk 1.3 because the msaa sdk 2.0 doesn't come with the source code to the testing tools.
Information for users
firefox accessibility skins and themes at the excellent access firefox website, you will find many valuable resources, including a list of firefox themes that have been specially designed for those with low vision: themes with high color constrast themes with big icons themes with extra large and bright icons themes with extra large and extra bold text join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at i...
Mozilla Plugin Accessibility
in other cases, vendors need to find or be convinced of the business justification so that resources are applied to the problem.
Accessibility and Mozilla
please check the accessibility help topic for more information.links and resourceshere are some useful links for those interested in web accessibility as well as open source accessibility.mozilla accessibility architecturethis page is maintained by aaron leventhal and by the mozilla accessibility community.
Lightweight themes
online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser.
Obsolete
this page contains theme documents and resources that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.
Themes
tools & resources browser theme manifest.json keys browser extensions theme api discourse forum theme related blog posts archived resources ...
Add-ons
there are some porting resources on firefox extension workshop, our site for firefox-specific development resources.
Adding a new event
this draft document covers how to add a new event to the mozilla (firefox) source code.
Adding a new word to the en-US dictionary
get into the dictionary sources directory using this command: cd extensions/spellcheck/locales/hunspell/dictionary-sources there's a special script used for editing dictionaries.
Browser chrome tests
as with mochitest, the path given as an argument is the path to a test or directory within the mozilla source tree.
Testopia
if you have made modifications to the testopia source code, you will need to merge them into the new testopia folder (capital t).
Continuous Integration
clobber builds mean the directory hierarchy, including the local source and object directory are deleted if it exists from a previous build.
Creating a Firefox sidebar
you can choose either depending on your needs and resources.
Creating a Login Manager storage module
const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); function sampleloginmanagerstorage() {} sampleloginmanagerstorage.prototype = { classdescription: "sample nsiloginmanagerstorage implementation", contractid: "@example.com/login-manager/storage/sample;1", classid: components.id("{364a118c-747a-4f6d-ac63-2d2998e5a5c1}"), queryinterface: xpcomutils.generateqi([ci.nsiloginmanagerstorage]), // this register...
Creating Sandboxed HTTP Connections
new streamlistener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { var scriptableinputstream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { ...
Debugging Table Reflow
reflow the most efficient tool to claim that html-table code is the victim and not the source of layout bugs is a frame reflow debug log.
Debugging update problems
related resources extension versioning, update and compatibility.
Building Firefox with Debug Symbols
see https://dxr.mozilla.org/mozilla/source/toolkit/crashreporter/tools/upload_symbols.sh for more information about the environment variables used by this target.
Gmake vs. Pymake
for example, if using the default objdir, you might type in the root of your source tree: mkdir obj-i686-pc-mingw32; cd obj-i686-pc-mingw32; python ../build/pymake/make.py -f ../client.mk.
Linux Prerequisites
doc moved in-tree https://firefox-source-docs.mozilla.org/setup/linux_build.html ...
Building Firefox for macOS
moved in-tree: https://firefox-source-docs.mozilla.org/setup/macos_build.html ...
Linux build preparation
documentation moved in-tree: https://firefox-source-docs.mozilla.org/setup/linux_build.html ...
Building Firefox
page moved in-tree https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html ...
Building Firefox for Windows
documentation moved in-tree: https://firefox-source-docs.mozilla.org/setup/windows_build.html ...
ESLint
more information: outline details of the rules rule source code common issues and how to solve them my editor says that "mozilla/whatever" is unknown run ./mach eslint --setup restart your editor if that doesn't work, check that you have your editor pointing to the correct node_modules folder.
Commenting IDL for better documentation
doxygen is a system of generating documentation from source code.
SVG Guidelines
you shouldn't include doctypes in your svgs either; they are a source of many issues, and the svg wg recommends not to include them.
Index
170 storage access policy: block cookies from trackers privacy, storage access policy, tracking protection firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources.
Limitations of chrome scripts
if the custom protocol is registered only in the chrome process, no iframes or tabs will be able to load any resource from the custom procotol.
Blocked: All storage access requests
the permission can be changed or removed by: going to preferences > content blocking in the custom content blocking section, selecting a value other than all cookies for the cookies item if the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to your element.
Blocked: All third-party storage access requests
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the cookies checkbox if the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.
Blocked: Storage access requests from trackers
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the tracker checkbox if the blocked resource doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.
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.
Site Identity Button
roblem by looking in the web console in the firefox developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subresources loaded for your page have not.
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
searchbar.value = ''; } } }); note that whenever one of the search-related methods is invoked, a mozbrowserfindchange event is fired to allow you to react to search changes in a more precise way if desired: //browser.addeventlistener('mozbrowserfindchange', function(e) { // can react to find changes if required //}) reporting errors we've got one more piece of code to mention from our source: browser.addeventlistener('mozbrowsererror', function (e) { console.log("loading error: " + e.detail); }); this simple listener logs an error message to the console when an error with the browser iframe is encountered.
HTMLIFrameElement.reload()
parameters hardreload optional a boolean that indicates whether all the resources to reload must be revalidated (true) or may be taken directly from the browser cache (false).
Roll your own browser: An embedding how-to
the sections marked 'mozilla examples' refer to clients and sample code to be found within the mozilla source tree.
Gecko
roadmaps and more up-to-date resources.
Geckoview-Junit Tests
to disable a single test, edit the source code and insert junit's @ignore annotation before the existing @test annotation.
HTTP Cache
r interface wrapping following four arguments into a single one: private-browsing boolean flag anonymous load boolean flag app id number (0 for no app) is-in-browser boolean flag helper functions to create nsiloadcontextinfo objects: c++ consumers: functions at loadcontextinfo.h exported header js consumers: resource://gre/modules/loadcontextinfo.jsm module methods two storage objects created with the same set of nsiloadcontextinfo arguments are identical, containing the same cache entries.
Hacking with Bonsai
the process everyone who checks into the tree, joins a group called "the hook" at 8:00 am pst every weekday morning, the source tree is closed.
How to get a stacktrace for a bug report
mozilla's crash report server currently only has debug information for mozilla builds and thus the crash reporter cannot work if you use a build from a linux distribution or if you compile from source code.
How to get a stacktrace with WinDbg
source server maps addresses to source code lines ...
Creating a New Protocol
to hook up the file to the build, you need to add your ipdl file to ipdl_sources in the nearest moz.build file.
Implementing QueryInterface
they always make the program source more fragile.
Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
AddonInstall
sourceuri nsiuri the uri that the add-on is being installed from.
AddonUpdateChecker
to import the addonupdatechecker, use: components.utils.import("resource://gre/modules/addonupdatechecker.jsm"); 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 constan...
Add-on Repository
to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string getrecommendedurl() string getsearchurl(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 proper...
Widget Wrappers
areatype the type of the widget's current area isgroup true, will be false for wrappers around single widget nodes source for api-provided widgets, whether they are built-in to firefox or add-on-provided disabled for api-provided widgets, whether the widget is currently disabled.
DeferredTask.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/deferredtask.jsm"); use this, for instance, if you write data to a file and you expect that you may have to rewrite data very soon afterwards.
Dict.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/dict.jsm"); creating a dictionary you can create a new, empty dictionary by simply calling the dict() constructor: var newdict = new dict(); if you wish, you may also pass in an object literal of key/value pairs with which to initialize the dictionary: var someobj = {}; var newdict = new dict({key1: "foo", key2: someobj}); note that values may be any javascript object type.
DownloadLastDir.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloadlastdir.jsm"); if you are using addon sdk, you can import the code module as: let { cu } = require("chrome"); let downloadlastdir = cu.import("resource://gre/modules/downloadlastdir.jsm").downloadlastdir; once you've imported the module, you can then use the downloadlastdir object it exports.
DownloadError
becausesourcefailed read only boolean indicates an error occurred while reading from the remote location.
FileUtils.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/fileutils.jsm"); the file constructor if you have a path to a file (or directory) you want to obtain an nsifile for, you can do so using the file constructor, like this: var f = new fileutils.file(mypath); method overview nsifile getfile(string key, array patharray, bool followlinks); nsifile getdir(string key, array patharray, bool shouldcreate, bool followlinks); nsifileoutputstream openfileoutputstream(nsifile file, int modeflags); nsifileoutputstream openatomicfileoutputstream(nsifile file, int modeflags); nsifileoutputstr...
FxAccountsOAuthClient.jsm
components.utils.import("resource://gre/modules/fxaccountsoauthclient.jsm"); creating a new fxaccountsoauthclient new fxaccountsoauthclient(object options); method overview launchwebflow(); teardown(); attributes parameters object returns the set of parameters that initialized the firefox accounts oauth flow.
FxAccountsProfileClient.jsm
components.utils.import("resource://gre/modules/fxaccountsprofileclient.jsm"); creating a new fxaccountsprofileclient new fxaccountsprofileclient(object options); method overview fetchprofile(); attributes serverurl url profiler server url.
Geometry.jsm
to use these routines, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/geometry.jsm"); once you've imported the module, you can then use the point and rect classes.
ISO8601DateUtils.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/iso8601dateutils.jsm"); once you've imported the module, you can then use the iso8601dateutils object it exports.
Interfacing with the Add-on Repository
importing the repository code module before you can use the add-on repository api, you need to import the code module: components.utils.import("resource://gre/modules/addonrepository.jsm"); having done this, you can then access the api through the resulting addonrepository object.
Following the Android Toasts Tutorial from a JNI Perspective
the go-to resource for learning about the api when writing scripts for fennec.
JavaScript OS.Constants
error values eacces permission denied eagain resource temporarily unavailable ebadf bad file descriptor eexist file exists efault bad address efbig file too large einval invalid argument eio input/output error eisdir is a directory eloop (not always available under windows) too many levels of symbolic links.
Log.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/log.jsm"); basic usage components.utils.import("resource://gre/modules/log.jsm"); // get a logger, give it a name unique to this chunk of code.
PerfMeasurement.jsm
before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") see measuring performance using the perfmeasurement.jsm code module for details on how to use this api.
PopupNotifications.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/popupnotifications.jsm"); once you've imported the module, you can then use the popupnotifications object it exports; this object provides methods for creating and displaying popup notification panels.
Deferred
function deferred() { // update 062115 for typeof if (typeof(promise) != 'undefined' && promise.defer) { //need import of promise.jsm for example: cu.import('resource:/gree/modules/promise.jsm'); return promise.defer(); } else if (typeof(promiseutils) != 'undefined' && promiseutils.defer) { //need import of promiseutils.jsm for example: cu.import('resource:/gree/modules/promiseutils.jsm'); return promiseutils.defer(); } else { /* a method to resolve the associated promise with the value passed.
Promise.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/promise.jsm"); note: a preliminary promise module is also available starting from gecko 17, though it didn't conform to the promises/a+ proposal until gecko 25: components.utils.import("resource://gre/modules/commonjs/promise/core.js"); // gecko 17 to 20 components.utils.import("resource://gre/modules/commonjs/sdk/core/promise.js"); // gecko 21 to 24 this implementation al...
PromiseUtils.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/promiseutils.jsm"); method overview deferred defer(); methods defer() creates a new pending promise and provides methods to resolve or reject this promise.
Services.jsm
to use it, you first need to import the code module into your javascript scope: const {services} = chromeutils.import("resource://gre/modules/services.jsm"); then you can obtain references to services by simply accessing them from the services object exported by the code module.
Timer.jsm
to use timer.jsm, first import it: components.utils.import("resource://gre/modules/timer.jsm"); then call settimeout and cleartimeout just as you would in a dom window, for example: let timeoutid = settimeout(function() { console.log("hello!"); }, 500); cleartimeout(timeoutid); similarly, you can use setinterval and clearinterval like so: let intervalid = setinterval(function() { console.log("happening every 500ms!"); }, 500); clearinterval(intervalid); ...
WebChannel.jsm
components.utils.import("resource://gre/modules/webchannel.jsm"); constructor webchannel(string webchannelid, nsiuri originorpermission); 2nd argument is a valid origin that should be part of requests for this channel.
Webapps.jsm
importing components.utils.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savewidgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: function...
openLocationLastURL.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource:///modules/openlocationlasturl.jsm"); once you've imported the module, you can then use the openlocationlasturl object it exports.
JavaScript code modules
source-editor.jsm the source editor is used by developer tools such as, the style editor; this interface implements the editor and lets you interact with it.
Mozilla Content Localized in Your Language
localizers can assume that source content reaches 2/3 of the total available line space.
L10n testing with xcode
a window will then appear showing the diff between the imported xliff file and the existing resources in the project folder.
Localization notes
localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add comments to the localizable files themselves, too.
Localizing with Mozilla Translator
when mozilla l10n switched to ''source l10n'', one of the many problems that mt had to solve was how to fit a directory structure in what had been designed for five jars, and the ''patch'' consisted of providing a ''read from dir instead of jar'' and ''put everything inside platform neutral''.
Patching a Localization
get the source first, you need to get the source for the localization in question using its two or three character iso language code.
Localization prerequisites
let’s try our entry points: $ hg --version mercurial distributed scm (version 1.3.1) copyright (c) 2005-2009 matt mackall <mpm@selenic.com> and others this is free software; see the source for copying conditions.
Setting up the infrastructure
copy the shell scripts from /addons/trunk/site/app/locale/ to your locale directory: extract-po.sh will be used to extract all english strings from your application's directories specified in source_dirs, merge the resulting template (*.pot) file with the existing (already containing translations) messages.po files for each locale (if they exist) and merge the new messages.po files to messages.mo files.
Localization at Mozilla
these resources are for anyone with an interest in the technical aspects involved in localization.
MathML Screenshots
you can get the mathml source of a formula or a selected expression.
Updates
mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 september 21, 1999 mathm...
Mozilla DOM Hacking Guide
resources of interest the xpidl reference mapping dom objects to their c++ class modularization techniques scriptable helper flags this chapter has not been written yet.
Mozilla Web Services Security Model
overview (this document is being compiled from scattered documentation and source code and most of the information in it has not been verified.
Mozilla projects on GitHub
dxr an intelligent tool for browsing source code.
Adding a new Telemetry probe
adding new telemetry probes is now documented in the mozilla source tree docs.
GPU performance
apitrace - open source, works ok.
Leak-hunting strategies and tips
the most common source of hard-to-fix leaks is ownership cycles.
Measuring performance using the PerfMeasurement.jsm code module
the first thing you need to do is to import the module into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") you can then create a perfmeasurement object.
Power profiling overview
some tools can provide high-context wakeup measurements: dtrace (on mac) and perf (on linux.) source-level instrumentation, such as timerfirings logging, can identify which timers are firing frequently.
TimerFirings logging
365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javascript source location where they were created.
TraceMalloc
build/dist/minefield.app/contents/macos/firefox --trace-malloc /dev/null --shutdown-leaks=sdleak.log # convert raw log to text representation of call trees perl source/tools/trace-malloc/diffbloatdump.pl --depth=15 --use-address /dev/null sdleak.log > sdleak.tree.raw # frobulate trees to remove extraneous junk perl source/tools/rb/fix-macosx-stack.pl sdleak.tree.raw > sdleak.tree you can also use the leakstats program to analyze a log for shutdown leaks.
Performance
lsan) is similar to valgrind, but it runs faster because it uses static source code instrumentation.
Profile Manager
system requirements: mac: an intel processor, i386 or x86_64 linux: any version capable of running firefox 4.0 windows: xp or later source code you can download the source as well: hg clone http://hg.mozilla.org/automation/profilemanager/ instructions for building can be found in build.txt.
Crash reporting
firefox ships with an open-source crash reporting system.
Localization Use Cases
in l20n, localization files can be asymmetrical and have more entities that the source language.
L20n
additional resources some additional resources for developers and localizers involved with l20n.
McCoy
https://fireclipse.svn.sourceforge.net/svnroot/fireclipse/trunk/fireclipseextensions/chromebug/mccoy/signontheline/ bug 396525 - patch to mccoy https://bugzilla.mozilla.org/show_bug.cgi?id=396525 signing update manifests before you release your add-on in order to verify the update manifests applications need to already have information from you for how to verify it.
NSPR Error Handling
pr_insufficient_resources_error there are insufficient system resources to process the request.
Named Shared Memory
limits on shared memory resources different platforms have limits on both the number and size of shared memory resources.
PRIOMethods
recvfrom receive up to the specified number of bytes and report network source.
PRThreadPriority
this preference is still subject to resource availability and must not be used in place of proper synchronization.
PRThreadScope
global threads are scheduled by the host os and compete with all other threads on the host os for resources.
PR_AttachThread
if unsuccessful, for example if system resources are not available, null.
PR_Close
on successful return, pr_close frees the dynamic memory and other resources identified by the fd parameter.
PR_CreateThread
if unsuccessful, (for example, if system resources are unavailable), null.
PR_DestroyPollableEvent
close the file descriptor associated with a pollable event and release related resources.
PR_JoinThreadPool
waits for all threads in a thread pool to complete, then releases resources allocated to the thread pool.
PR_NewCondVar
if unsuccessful (for example, if system resources are unavailable), null.
PR_NewLock
if unsuccessful (for example, the lock cannot be created because of resource constraints), null.
PR_NewMonitor
if unsuccessful (for example, if some operating system resource is unavailable), null.
NSPR release process
upload a source tar file to https://ftp.mozilla.org/pub/mozilla....nspr/releases/ write the release notes.
Function_Name
see also copy of the mxr link, with the following text occurrences of function_name in the current nss source code (generated by mxr).
CERT_FindCertByDERCert
see also occurrences of cert_findcertbydercert in the current nss source code (generated by lxr).
CERT_FindCertByIssuerAndSN
a; issuersn.derissuer.len = caname->len; issuersn.serialnumber.data = authoritykeyid->authcertserialnumber.data; issuersn.serialnumber.len = authoritykeyid->authcertserialnumber.len; issuercert = cert_findcertbyissuerandsn(cert->dbhandle, &issuersn); if ( issuercert == null ) { port_seterror (sec_error_unknown_issuer); } see also occurrences of cert_findcertbyissuerandsn in the current nss source code (generated by lxr).
NSS Code Coverage
if file was tested, link points to annotated source file (in tcov directory), otherwise to original source file (cvs directory).
FIPS Mode - an explanation
nss was the first open source cryptographic library to be fips certified.
HTTP delegation
please read the source code documentation to learn how to use this api synchronously or asynchronously.
HTTP delegation
please read the source code documentation to learn how to use this api synchronously or asynchronously.
NSS Memory allocation
see the prototype at http://mxr.mozilla.org/nspr/source/n.../ds/plarenas.h a program should call that function at the very end, after having shutdown nss and nspr, to really free the contents of the free list.
NSS_3.12.2_release_notes.html
nss 3.12.2 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_2_rtm/src/.
NSS 3.12.9 release notes
nss 3.12.9 source distribution is also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3.12.9_rtm/src/.
NSS 3.14.1 release notes
nss 3.14.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_1_rtm/src/ new in nss 3.14.1 new functionality nss now has the ability to create signed ocsp responses.
NSS 3.14.3 release notes
nss 3.14.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_3_rtm/src/ new in nss 3.14.3 new functionality no new major functionality is introduced in this release.
NSS 3.14.4 release notes
nss 3.14.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_4_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.14.4.
NSS 3.14.5 release notes
nss 3.14.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_5_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.14.5.
NSS 3.15.1 release notes
distribution information nss 3.15.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_1_rtm/src/ new in nss 3.15.1 new functionality tls 1.2: tls 1.2 (rfc 5246) is supported.
NSS 3.15.2 release notes
distribution information nss 3.15.2 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_2_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.2.
NSS 3.15.3.1 release notes
nss 3.15.3.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_3_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.3.1.
NSS 3.15.3 release notes
nss 3.15.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_3_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.3.
NSS 3.15.4 release notes
nss 3.15.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_4_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.4.
NSS 3.15.5 release notes
nss 3.15.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_5_rtm/src/ new in nss 3.15.5 new functionality added support for the tls application layer protocol negotiation (alpn) extension.
NSS 3.16.1 release notes
nss 3.16.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_1_rtm/src/ new in nss 3.16.1 new functionality added the "ecc" flag for modutil to select the module used for elliptic curve cryptography (ecc) operations.
NSS 3.16.2.1 release notes
nss 3.16.2.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.16.2.1.
NSS 3.16.2.2 release notes
nss 3.16.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_2_rtm/src/ new in nss 3.16.2.2 new functionality no new functionality is introduced in this release.
NSS 3.16.2.3 release notes
nss 3.16.2.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_3_rtm/src/ new in nss 3.16.2.3 this patch release fixes a bug and contains a backport of the tls_fallback_scsv feature, which was originally made available in nss 3.17.1.
NSS 3.16.2 release notes
nss 3.16.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_rtm/src/ new in nss 3.16.2 new functionality dtls 1.2 is supported.
NSS 3.16.3 release notes
nss 3.16.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_3_rtm/src/ new in nss 3.16.3 this release consists primarily of ca certificate changes as listed below, and fixes an issue with a recently added utility function.
NSS 3.16.4 release notes
nss 3.16.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_4_rtm/src/ new in nss 3.16.4 this release consists primarily of ca certificate changes as listed below, and includes a small number of bug fixes.
NSS 3.16.5 release notes
nss 3.16.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_5_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.16.5.
NSS 3.16.6 release notes
nss 3.16.6 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_6_rtm/src/ new in nss 3.16.6 new functionality no new functionality is introduced in this release.
NSS 3.16 release notes
nss 3.16 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_rtm/src/ new in nss 3.16 new functionality supports the linux x32 abi.
NSS 3.17.1 release notes
nss 3.17.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.17.1.
NSS 3.17.2 release notes
nss 3.17.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_2_rtm/src/ new in nss 3.17.2 new functionality no new functionality is introduced in this release.
NSS 3.17.3 release notes
nss 3.17.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_3_rtm/src/ new in nss 3.17.3 new functionality support for tls_fallback_scsv has been added to the ssltap and tstclnt utilities.
NSS 3.17.4 release notes
nss 3.17.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_4_rtm/src/ new in nss 3.17.4 new functionality no new functionality is introduced in this release.
NSS 3.17 release notes
nss 3.17 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_rtm/src/ new in nss 3.17 new functionality when using ecdhe, the tls server code may be configured to generate a fresh ephemeral ecdh key for each handshake, by setting the ssl_reuse_server_ecdhe_key socket option to pr_false.
NSS 3.18.1 release notes
nss 3.18.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_18_1_rtm/src/ new in nss 3.18.1 no new functionality is introduced in this release.
NSS 3.18 release notes
nss 3.18 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_18_rtm/src/ new in nss 3.18 new functionality when importing certificates and keys from a pkcs#12 source, it's now possible to override the nicknames, prior to importing them into the nss database, using new api sec_pkcs12decoderrenamecertnicknames.
NSS 3.19.1 release notes
nss 3.19.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_1_rtm/src/ security fixes in nss 3.19.1 bug 1138554 / cve-2015-4000 - the minimum strength of keys that libssl will accept for finite field algorithms (rsa, diffie-hellman, and dsa) have been increased to 1023 bits.
NSS 3.19.2.1 release notes
nss 3.19.2.1 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.2.1.
NSS 3.19.2.2 release notes
nss 3.19.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.19.2.3 release notes
nss 3.19.2.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_3_rtm/src/ new in nss 3.19.2.3 new functionality no new functionality is introduced in this release.
NSS 3.19.2.4 release notes
nss 3.19.2.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_4_rtm/src/ new in nss 3.19.2.4 new functionality no new functionality has been introduced in this release.
NSS 3.19.2 release notes
nss 3.19.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_rtm/src/ new in nss 3.19.2 new functionality no new functionality is introduced in this release.
NSS 3.19.3 release notes
nss 3.19.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_3_rtm/src/ new in nss 3.19.3 no new functionality is introduced in this release.
NSS 3.19.4 release notes
nss 3.19.4 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_4_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.4.
NSS 3.19 release notes
nss 3.19 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_rtm/src/ security fixes in nss 3.19 bug 1086145 / cve-2015-2721 - fixed a bug related to the ordering of tls handshake messages.
NSS 3.20.1 release notes
nss 3.20.1 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.20.1.
NSS 3.20.2 release notes
nss 3.20.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_2_rtm/src/ security fixes in nss 3.20.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.20 release notes
nss 3.20 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_rtm/src/ new in nss 3.20 new functionality the tls library has been extended to support dhe ciphersuites in server applications.
NSS 3.21.1 release notes
nss 3.21.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_1_rtm/src/ new in nss 3.21.1 new functionality no new functionality is introduced in this release.
NSS 3.21.2 release notes
nss 3.21.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_2_rtm/src/ new in nss 3.21.2 new functionality no new functionality is introduced in this release.
NSS 3.21.3 release notes
nss 3.21.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_3_rtm/src/ new in nss 3.21.3 new functionality no new functionality is introduced in this release.
NSS 3.21.4 release notes
nss 3.21.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_4_rtm/src/ new in nss 3.21.4 no new functionality is introduced in this release.
NSS 3.21 release notes
nss 3.21 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_rtm/src/ security fixes in nss 3.21 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.22.1 release notes
nss 3.22.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_1_rtm/src/ new in nss 3.22.1 new functionality no new functionality is introduced in this release.
NSS 3.22.2 release notes
nss 3.22.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_2_rtm/src/ new in nss 3.22.2 new functionality no new functionality is introduced in this release.
NSS 3.22.3 release notes
nss 3.22.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_3_rtm/src/ new in nss 3.22.3 new functionality no new functionality is introduced in this release.
NSS 3.22 release notes
nss 3.22 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_rtm/src/ new in nss 3.22 new functionality rsa-pss signatures are now supported (bug 1215295) new functions pk11_signwithmechanism() and pk11_signwithmechanism() are provided to allow rsa keys to be used with pss.
NSS 3.23 release notes
nss 3.23 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_23_rtm/src/ new in nss 3.23 new functionality chacha20/poly1305 cipher and tls cipher suites now supported (bug 917571, bug 1227905) experimental-only support tls 1.3 1-rtt mode (draft-11).
NSS 3.24 release notes
nss 3.24 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_24_rtm/src/ new in nss 3.24 nss 3.24 includes two nss softoken updates, a new function to configure ssl/tls server sockets, and two functions to improve the use of temporary arenas.
NSS 3.25.1 release notes
nss 3.25.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_25_1_rtm/src/ new in nss 3.25.1 new functionality no new functionality is introduced in this release.
NSS 3.26.2 release notes
nss 3.26.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_26_2_rtm/src/ new in nss 3.26.2 new functionality no new functionality is introduced in this release.
NSS 3.26 release notes
nss 3.26 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_26_rtm/src/ new in nss 3.26 new functionality the selfserv test utility has been enhanced to support alpn (http/1.1) and 0-rtt added support for the system-wide crypto policy available on fedora linux, see http://fedoraproject.org/wiki/changes/cryptopolicy introduced build flag nss_disable_libpkix which allows compilation of nss without the libpkix library notable changes in nss ...
NSS 3.27.1 release notes
nss 3.27.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_1_rtm/src/ new in nss 3.27.1 new functionality no new functionality is introduced in this release.
NSS 3.27.2 Release Notes
nss 3.27.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_2_rtm/src/ new in nss 3.27.2 new functionality no new functionality is introduced in this release.
NSS 3.27 release notes
nss 3.27 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls key exchange handshake (ssl_namedgroupconfig).
NSS 3.28.1 release notes
nss 3.28.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_1_rtm/src/ new in nss 3.28.1 no new functionality is introduced in this release.
NSS 3.28.2 release notes
nss 3.28.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_2_rtm/src/ incorrect version number note the version numbers embedded in the nss 3.28.2 are wrong (it reports itself as version 3.28.1).
NSS 3.28.3 release notes
nss 3.28.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_28_3_rtm/src/ new in nss 3.28.3 new functionality no new functionality is introduced in this release.
NSS 3.28.4 release notes
nss 3.28.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_4_rtm/src/ new in nss 3.28.4 no new functionality is introduced in this release.
NSS 3.28.5 release notes
nss 3.28.5 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_5_rtm/src/ new in nss 3.28.5 no new functionality is introduced in this release.
NSS 3.29.1 release notes
nss 3.29.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_29_1_rtm/src/ new in nss 3.29.1 new functionality no new functionality is introduced in this release.
NSS 3.29.2 release notes
nss 3.29.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_29_2_rtm/src/ new in nss 3.29.2 new functionality no new functionality is introduced in this release.
NSS 3.29.3 release notes
nss 3.29.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_3_rtm/src/ new in nss 3.29.3 no new functionality is introduced in this release.
NSS 3.29.5 release notes
nss 3.29.5 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_5_rtm/src/ new in nss 3.29.5 no new functionality is introduced in this release.
NSS 3.29 release notes
nss 3.29 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_rtm/src/ notable changes in nss 3.29 fixed a nss 3.28 regression in the signature scheme flexibility that causes connectivity issues between ios 8 clients and nss servers with ecdsa certificates (bug1334114).
NSS 3.30.1 release notes
nss 3.30.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_1_rtm/src/ new in nss 3.30.1 no new functionality is introduced in this release.
NSS 3.30.2 release notes
nss 3.30.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_2_rtm/src/ new in nss 3.30.2 no new functionality is introduced in this release.
NSS 3.30 release notes
nss 3.30 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_rtm/src/ new in nss 3.30 new functionality in the pkcs#11 root ca module (nssckbi), cas with positive trust are marked with a new boolean attribute, cka_nss_mozilla_ca_policy, set to true.
NSS 3.31.1 release notes
nss 3.31.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_31_1_rtm/src/ new in nss 3.31.1 no new functionality is introduced in this release.
NSS 3.31 release notes
nss 3.31 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_31_rtm/src/ new in nss 3.31 new functionality allow certificates to be specified by rfc7512 pkcs#11 uris.
NSS 3.32 release notes
nss 3.32 source distributions are available on ftp.mozilla.org, for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_32_rtm/src/ notable changes in nss 3.32 various minor improvements and correctness fixes.
NSS 3.33 release notes
nss 3.33 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_33_rtm/src/ notable changes in nss 3.33 tls compression is no longer supported.
NSS 3.34.1 release notes
nss 3.34.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_34_1_rtm/src/ notable changes in nss 3.34.1 the following ca certificate was re-added.
NSS 3.34 release notes
nss 3.34 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_34_rtm/src/ notable changes in nss 3.34 the following ca certificates were added: cn = gdca trustauth r5 root sha-256 fingerprint: bf:ff:8f:d0:44:33:48:7d:6a:8a:a6:0c:1a:29:76:7a:9f:c2:bb:b0:5e:42:0f:71:3a:13:b9:92:89:1d:38:93 trust flags: websites cn = ssl.com root certification authority rsa sha-256 fingerprint: 85:66:6a:56:2e:e0:be:5c:e9...
NSS 3.35 release notes
nss 3.35 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_35_rtm/src/ new in nss 3.35 new functionality tls 1.3 support has been updated to draft -23.
NSS 3.36.1 release notes
nss 3.36.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_1_rtm/src/ new in nss 3.xx new functionality no new functionality is introduced in this release.
NSS 3.36.2 release notes
nss 3.36.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_2_rtm/src/ new in nss 3.36.2 new functionality no new functionality is introduced in this release.
NSS 3.36.4 release notes
nss 3.36.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_4_rtm/src/ new in nss 3.36.4 new functionality no new functionality is introduced in this release.
NSS 3.36.5 release notes
nss 3.36.5 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_5_rtm/src/ new in nss 3.36.5 new functionality no new functionality is introduced in this release.
NSS 3.36.6 release notes
nss 3.36.6 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_6_rtm/src/ new in nss 3.36.6 new functionality no new functionality is introduced in this release.
NSS 3.36.7 release notes
nss 3.36.7 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_7_rtm/src/ other releases are available in nss releases.
NSS 3.36.8 release notes
nss 3.36.8 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_8_rtm/src/ other releases are available in nss releases.
NSS 3.36 release notes
nss 3.36 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_rtm/src/ (make a link) new in nss 3.36 new functionality experimental apis for tls session cache handling.
NSS 3.37.1 release notes
nss 3.37.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_37_1_rtm/src/ new in nss 3.37.1 new functionality no new functionality is introduced in this release.
NSS 3.37.3 release notes
nss 3.37.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_37_3_rtm/src/ new in nss 3.37.3 new functionality no new functionality is introduced in this release.
NSS 3.38 release notes
nss 3.38 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_38_rtm/src/ new in nss 3.38 new functionality added support for the tls record size limit extension.
NSS 3.39 release notes
nss 3.39 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_39_rtm/src/ new in nss 3.39 new functionality the tstclnt and selfserv utilities added support for configuring the enabled tls signature schemes using the -j parameter.
NSS 3.40.1 release notes
nss 3.40 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_40_1_rtm/src/ new in nss 3.40.1 new functionality no new functionality is introduced in this release.
NSS 3.40 release notes
nss 3.40 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_40_rtm/src/ new in nss 3.40 new functionality the draft-00 version of encrypted sni support is implemented tstclnt now takes -n option to specify encrypted sni key new functions none notable changes in nss 3.40 the mozilla::pkix library has been ported from mozilla psm to nss.
NSS 3.41.1 release notes
nss 3.41.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_41_1_rtm/src/ other releases are available in nss releases.
NSS 3.41 release notes
nss 3.41 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_41_rtm/src/ new in nss 3.41 new functionality bug 1252891 - implemented eku handling for ipsec ike.
NSS 3.42.1 release notes
nss 3.42.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_42_1_rtm/src/ other releases are available in nss releases.
NSS 3.42 release notes
nss 3.42 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_42_rtm/src/ other releases are available in nss releases.
NSS 3.43 release notes
nss 3.43 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_43_rtm/src/ other releases are available in nss releases.
NSS 3.44.2 release notes
nss 3.44.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_2_rtm/src/ other releases are available in nss releases.
NSS 3.44.3 release notes
nss 3.44.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_3_rtm/src/ other releases are available in nss releases.
NSS 3.44.4 release notes
nss 3.44.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_4_rtm/src/ other releases are available in nss releases.
NSS 3.44 release notes
nss 3.44 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_rtm/src/ other releases are available in nss releases.
NSS 3.46.1 release notes
nss 3.46.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_46_1_rtm/src/ other releases are available in nss releases.
NSS 3.46 release notes
nss 3.46 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_46_rtm/src/ other releases are available in nss releases.
NSS 3.47.1 release notes
nss 3.47.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_47_1_rtm/src/ other releases are available in nss releases.
NSS 3.48.1 release notes
nss 3.48.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_48_1_rtm/src/ other releases are available in nss releases.
NSS 3.48 release notes
nss 3.48 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_48_rtm/src/ other releases are available in nss releases.
NSS 3.49.1 release notes
nss 3.49.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_1_rtm/src/ other releases are available in nss releases.
NSS 3.49.2 release notes
nss 3.49.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_2_rtm/src/ other releases are available in nss releases.
NSS 3.49 release notes
nss 3.49 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_rtm/src/ other releases are available in nss releases.
NSS 3.50 release notes
nss 3.50 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_50_rtm/src/ other releases are available in nss releases.
NSS 3.51.1 release notes
nss 3.51.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_51_1_rtm/src/ other releases are available in nss releases.
NSS 3.51 release notes
nss 3.51 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_51_rtm/src/ other releases are available in nss releases.
NSS 3.52.1 release notes
nss 3.52.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_52_1_rtm/src/ other releases are available in nss releases.
NSS 3.52 release notes
nss 3.52 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_52_rtm/src/ other releases are available in nss releases.
NSS 3.53.1 release notes
nss 3.53.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_53_1_rtm/src/ other releases are available in nss releases.
NSS 3.53 release notes
nss 3.53 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_53_rtm/src/ other releases are available in nss releases.
NSS 3.54 release notes
nss 3.54 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_54_rtm/src/ other releases are available in nss releases.
NSS 3.55 release notes
nss 3.55 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_55_rtm/src/ other releases are available in nss releases.
NSS 3.56 release notes
nss 3.56 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_56_rtm/src/ other releases are available in nss releases.
NSS Sample Code Sample1
the admin should make sure the keys actually // came from the correct source.
NSS Sample Code sample5
the public key & private key to use are * sourced from a base64-encoded der subjectpublickeyinfo structure, * and a base64-encoded der privatekeyinfo structure.
Hashing - sample 1
/* this source code form is subject to the terms of the mozilla public * license, v.
nss tech note4
secstatus cert_findsubjectkeyidexten (certcertificate *cert, secitem *retitem); for more information browse through the nss source code online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ documentation on some cert funcs http://www.mozilla.org/projects/security/pki/nss/ref/ssl/sslcrt.html ...
nss tech note5
using nss to perform miscellaneous cryptographic operations nss technical note: 5 nss project info is at http://www.mozilla.org/projects/security/pki/nss/ you can browse the nss source online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ be sure to look for sample code first for things you need to do.
NSS release notes template
nss 3.xx source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_xx_rtm/src/ (make a link) new in nss 3.xx new functionality either: no new functionality is introduced in this release.
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
not doing so is a common source of problems.
PKCS11 module installation
provisioning pkcs #11 modules using the pkcs11 api starting with firefox 58, extensions can use the pkcs11 browser extension api to enumerate pkcs #11 modules and make them accessible to the browser as sources of keys and certificates.
Sample manual installation
after building nss with "gmake nss_build_all", the resulting build can be found in the nss source tree as follows: nss header files: mozilla/dist/public/nss nspr header files: mozilla/dist/<obj-dir>/include nspr/nss shared libs: mozilla/dist/<obj-dir>/lib nss binary executables: mozilla/dist/<obj-dir>/bin.
NSPR functions
call pr_cleanup to shut down nspr and clean up its resources.
NSS tools : crlutil
til -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 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.
NSS tools : modutil
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [2]http://www.mozilla.org/projects/security/pki/nss/.
NSS tools : pk12util
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
NSS tools : ssltab
additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
NSS tools : ssltap
additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
NSS tools : vfychain
additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
NSS tools : vfyserv
name vfyserv — tbd synopsis vfyserv description the vfyserv tool verifies a certificate chain options additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
NSS Tools cmsutil
-i infile use infile as a source of data (default is stdin).
NSS Tools dbck-tasks
this file could be mailed to a mail alias to assist in finding the source of database corruption.
NSS tools : crlutil
MozillaProjectsNSStoolscrlutil
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 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.
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [2]http://www.mozilla.org/projects/security/pki/nss/.
NSS tools : pk12util
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
NSS tools : signver
MozillaProjectsNSStoolssignver
o setting up the shared nss database https://wiki.mozilla.org/nss_shared_db_howto o engineering and technical information about the shared nss database https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
NSS tools : ssltap
MozillaProjectsNSStoolsssltap
additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
NSS tools : vfychain
additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
Rhino community
here are some additional resources for help: mailing list rhino discussions happen on the mozilla-rhino group on google groups.
Rhino Debugger
current limitations: no breakpoint menu using the rhino javascript debugger the mozilla rhino javascript engine includes a source-level debugger for debugging javascript scripts.
Rhino FAQ
you've likely missed placing the security.properties file in your class path at org.mozilla.javascript.resources.
Rhino optimization
function call targets are speculatively pre-cached (based on the name used in the source) so that dispatching can be direct, pending runtime confirmation of the actual target.
The JavaScript Runtime
compilation of javascript source to class files is supported.
Rebranding SpiderMonkey (1.8.5)
after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: cd js/src autoconf-2.13 for the remainder of this document wherever you see the text $brand you will substitute that text with the name of your brand.
FOSS
feel free to add your own spidermonkey-based open source projects (and if necessary add categories)!
Bytecodes
the javascript frontend constructs an ast from the source text, then emits stack-based bytecodes from that ast as a part of the jsscript data structure.
Statistics API
var prefs = require("api-utils/preferences-service"); components.utils.import('resource://gre/modules/services.jsm'); function observer(subject, topic, json) { var data = json.parse(json); // process the data } prefs.set("javascript.options.mem.notify", true); services.obs.addobserver(observer, "garbage-collection-statistics", false); the toplevel json object contains these fields: timestamp: integer (microseconds) - time at which the gc ended, measured from epoch.
Garbage collection
source files gc/gc.{h,cpp} defines gc internal api functions, including entry points to trigger gc.
Invariants
some nameexpressions might refer to a variable or global; or might at runtime turn out to reference another object property, due to with, or a variable that isn't in the source code at all but was injected into a local scope by eval.
Tracing JIT
a fragmento is a resource-management object that allocates and stores a set of fragments and pages, and manages their lifecycle.
JS::Add*Root
typically name is a static string constant, identifying the source location of the call to js::addnamed*root for debugging purposes.
JS::CompileOffThread
if maybecx is not specified, the resources will be freed, but no script will be returned.
JS::Value
the now-deprecated jsval methods allowed jsval_to_object(val) when jsval_is_null(val), but this was a source of constant bugs.
JSClass
this is called at some point after the object becomes unreachable, and can be used to free any additional resources associated with the object.
JSFinalizeOp
the finalizer's job is to clean up any resources allocated by the instance which wouldn't normally be cleaned up by the garbage collector (private data stored in the object by the application, file handles, etc.) finalizers must never store a reference to obj.
JSFunction
different closures (function objects) generated from the same source code may share the same jsfunction.
JSScript
see also uxp source jsscript.h uxp source jsscript.cpp ...
JS_Add*Root
typically name is a static string constant, identifying the source location of the call to js_addnamedroot for debugging purposes.
JS_CompileUTF8File
compile a script, reading the source code from a file.
JS_CompileUTF8FileHandle
compile a script, reading the source code from a stdio file.
JS_DropExceptionState
description this function destroys the specified jsexceptionstate object, unrooting as necessary any attached exception object and freeing the memory resources associated with the jsexceptionstate object.
JS_GetFunctionId
examples the name returned by js_getfunctiondisplayid is the same as returned by js_getfunctionid if the function explicitly has a name listed in the source, or if not it is an intelligently guessed name for the function based on its context in the source.
JS_ReportErrorNumber
the source code seems to say we ignore the .exntype, actually, but surely i'm just missing something.) otherwise, if any javascript code is running in cx (for example, if the caller is a jsnative that was called from a script), then an error object is created and becomes the pending exception.
JS_ReportOutOfMemory
call js_reportallocationoverflow if an operation fails because it tries to use more memory (or more of some other resource) than the application is designed to handle.
JS_SetContextCallback
for example, the callback my call js_getcontextprivate(cx) in order to free up resources previously allocated by js_setcontextprivate.
JS_SetGCZeal
with gc zeal enabled, gc-related crashes are much easier to reproduce (they happen more reliably) and debug (they happen sooner, closer to the source of the bug).
JSDBGAPI
tected evaluating debug code js_evaluateinstackframe examining object properties typedef jspropertydesc jspd_enumerate jspd_readonly jspd_permanent jspd_alias jspd_argument jspd_variable jspd_exception jspd_error typedef jspropertydescarray js_propertyiterator js_getpropertydesc js_getpropertydescarray js_putpropertydescarray hooks js_setdebuggerhandler js_setsourcehandler js_setexecutehook js_setcallhook js_setobjecthook js_setthrowhook js_setdebugerrorhook js_setnewscripthook js_setdestroyscripthook js_getglobaldebughooks js_setcontextdebughooks memory usage js_getobjecttotalsize js_getfunctiontotalsize js_getscripttotalsize system objects js_issystemobject js_newsystemobject profiling these functions can be used to profile a sp...
SpiderMonkey 31
xxx list removed features here spidermonkey 31 is not binary-compatible with previous releases, nor is it source-code compatible.
SpiderMonkey 38
xxx list removed features here spidermonkey 38 is not binary-compatible with previous releases, nor is it source-code compatible.
SpiderMonkey 52
you can download full source code from treeherder, by going to the mozilla-esr52 repository and clicking on the first sm(pkg) link you see.
SpiderMonkey releases
we do happily accept patches, and make some effort to keep the tip of the gecko tree minimally working as an embeddable source package.
Running Parsemark
the test files are not checked into the source tree because they're non-mozilla js code.
Thread Sanitizer
building firefox getting the source if you don't have a source code repository clone yet, you need to get yourself a clone of mozilla-central.
Zest
it is completely free, open source and can be included in any tool whether open or closed, free or commercial.
The Rust programming language
rust is a new open-source systems programming language created by mozilla and a community of volunteers, designed to help developers create fast, secure applications which take full advantage of the powerful features of modern multi-core processors.
Handling Mozilla Security Bugs
if the group decides to publish a warning, the module owner, a peer, or some other person they may designate will post this message to the known vulnerabilities page (which will be the authoritative source for this information) and will also send a copy of this message to an appropriate moderated mailing list and/or newsgroup (e.g., netscape.public.mozilla.announce and/or some other newsgroup/list established specifically for this purpose).
Supported build targets
page moved to the in-tree documentation: https://firefox-source-docs.mozilla.org/build/buildsystem/supported-configurations.html ...
XForms Accessibility
resources below you will find a list of xforms/accessiblity resources: mozilla accessibility project at mozilla.org xforms specification at w3.org mozilla xforms project at mozilla.org ui xforms elements references at this site ...
Embedded Dialog API
(testgtkembed doesn't override promptservice; it uses the default dialogs.) both are source for a library set up as a mozilla component and factory.
Feed content access API
ta, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, 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.
History Service Design
certain scheme are excluded from history, so they will never be added, for example: about, view-source, chrome.
Places Developer Guide
var ci = components.interfaces; var cc = components.classes; var cu = components.utils; // import placesutils cu.import("resource://gre/modules/placesutils.jsm"); cu.import("resource://gre/modules/services.jsm"); // create the backup file var jsonfile = services.dirsvc.get("profd", ci.nsilocalfile); jsonfile.append("bookmarks.json"); jsonfile.create(ci.nsilocalfile.normal_file_type, 0600); // export bookmarks in json format to file placesutils.backupbookmarkstofile(jsonfile); // restore bookmarks from the json file // no...
Querying Places
the defaults for these objects will result in a query that returns all of your browser history in a flat list: chromeutils.definemodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); // no query options set will get all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none.
Retrieving part of the bookmarks tree
when you're done, be sure to close the container to free up the resources.
Using the Places annotation service
copypageannotations(asourceuri, adesturi, aoverwritedest); copyitemannotations(asourceitemid, adestitemid, aoverwritedest); copies all the annotations from one page/item to another.
Using the Places history service
it gives the old and new channels to the history service so that the source page of the redirect can be determined.
Using the Places keywords API
using the keywords api the keywords api is a promise-based api available through the placesutils module: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazymodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); setting a keyword for an url the insert() method accepts a keyword entry object describing the keyword to insert.
STEEL
the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/steel/application;1"].getservice(components.interfaces.steeliapplication); other resources steel development plan.
Accessing the Windows Registry Using XPCOM
finally, note that you should close the key when you are done to avoid wasting system resources.
Creating a Python XPCOM component
for example: xpidl.exe -m typelib -w -v -i c:\source\mozilla\obj-i686-pc-mingw32\dist\idl foo.idl xpidl will then create nsipysimple.xpt, which should be placed correctly (e.g., in the 'components' directory).
XPCOM changes in Gecko 2.0
for example, in your component's javascript code : components.utils.import("resource://gre/modules/xpcomutils.jsm"); function mycomponent() { } mycomponent.prototype = { // this must match whatever is in chrome.manifest!
Component Internals
these classes are described in the mozilla string guide (see gecko resources).
Mozilla internal string guide
nsautostring mlocalname; }; raw character pointers promiseflatstring() and promiseflatcstring() can be used to create a temporary buffer which holds a null-terminated buffer containing the same value as the source string.
How To Pass an XPCOM Object to a New Window
a more useful example is available in the source code: toolkit/components/help/content/contexthelp.js#61 if you want to be able to call functions within an xpcom object from a xul window's code, you can do so if you pass the xpcom object as one of the arguments to the window creation method.
Components.stack
see usage examples in the mozilla source tree.
Components.utils.Sandbox
debug() for more information on the built-in sandbox functions, please consult the source code.
Development
source the latest source code is available on the mozilla trunk, in the extensions/java/xpcom directory.
JavaXPCOM
documentation javaxpcom development how to get and build the source, as well as how to view and report bugs.
PlXPCOM
the resources here provide information about this language binding and how to use it.
PyXPCOM
other resources pythonext - extension that provides pyxpcom samples - demo applications using pyxpcom community python-xpcom bindings mailing list (activestate) #pyxpcom on irc.mozilla.org source code the pyxpcom code is available here: http://hg.mozilla.org/pyxpcom/ to build pyxpcom, see building pyxpcom.
RbXPCOM
you can find additional information using the resource links below.
XPCshell Test Manifest Expressions
note that it currently seems like neither this list nor the one on the official docs is exhaustive, so if you need something and it's not here, best check the source code!
xpcshell
it should be executed under the window command prompt source_directory/obj-xxxxx/dist/bin> xpcshell.exe using the latest version of javascript at present, xpcshell doesn't use the latest version of javascript, so newer language features, such as the let statement introduced in javascript 1.7, are not available.
nsCStringEncoding
ns_cstring_encoding_ascii conversion between ascii and utf-16 assumes that all bytes in the source string are 7-bit ascii and can be inflated to utf-16 by inserting null bytes.
imgIContainer
obsolete since gecko 2.0 kblendsource 0 all color components of the frame, including alpha, const long kblendover = 1; // the frame should be composited onto the output buffer.
imgIEncoder
blend=[source|over] -- default: "source" how to render the new frame on the canvas.
mozIStorageStatement
finalize() finalizes a statement which releases all resources that were allocated for it.
nsIAbCard
void copy(in nsiabcard srccard) parameters srccard the source card to copy values from.
nsIApplicationCacheContainer
see also offline resources in firefox nsiapplicationcache nsiapplicationcachechannel nsiapplicationcacheservice nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsICache
the cache service decides which cache device to use based on "some resource management calculation." store_in_memory 1 the storage policy of a cache entry determines the device(s) to which it belongs.
nsICacheService
at the time of writing there is no documentation for nsicachestorageservice but comments are available in the source.
nsIContentFrameMessageManager
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisyncmessagesender this interface provides the environment for scripts that are loaded into content frames using the nsiframescriptloader interface.
nsIContentSecurityPolicy
boolean permitsancestry( in nsidocshell docshell ); parameters docshell containing the protected resource.
nsIConverterInputStream
void init( in nsiinputstream astream, in string acharset, in long abuffersize, in prunichar areplacementchar ); parameters astream the source stream which is read and converted.
nsICookieManager2
to create an object implementing this interface: components.utils.import("resource://gre/modules/services.jsm"); var cookieservice = services.cookies; method overview void add(in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 aexpiry); boolean cookieexists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8string ahost...
nsIDOMNSHTMLDocument
for the gethtml command, the current selection is returned as an html source fragment.
nsIDOMWindow
udoelt); nsiselection getselection(); void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void sizetocontent(); attributes attribute type description applicationcache nsidomofflineresourcelist get the application cache object for this window.
nsIDOMWindow2
attributes attribute type description applicationcache nsidomofflineresourcelist the application cache object for this window.
nsIDirIndex
because this has no reference back to their original source, changing these attributes won't affect the directory.
nsIDirectoryEnumerator
methods close() closes the directory being enumerated, releasing the system resource.
getFile
starting with firefox 35, this is contents/resources.
nsIDownload
source nsiuri the source uri of the download.
nsIDownloadProgressListener
note: if source and destination are identical, which is possible in case of file urls or chrome urls, this is called even in gecko 1.9.2.
nsIException
this is the location that caused the error, which may or may not be a source file location.
nsIFeed
textinput nsiwritablepropertybag2 information about a text box that can be displayed along with the feed by aggregators that support it, to allow the reader to send a response back to the source of the feed.
nsIFeedResult
stylesheet nsiuri an xslt stylesheet available to transform the source of the feed.
nsIFileURL
the url scheme need not be file:, since other local protocols may map urls to files (e.g., resource:).
nsIFrameScriptLoader
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisupports this interface is used to load frame scripts.
nsIGlobalHistory2
note: docshell will not filter out uri schemes like chrome:, data:, about: and view-source:.
nsIHttpChannel
this is the address (uri) of the resource from which this channel's uri was obtained (see rfc2616 section 14.36).
nsIHttpServer
an example : https://github.com/laurentj/slimerjs/blob/master/src/modules/webserver.jsm var exported_symbols = ["create"]; components.utils.import("resource://gre/modules/services.jsm"); function create() { var server = components.classes["@mozilla.org/server/jshttp;1"] .createinstance(components.interfaces.nsihttpserver); return { get objectname () { return "webserver"; }, /** * @param integer|string port port or "host:port" * @param object opt optional options.
nsIInputStream
moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire size of the underlying data source.
nsILocalFileMac
filesizewithresfork print64 returns the combined size of both the data fork and the resource fork (if present) rather than just the size of the data fork as returned by getfilesize() read only.
nsIMacDockSupport
this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-release/source/browser/base/content/browser.js#1562 this is seen here: if you were to copy and follow that example you would replace the default native menu.
nsIMarkupDocumentViewer
hintcharacterset acstring hintcharactersetsource print32 minfontsize long the minimum font size to allow.
nsIMemory
this allows nsiobserver implementations to observe multiple nsimemory instances and determine the source of memory pressure notifications.
nsIMessageBroadcaster
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "broadcasters" don't have a single "other side" that they send messages to, but rather a set of subordinate message managers.
nsIMessageListener
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisupports this interface is used to receive messages sent using the nsimessagebroadcaster, nsimessagesender, or nsisyncmessagesender interfaces.
nsIMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message senders enable clients to send asynchronous messages to a single "other side".
nsIMessenger
message services are implemented for different protocols such as imap, pop3, or local mail sources.
nsIMicrosummary
since generators and pages can be remote resources, and we need them to generate the content, this may not always be available.
Building an Account Manager Extension
components.utils.import("resource://gre/modules/xpcomutils.jsm"); //class constructor function devmoaccountmanagerextension() {}; // class definition devmoaccountmanagerextension.prototype = { name : "devmo-account", chromepackagename : "example@mozilla.org", showpanel: function(server) { //this panel is only shown for imap accounts...
nsIMsgMessageService
amessageuri rdf resource that describes the message adisplayconsumer msgwindow nsimsgwindow for progress and status feedback aurllistener an nsiurllistener.
nsIMsgSearchNotify
void onsearchdone(in nsresult status); /* * until we can encode searches with a uri, this will be an * out-of-bound way to connect a set of search terms to a datasource */ /* * called when a new search begins */ void onnewsearch(); }; ...
nsINavHistoryQueryOptions
redirects_mode_source 1 include redirected-from pages but not redirected-to pages in the results.
nsIObserverService
this usually corresponds to the source of the notification, but could be defined differently depending on the notification topic and may even be null.
nsIProcessScriptLoader
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisupports this interface is used by parent process message managers to load scripts into a child process.
nsIRequest
this may have the effect of closing any underlying transport (in order to free up resources), although any open streams remain logically opened and will continue delivering data when the transport is resumed.
nsIScriptableInputStream
moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire size of the underlying data source.
nsISpeculativeConnect
the code implementing this method may use this information to start a tcp and/or ssl level handshake for that resource immediately so that it is ready (or at least in the process of becoming ready) when the transaction is actually submitted.
nsIStreamListener
void ondataavailable( in nsirequest arequest, in nsisupports acontext, in nsiinputstream ainputstream, in unsigned long aoffset, in unsigned long acount ); parameters arequest an nsirequest indicating the source of the data.
nsISupports
violates the xpcom interface guidelines release() notifies the object that an interface pointer has been destroyed and any resources the object held on behalf of the client can be released.
nsISyncMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "senders" have a single "other side" to which messages are sent.
nsIUpdateItem
objectsource astring returns a js object source representing an nsiupdateitem.
nsIVersionComparator
see here: nsixulappinfo components.utils.import("resource://gre/modules/services.jsm"); var curentbrowserversion = services.appinfo.platformversion; //example: '31.*' var comparetothisversion = '25.*'; var compareresult = services.vc.compare(curentbrowserversion, comparetothisversion); if (compareresult == -1) { //currentbrowserversion is less than '25.*' (comparetothisversion) } else if (compareresult == 0) { //currentbrowserversion is '25.*...
nsIWebBrowserChrome2
if statustype is status_link, then this may be a dom node corresponding to the source of the link.
nsIWebProgressListener
cu.reporterror("saw: " + data.name + " -- passing: " + json.stringify(data)); }); /** * below is the contents of example-framescript.js */ const {classes: cc, interfaces: ci, utils: cu} = components; cu.import("resource://gre/modules/xpcomutils.jsm"); var mylistener = { queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onstatechange: function(awebprogress, arequest, aflag, astatus) { let win = awebprogress.domwindow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) ...
nsIXMLHttpRequest
code for opening a simple http request from a xul 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; ...
nsIXSLTException
inherits from: nsiexception last changed in gecko 1.7 attributes attribute type description sourcenode nsidomnode the context node, may be null.
nsIZipReader
var zr = cc["@mozilla.org/libjar/zip-reader;1"].createinstance(ci.nsizipreader); cu.import('resource://gre/modules/osfile.jsm'); cu.import('resource://gre/modules/fileutils.jsm'); var reusablestreaminstance = cc['@mozilla.org/scriptableinputstream;1'].createinstance(ci.nsiscriptableinputstream); var pathtoxpitoread = os.path.join(os.constants.path.profiledir, 'extensions', 'portabletester@jetpack.xpi'); var nsifilexpi = new fileutils.file(pathtoxpitoread); //se...
XPCOM Interface Reference by grouping
omgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouc...
nsIAbCard/Thunderbird3
void copy(in nsiabcard srccard) parameters srccard the source card to copy values from.
Troubleshooting XPCOM components registration
double check your guids in your install.rdf with your sourcecode, and then check them again.
Getting Started Guide
nscomptr is defined in the source files: xpcom/base/nscomptr.h xpcom/base/nscomptr.cpp ...though you probably don't want to look in there, just yet.
Weak reference
see also the source xpcom/base/nsiweakreference.idl xpcom/glue/nsweakreference.h xpcom/glue/nsweakreference.cpp xpcom ownership guidelines using nscomptr original document information author: scott collins last updated date: september 23, 2000 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative common...
xptcall FAQ
the growing list: porting status where can i find other resources?
XPCOM
this article will show you how to use the available interfaces in several mozilla products.aggregating the in-memory datasourcealready_addrefedalready_addrefed in association with nscomptr allows you to assign in a pointer without addrefing it.binary compatibilityif mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail.
Test-Info
running test-info locally "test-info" is a mach command and can be run from any source tree.
ASan Nightly Project
moved in-tree: https://firefox-source-docs.mozilla.org/tools/sanitizer/asan_nightly.html ...
Clang static analysis
moved to https://firefox-source-docs.mozilla.org/code-quality/static-analysis.html ...
Fuzzing Interface
documentation moved in-tree: https://firefox-source-docs.mozilla.org/tools/fuzzing/fuzzing_interface.html ...
Measuring Code Coverage on Firefox
documentation moved in-tree: https://firefox-source-docs.mozilla.org/tools/code-coverage/index.html ...
Testing Mozilla code
before you can even get your code committed into the source tree, you have to test it, and larger patches have to have automated tests.
Address Book examples
the best example of a binary implementation of an address book is the os x address book source code.
Creating a gloda message query
you can find the file, which includes doxygen markup of sorts, here: https://hg.mozilla.org/comm-central/file/tip/mailnews/db/gloda/modules/gloda.js components.utils.import("resource:///modules/gloda/public.js"); create the query let query = gloda.newquery(gloda.noun_message); add constraints to the query each constraint function takes one or more arguments which are "or"ed together.
DB Views (message lists)
see the tutorial for information about styling trees using css, and the thunderbird source for some example css.
Mail event system
for each global listener, it calls onintpropertychanged: listener->onintpropertychanged(folder, ktotalmessagesatom, 4, 5); the folder datasource is a listener on all folders and receives this notification.
Mailnews and Mail code review requirements
(you could still ask a reviewer to approve such things, though.) the patch does not change public test frameworks, specifically, nothing in mailnews/test/resources/ or mail/test/mozmill/shared-modules/.
The libmime module
there is one header file and one source file for each class (for example, the mimeinlinetext class is defined in "mimetext.h" and "mimetext.c".) each header file follows the following boiler-plate form: typedefs these come first to avoid circular dependencies.
Demo Addon
it lets you iterate over any collection and transforms your collection elements in the given objects, to use fixiterator, you have to import it with cu.import("resource:///modules/iteratorutils.jsm");.
FAQ
(duplicate content has been removed from this page.) other resources can be found on the thunderbird extension development portal page.
Finding the code for a feature
the second is mozilla's source code search tool mxr.
Folders and message lists
components.utils.import("resource:///modules/iteratorutils.jsm"); for (let msghdr in fixiterator(myfolder.messages, components.interfaces.nsimsgdbhdr)) { // do something with msghdr...
Thunderbird extensions
read the source using a fancy interface; you can often find tests that demonstrate what you're trying to achieve.
libmime content type handlers
sample content type handler plugin to see an example of a content type handler plugin, the source for the handler of the content type "text/calendar" can be viewed at the following link: calendar plugin note: this plugin simply creates a blue table in the output stream to identify the fact that it is operational, but the basic constructs of what is needed to build a functional content type handler can be seen.
Thunderbird
currently one of the most popular open source email clients, it is used by tens of millions of people around the world to bring together all their email accounts, chat, newsgroup and feed reading in a familiar high-productivity environment.
Using popup notifications
components.utils.import('resource://gre/modules/popupnotifications.jsm'); var notify = new popupnotifications(gbrowser, document.getelementbyid("notification-popup"), document.getelementbyid("notification-popup-box")); var notification = notify.show( // browser gbrowser.selectedbrowser, // popup id "pdes-popup", // message "hi, there!, i'm gonna show you something today!!", // anchor id ...
Using tab-modal prompts
the updated prompt documentation can be found in the firefox source docs.
Zombie compartments
js-compartment([system principal], 0x7f10f1250000) compartment(atoms) js-compartment(about:home) js-compartment(about:blank) compartment([system principal], resource://gre/modules/addons/xpiprovider.jsm) when looking at user compartments there are a couple of things to be aware of.
Add to iPhoto
is.cfstringref, // returns a new cfstringref ctypes.voidptr_t, // allocator ctypes.jschar.ptr, // pointer to the unicode string ctypes.int32_t); // length of the string cfstringcreatewithcharacters() is used to create a new cfstring object using a unicode string as the source string, which is copied into the new cfstring object.
Using Objective-C from js-ctypes
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let id = ctypes.structtype("objc_object").ptr; let sel = ctypes.structtype("objc_selector").ptr; let bool = ctypes.signed_char; let lib = ctypes.open(ctypes.libraryname("objc")); let objc_getclass = lib.declare("objc_getclass", ctypes.default_abi, id, ctypes.char.ptr); let sel_registername = lib.declare("sel_registername", ctypes.
FunctionType
method overview methods inherited from ctype ctype array([n]) string tosource() string tostring() functiontype cdata functiontype cdata cannot be constructed.
ctypes
credit for this example is to nmaier (stackoverflow :: getting tb_button is crashing and not working) example of cast and functiontype on windows components.utils.import("resource://gre/modules/ctypes.jsm"); var kernel = ctypes.open("kernel32.dll"); var hmodule = ctypes.uint32_t; var hwnd = ctypes.uint32_t; var lpctstr = ctypes.jschar.ptr; var lpcstr = ctypes.char.ptr; var loadlibrary = kernel.declare("loadlibraryw", ctypes.winapi_abi, hmodule, lpctstr); var getprocaddress = kernel.declare("getprocaddress", ctypes.winapi_abi, ctypes.void_t.ptr, hmodule, lpcstr); var huse...
js-ctypes reference
it is obtained by by loading the ctypes module: components.utils.import("resource://gre/modules/ctypes.jsm"); you can use the ctypes object to load libraries, construct types, and perform miscellaneous tasks such as type casting.
PKCS #11 Netscape Trust Objects - Network Security Services
definitions definitions for all of the above values are defined in pkcs11n.h in the nss source.
Blocking By Domain - Plugins
the initial contents of the third-party plugin block list are based on disconnect's open source blocklist.
Drawing and Event Handling - Plugins
if either window or window->window is null, the plug-in must not perform any additional graphics operations on the window and should free any associated resources.
Version, UI, and Status Information - Plugins
the browser always displays the last status line message it receives, regardless of the message source.
Gecko Plugin API Reference - Plugins
npn_hasproperty npn_hasmethod npn_setexception npclass structures npanycallbackstruct npbyterange npembedprint npevent npfullprint npp np_port npprint npprintcallbackstruct nprect npregion npsaveddata npsetwindowcallbackstruct npstream npwindow constants error codes result codes plug-in version constants version feature constants external resources external projects and articles for plugin creation original document information copyright information: netscape communication ...
DOM Inspector - Firefox Developer Tools
how to build the dom inspector blog post on building the dom inspector from source.
Application - Firefox Developer Tools
finding an example if you want to test this functionality and you don't have a handy pwa available, you can grab one of our simple examples to use: add to homescreen demo: shows pictures of foxes (source code | live version) js13kpwa demo: show information on entries to the js13k annual competition (source code | live version) how to debug service workers inspect web app manifests ...
Break on DOM mutation - Firefox Developer Tools
inline variable preview new in firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through.
Breaking on exceptions - Firefox Developer Tools
to instruct the debugger to pause on an exception, tick these checkboxes in the breakpoints list: pause on exceptions pause on caught exceptions when an exception occurs, the line where it occurs is highlighted in the source pane, with a squiggly red line under the problematic code.
Examine, modify, and watch variables - Firefox Developer Tools
if a variable exists in the source but has been optimized away by the javascript engine, then it is shown in the variables view, but is given the value (optimized away), and is not editable.
Set a conditional breakpoint - Firefox Developer Tools
to set a conditional breakpoint, activate the context menu in the source pane, on the line where you want the breakpoint, and select "add conditional breakpoint".
Step through code - Firefox Developer Tools
inline variable preview new in firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through.
How to - Firefox Developer Tools
access debugging in add-onsbreaking on exceptionsdebug eval sourcesdisable breakpointsexamine, modify, and watch variableshighlight and inspect dom nodesignore a sourceopen the debuggerpretty-print a minified filesearchset a breakpointset a conditional breakpointset watch expressionsstep through codeuse a source mapuse watchpoints ...
Set an XHR breakpoint - Firefox Developer Tools
inline variable preview new in firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through.
Debugger.Environment - Firefox Developer Tools
source metadata generated from file: js/src/doc/debugger/debugger.environment.md watermark: sha256:3d6f67939e351803d5d7fe201ed38c4aaf766caf032f255e168df1f1c6fe73cb changeset: 7ae377917236 ...
Debugger.Frame - Firefox Developer Tools
source metadata generated from file: js/src/doc/debugger/debugger.frame.md watermark: sha256:b1894f88b76b7afd661f3044a05690d76d1498c54c596ca729c6ee0d150d2da1 changeset: e91b2c85aacd ...
Deprecated tools - Firefox Developer Tools
shader editor bugzilla issue: bug 1342237 removed as of firefox 67 description the shader editor allowed users to examine and edit the source of the webgl vertex and fragment shaders.
DevTools API - Firefox Developer Tools
to use the gdevtools api from an add-on, it can be imported with following snippet const { gdevtools } = require("resource:///modules/devtools/gdevtools.jsm"); methods registertool(tooldefinition) registers a new tool and adds a tab to each existing toolbox.
Aggregate view - Firefox Developer Tools
type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape".
Tree map view - Firefox Developer Tools
scripts: javascript sources loaded by the page.
Examine Event Listeners - Firefox Developer Tools
the inspector shows the word "event" next to elements in the html pane, that have event listeners bound to them: click the icon, then you'll see a popup listing all the event listeners bound to this element: each line contains: a right-pointing arrowhead; click to expand the row and show the listener function source code a curved arrow pointing to a stack; click it to show the code for the handler in the debugger the name of the event for which a handler was attached to this element the name and line number for the listener; you can also click here to expand the row and view the listener function source code a label indicating whether the event bubbles a label indicating the system that defines the event.
Work with animations - Firefox Developer Tools
if you click the icon you get a visual editor for the curve, enabling you to drag p1 and p2, and see the results in the page: this feature uses open source code from lea verou’s cubic-bezier.com.
Paint Flashing Tool - Firefox Developer Tools
after moving the mouse around and scrolling a bit, the above page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flashing, click the "highlight painted area" icon in the toolbox again.
Shader Editor - Firefox Developer Tools
with the shader editor, you can examine and edit the source of the vertex and fragment shaders.
Tips - Firefox Developer Tools
click the options button in the style sheet pane and click "show original sources" to toggle the display of css preprocessor files.
Validators - Firefox Developer Tools
this document lists different resources for developers to validate web pages.
about:debugging - Firefox Developer Tools
other information about the extension is displayed: location the location of the extension's source code on your local system.
Firefox Developer Tools
contribute if you want to help improve the developer tools, these resources will get you started.
AbstractRange - Web APIs
this is useful when you need to specify a range that will only be used once, since it avoids the performance and resource impact of the more complex range interface.
AesCbcParams - Web APIs
iv a buffersource.
AesCtrParams - Web APIs
counter a buffersource — the initial value of the counter block.
AnalyserNode.fftSize - Web APIs
analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount ; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.getbytetimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); var slicewidth = width * 1.0 / bufferlength; var x = 0; ...
AnalyserNode.getByteTimeDomainData() - Web APIs
analyser.fftsize = 2048; const bufferlength = analyser.fftsize; const dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.getbytetimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; const slicewidth = width * 1.0 / bufferlength; let x = 0; canvasctx.beginpath(); for(var i = 0; i < bufferlength; i++) { ...
AnalyserNode.getFloatTimeDomainData() - Web APIs
for more complete applied examples/information, check out our voice-change-o-matic-float-data demo (see the source code too).
AnalyserNode - Web APIs
analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // get a canvas defined with id "oscilloscope" var canvas = document.getelementbyid("oscilloscope"); var canvasctx = canvas.getcontext("2d"); // draw an oscilloscope of the current audio source function draw() { requestanimationframe(draw); analyser.getbytetimedomaindata(dataarray); canvasctx.fillstyle = "rgb(200, 200, 200)"; canvasctx.fillrect(0, 0, canvas.width, canvas.height); canvasctx.linewidth = 2; canvasctx.strokestyle = "rgb(0, 0, 0)"; canvasctx.beginpath(); var slicewidth = canvas.width * 1.0 / bufferlength; var x = 0; for (var i = 0; i < bufferlengt...
Animation - Web APIs
WebAPIAnimation
the animation interface of the web animations api represents a single animation player and provides playback controls and a timeline for an animation node or source.
Attr - Web APIs
WebAPIAttr
originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the document's dtd.
AudioConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
AudioContext.createMediaStreamDestination() - Web APIs
var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); document.queryselector("audio").src = url.createobjecturl(blob); }; </script> </body> </html> note: you can view this example live, or study the source code, on github.
AudioContext.getOutputTimestamp() - Web APIs
play.addeventlistener('click', () => { if(!audioctx) { audioctx = new window.audiocontext(); } getdata(); source.start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.getoutputtimestamp() console.log('context time: ' + ts.contexttime + ' | per...
AudioDestinationNode.maxChannelCount - Web APIs
example the following would set up a simple audio graph, featuring an audiodestinationnode with maxchannelcount of 2: var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); audioctx.destination.maxchannelcount = 2; gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn web audio examples, such as voice-change-o-matic or violent theremin.
AudioDestinationNode - Web APIs
their speakers), so you can get it hooked up inside an audio graph using only a few lines of code: var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn web audio examples, such as voice-change-o-matic or violent theremin.
AudioNode.numberOfInputs - Web APIs
source nodes are defined as nodes having a numberofinputs property with a value of 0.
AudioTrackList.getTrackById() - Web APIs
the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the relative order in which the tracks are declared by the media resource.
AudioTrackList.onaddtrack - Web APIs
this happens when tracks are added to the element when the media is first attached to the element; one addtrack event will occur for each audio track in the media resource.
BaseAudioContext.createAnalyser() - Web APIs
analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.getbytetimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); var slicewidth = width * 1.0 / bufferlength; var x = 0; ...
BaseAudioContext.createChannelMerger() - Web APIs
var ac = new audiocontext(); ac.decodeaudiodata(somestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we /...
BaseAudioContext.createChannelSplitter() - Web APIs
var ac = new audiocontext(); ac.decodeaudiodata(somestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we /...
BaseAudioContext.createConvolver() - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = conc...
BaseAudioContext.createOscillator() - Web APIs
the createoscillator() method of the baseaudiocontext interface creates an oscillatornode, a source representing a periodic waveform.
Battery Status API - Web APIs
this can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss.
BeforeUnloadEvent - Web APIs
the beforeunload event is fired when the window, the document and its resources are about to be unloaded.
BiquadFilterNode.getFrequencyResponse() - Web APIs
example in the following example we are using a biquad filter on a media stream (for the full demo, see our stream-source-buffer demo live, or read the source.) as part of this demo, we get the frequency responses for this biquad filter, for five sample frequencies.
Blob.slice() - Web APIs
WebAPIBlobslice
if you specify a value for start that is larger than the size of the source blob, the returned blob has size 0 and contains no data.
BluetoothDevice - Web APIs
bluetoothdevice.vendoridsource read only the vendor id source field in the pnp_id characteristic in the device_information service.
BluetoothRemoteGATTCharacteristic - Web APIs
value; promise<bluetoothremotegattdescriptor> getdescriptor(bluetoothdescriptoruuid descriptor); promise<sequence<bluetoothremotegattdescriptor>> getdescriptors(optional bluetoothdescriptoruuid descriptor); promise<dataview> readvalue(); promise<void> writevalue(buffersource value); promise<void> startnotifications(); promise<void> stopnotifications(); }; bluetoothremotegattcharacteristic implements eventtarget; bluetoothremotegattcharacteristic implements characteristiceventhandlers; properties bluetoothremotegattcharacteristic.serviceread only returns the bluetoothgattservice this characteristic belongs to.
BluetoothRemoteGATTDescriptor - Web APIs
value; promise<arraybuffer> readvalue(); promise<void> writevalue(buffersource value); }; properties bluetoothremotegattdescriptor.characteristicread only returns the bluetoothremotegattcharacteristic this descriptor belongs to.
Body.blob() - Web APIs
WebAPIBodyblob
when the fetch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
Body.bodyUsed - Web APIs
WebAPIBodybodyUsed
when the fetch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
CSSRule - Web APIs
WebAPICSSRule
(until the documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.media_rule 4 cssmediarule cssrule.font_face_rule 5 cssfontfacerule cssrule.page_rule 6 csspagerule cssrule.keyframes_rule 7 csskeyframesrule cssrule.keyframe_rule 8 csskeyframerule reserved for future use 9 should be used to define color profile...
CSS Typed Object Model API - Web APIs
subclasses include: cssimagevalue objects an interface representing values for properties that take an image, for example background-image, list-style-image, or border-image-source.
CanvasCaptureMediaStreamTrack.canvas - Web APIs
syntax var elt = stream.canvas; value an htmlcanvaselement indicating the canvas which is the source of the frames being captured.
CanvasRenderingContext2D.drawWindow() - Web APIs
ted mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result speci...
CanvasRenderingContext2D.getImageData() - Web APIs
to avoid securityerror being thrown in this situation, configure cors to allow the source image to be used in this way.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
"canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w * 3, h * 3); }; result specifications specification status comment h...
Manipulating video using canvas - Web APIs
view the full source for this example.
Compositing and clipping - Web APIs
if we compare clipping paths to the globalcompositeoperation property we've seen above, we see two compositing modes that achieve more or less the same effect in source-in and source-atop.
Finale - Web APIs
WebAPICanvas APITutorialFinale
web audio the web audio api provides a powerful and versatile system for controlling audio on the web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.
Pixel manipulation with canvas - Web APIs
once you have generated a data uri from you canvas, you are able to use it as the source of any <image> or put it into a hyper link with a download attribute to save it to disc, for example.
ChannelMergerNode - Web APIs
var ac = new audiocontext(); ac.decodeaudiodata(somestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we /...
ChannelSplitterNode.ChannelSplitterNode() - Web APIs
the channelsplitternode() constructor of the web audio api creates a new channelsplitternode object instance, representing a node that splits the input into a separate output for each of the source node's audio channels.
Clipboard.read() - Web APIs
WebAPIClipboardread
otherwise, an image element referred to using the variable imgelem has its source replaced with the clipboard's contents.
Comment - Web APIs
WebAPIComment
the comment interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view.
ContentIndex.add() - Web APIs
WebAPIContentIndexadd
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.
ContentIndex.getAll() - Web APIs
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.
ConvolverNode.buffer - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = conc...
ConvolverNode.normalize - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = conc...
DOMImplementationList - Web APIs
returned by domimplementationsource.getdomimplementationlist() and domimplementationregistry.getdomimplementationlist() .
DataTransferItemList.DataTransferItem() - Web APIs
drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px sol...
DataTransferItemList.add() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid bla...
DataTransferItemList.clear() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; b...
DataTransferItemList.length - Web APIs
drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px sol...
DataTransferItemList.remove() - Web APIs
t the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; ...
Document.contentType - Web APIs
this may come from http headers or other sources of mime information, and might be affected by automatic type conversions performed by either the browser or extensions.
Document.registerElement() - Web APIs
it will not be visible if you use the browser's view source capability.
Document - Web APIs
WebAPIDocument
globaleventhandlers.onloadend is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) globaleventhandlers.onloadstart is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised.
Introduction to the DOM - Web APIs
this document can be either displayed in the browser window or as the html source.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the following source code is a commented version for the sample1.html.
Element: auxclick event - Web APIs
you also can see the two functions in action by trying the demo out with a multi-button mouse (see it live on github; also see the source code).
Element: copy event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => ...
Element: cut event - Web APIs
WebAPIElementcut event
examples live example html <div class="source" contenteditable="true">try cutting text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => {...
Element: error event - Web APIs
the error event is fired on an element object when a resource failed to load, or can't be used.
Element.getAttribute() - Web APIs
retrieving nonce values for security reasons, csp nonces from non-script sources, such as css selectors, and .getattribute("nonce") calls are hidden.
Element.insertAdjacentElement() - Web APIs
rtadjacentelement('beforebegin',tempdiv); } setlistener(tempdiv); }); afterbtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('afterend',tempdiv); } setlistener(tempdiv); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <div> elements inside a container.
Element.insertAdjacentText() - Web APIs
example beforebtn.addeventlistener('click', function() { para.insertadjacenttext('afterbegin',textinput.value); }); afterbtn.addeventlistener('click', function() { para.insertadjacenttext('beforeend',textinput.value); }); have a look at our insertadjacenttext.html demo on github (see the source code too.) here we have a simple paragraph.
Element: mousewheel event - Web APIs
see webinputeventfactory::mousewheelevent of the chromium's source code for the detail.
Element: paste event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) =>...
Element - Web APIs
WebAPIElement
error fired when a resource failed to load, or can't be used.
ExtendableMessageEvent.lastEventId - Web APIs
the lasteventid read-only property of the extendablemessageevent interface represents, in server-sent events, the last event id of the event source.
FetchEvent.resultingClientId - Web APIs
if the fetch request is a subresource request or the request's destination is report, resultingclientid will be an empty string.
Cross-global fetch usage - Web APIs
this article explains an edge case that occurs with fetch (and potentially other apis exhibiting the same kind of resource retrieval behavior).
File - Web APIs
WebAPIFile
instance methods the file interface doesn't define any methods, but inherits methods from the blob interface: blob.prototype.slice([start[, end[, contenttype]]]) returns a new blob object containing the data in the specified range of bytes of the source blob.
FileError - Web APIs
WebAPIFileError
too many calls are being made on file resources.
FileException - Web APIs
too many calls are being made on file resources.
FileSystemEntry.moveTo() - Web APIs
the filesystementry interface's method moveto() moves the file specified by the entry to a new location on the file system, or renames the file if the destination directory is the same as the source.
FileSystemEntry.remove() - Web APIs
fileerror.security_err the entry couldn't be removed due to permissions or other access constraints, or because there are too many calls being made on file resources.
FocusEvent() - Web APIs
when the event has both a source and a destination, the relatedtarget value must be set to the other target.
FontFace.load - Web APIs
WebAPIFontFaceload
the load() method of the fontface interface loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns a promise that resolves with the current fontface object.
Using the Frame Timing API - Web APIs
var observe_all = new performanceobserver(function(list) { var perfentries = list.getentries(); for (var i=0; i < perfentries.length; i++) { switch (perfentries[i].entrytype) { case "frame": process_frame(perfentries[i]); break; case "mark": process_mark(perfentries[i]); break; case "measure": process_measure(perfentries[i]); break; case "resource": process_resource(perfentries[i]); break; default: console.log("unexpected performance entry type: " + perfentries[i].entrytype); } } }); // observe frame, mark, measure and resource events observe_frame.observe({entrytypes: ['frame', 'mark', 'measure', 'resource']}); accessing frame data when a frame observer is invoked, the observer callback is given one argument that is a ...
Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
Gamepad.buttons - Web APIs
WebAPIGamepadbuttons
syntax readonly attribute gamepadbutton[] buttons; example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in chrome navigator.getgamepads needs a webkit prefix and the button values are stores as an array of double values, whereas in firefox navigator.getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on ...
GamepadButton - Web APIs
example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in chrome navigator.getgamepads needs a webkit prefix and the button values are stored as an array of double values, whereas in firefox navigator.getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on ...
GeolocationPositionError.code - Web APIs
2 position_unavailable the acquisition of the geolocation failed because one or several internal sources of position returned an internal error.
GeolocationPositionError - Web APIs
2 position_unavailable the acquisition of the geolocation failed because at least one internal source of position returned an internal error.
GlobalEventHandlers.onauxclick - Web APIs
you can see the two functions in action by trying the demo out with a multi-button mouse (see it live on github; also see the source code).
GlobalEventHandlers.onloadend - Web APIs
the onloadend property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) syntax img.onloadend = funcref; value funcref is the handler function to be called when the resource's loadend event fires.
GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires.
GlobalEventHandlers.onplay - Web APIs
example <p>this example demonstrates how to assign an "onplay" event to a video element.</p> <video controls onplay="alertplay()"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your browser does not support html5 video.
GlobalEventHandlers - Web APIs
globaleventhandlers.onloadend is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) globaleventhandlers.onloadstart is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised.
HTMLAnchorElement.referrerPolicy - Web APIs
the htmlanchorelement.referrerpolicy property reflect the html referrerpolicy attribute of the <a> element defining which referrer is sent when fetching the resource.
HTMLAnchorElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <a> element and the current document.
HTMLAnchorElement.relList - Web APIs
it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <a> element and the current document.
HTMLAreaElement.referrerPolicy - Web APIs
the htmlareaelement.referrerpolicy property reflect the html referrerpolicy attribute of the <area> element defining which referrer is sent when fetching the resource.
HTMLAreaElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <area> element and the current document.
HTMLAreaElement.relList - Web APIs
it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <area> element and the current document.
Audio() - Web APIs
if a url is specified, the browser begins to asynchronously load the media resource before returning the new object.
msAudioCategory - Web APIs
example <audio msaudiocategory="backgroundcapablemedia" controls="controls"> <source src="song.mp3"/> </audio> ...
HTMLBodyElement - Web APIs
htmlbodyelement.background is a domstring that represents the description of the location of the background image resource.
HTMLButtonElement - Web APIs
htmlbuttonelement.formaction is a domstring reflecting the uri of a resource that processes information submitted by the button.
HTMLCanvasElement.mozFetchAsStream() - Web APIs
unction(result) { if (!components.issuccesscode(result)) { alert('failed to create icon'); } else { alert('succesfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); } } canvas.mozfetchasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
HTMLCollection.item - Web APIs
elements appear in an htmlcollection in the same order in which they appear in the document's source.
HTMLIFrameElement.src - Web APIs
the htmliframeelement.src property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
HTMLIFrameElement - Web APIs
htmliframeelement.referrerpolicy is a domstring that reflects the referrerpolicy html attribute indicating which referrer to use when fetching the linked resource.
HTMLImageElement.complete - Web APIs
the image resource has been fully fetched and has been queued for rendering/compositing.
HTMLImageElement.currentSrc - Web APIs
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.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.referrerPolicy - Web APIs
the htmlimageelement.referrerpolicy property reflects the html referrerpolicy attribute of the <img> element defining which referrer is sent when fetching the resource.
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.
HTMLImageElement.useMap - Web APIs
example the source for this interactive example is stored in a github repository.
HTMLLinkElement.referrerPolicy - Web APIs
the htmllinkelement.referrerpolicy property reflect the html referrerpolicy attribute of the <link> element defining which referrer is sent when fetching the resource.
HTMLLinkElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <link> element and the current document.
HTMLLinkElement.relList - Web APIs
it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <link> element and the current document.
HTMLMediaElement.buffered - Web APIs
the htmlmediaelement.buffered read-only property returns a new timeranges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed.
HTMLMediaElement.ended - Web APIs
if the source of the media is a mediastream, this value is true if the value of the stream's active property is false.
HTMLMediaElement: error event - Web APIs
the error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).
HTMLMediaElement.play() - Web APIs
notsupportederror the media source (which may be specified as a mediastream, mediasource, blob, or file, for example) doesn't represent a supported media format.
HTMLMedia​Element​.textTracks - Web APIs
examples we start with a <video> that has several <track> children <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind="subtitles" src="samplesubtitles_en.
HTMLModElement - Web APIs
htmlmodelement.cite is a domstring reflecting the cite html attribute, containing a uri of a resource explaining the change.
HTMLObjectElement.data - Web APIs
the data property of the htmlobjectelement interface returns a domstring that reflects the data html attribute, specifying the address of a resource's data.
HTMLObjectElement.height - Web APIs
the height property of the htmlobjectelement interface returns a domstring that reflects the height html attribute, specifying the displayed height of the resource in css pixels.
HTMLObjectElement.type - Web APIs
the type property of the htmlobjectelement interface returns a domstring that reflects the type html attribute, specifying the mime type of the resource.
HTMLObjectElement.typeMustMatch - Web APIs
it indicates if the resource linked by it must match the mime type given by htmlobjectelement.type in order for this resource to be used.
HTMLObjectElement.width - Web APIs
the width property of the htmlobjectelement interface returns a domstring that reflects the width html attribute, specifying the displayed width of the resource in css pixels.
HTMLQuoteElement - Web APIs
htmlquoteelement.cite is a domstring reflecting the cite html attribute, containing a url for the source of the quotation.
HTMLTableElement.tBodies - Web APIs
for example: <table> <tr> <td>cell one</td> </tr> </table> the html dom generated from the above html will have a <tbody> element even though the tags are not included in the source html.
HTMLTrackElement - Web APIs
usage notes loading of the track's text resource the webvtt or ttml data describing the actual cues for the text track isn't loaded if the track's mode is initially in the disabled state.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
batching operations you can also use microtasks to collect multiple requests from various sources into a single batch, avoiding the possible overhead involved with multiple calls to handle the same kind of work.
File drag and drop - Web APIs
the full source code is available in mdn's drag-and-drop repository (pull requests and/or issues are welcome).
IDBCursorWithValue.value - Web APIs
r listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.
IDBCursorWithValue - Web APIs
the cursor has a source that indicates which index or object store it is iterating over.
IDBDatabase.createObjectStore() - Web APIs
transactioninactiveerror occurs if a request is made on a source database that doesn't exist (e.g.
IDBDatabase.deleteObjectStore() - Web APIs
transactioninactiveerror occurs if a request is made on a source database that doesn't exist (e.g.
IDBDatabaseException - Web APIs
it also occurs if a request is made on a source object that has been deleted or removed.
IDBObjectStore.index() - Web APIs
exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror the source object store has been deleted, or the transaction for the object store has finished.
IDBRequest.readyState - Web APIs
equest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the readystate of this request is " + updatetitlerequest.readystate); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'readystate...
IDBRequest.transaction - Web APIs
the source of the requests is logged to the developer console — both originate from the same transaction.
IDBTransaction.objectStore() - Web APIs
invalidstateerror the request was made on a source object that has been deleted or removed, or if the transaction has finished.
IIRFilterNode.getFrequencyResponse() - Web APIs
examples in the following example we are using an iir filter on a media stream (for a complete full demo, see our stream-source-buffer demo live, or read its source.) as part of this demo, we get the frequency responses for this iir filter, for five sample frequencies.
IIRFilterNode - Web APIs
also see the source code on github.
ImageBitmap.close() - Web APIs
WebAPIImageBitmapclose
the imagebitmap.close() method disposes of all graphical resources associated with an imagebitmap.
ImageCapture() constructor - Web APIs
this can be any source, such as an incoming stream of a video conference, a playing movie, or the stream from a webcam.
Checking when a deadline is due - Web APIs
you can download the to-do list notifications app from github and play around with the source code, or view the app running live.
Using IndexedDB - Web APIs
the resource behind this url is subjected to the * "same origin policy", thus for this method to work, the url must come from * the same origin as the web site/app this code is deployed on.
firesTouchEvents - Web APIs
syntax var boolean = inputdevicecapabilities.firestouchevents returns a boolean example mybutton.addeventlistener('mousedown', function(e) { if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); specifications specification status comment inputdevicecapabilitiesthe definition of 'firetouchevents' in that specification.
InputDeviceCapabilities - Web APIs
specifications specification status comment inputdevicecapabilitiesthe definition of 'sourcecapabilities' in that specification.
InputEvent.dataTransfer - Web APIs
examples in the following simple example we've set up an event listener on the input event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input.
startSoftwareUpdate - Web APIs
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.
KeyboardEvent: code values - Web APIs
so, following table is created from source code which maps from scancode to code value.
LayoutShift - Web APIs
layoutshift.sources returns an array of layoutshiftattribution objects with information on the elements that were shifted.
LocalFileSystem - Web APIs
not_found_err the url was structurally correct, but refers to a resource that does not exist.
LocalFileSystemSync - Web APIs
not_found_err the url was structurally correct, but refers to a resource that does not exist.
LocalMediaStream - Web APIs
when the source of the stream is a connected device (such as a camera or microphone), capture of media from the device is halted.
Location: replace() - Web APIs
WebAPILocationreplace
the replace() method of the location interface replaces the current resource with the one at the provided url.
Locks.mode - Web APIs
WebAPILockmode
// should show "exclusive" (the default) navigator.locks.request("my_resource", show_lock_properties); // should show "exclusive" navigator.locks.request("my_resource", {mode: "exclusive"}, show_lock_properties); // should show "shared" navigator.locks.request("my_resource", {mode: "shared"}, show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock mode is: ${lock.mode}`); } specifications ...
Long Tasks API - Web APIs
for tasks that don't occur within the top level page, the containerid, containername and containersrc fields may provide information as to the source of the task.
MSSiteModeEvent - Web APIs
istrusted gets a value that indicates whether a trusted event source created an event.
MediaDevices - Web APIs
in essence, it lets you obtain access to any hardware source of media data.
MediaError.message - Web APIs
only the relevant parts of the code are displayed; you can see the complete source code here.
close() - Web APIs
the mediakeysession.close() method notifies that the current media session is no longer needed, and that the content decryption module should release any resources associated with this object and close it.
update() - Web APIs
}); parameters response an instance of type buffersource.
MediaKeySession - Web APIs
methods mediakeysession.close() returns a promise after notifying the current media session is no longer needed and that the cdm should release any resources associated with this object and close it.
MediaQueryList - Web APIs
= 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addeventlistener('change', screentest); note: you can find this example on github (see the source code, and also see it running live).
MediaRecorder() - Web APIs
this source media can come from a stream created using navigator.mediadevices.getusermedia() or from an <audio>, <video> or <canvas> element.
MediaRecorder.isTypeSupported - Web APIs
recording may still fail if there are insufficient resources to support the recording and encoding process.
MediaRecorder.mimeType - Web APIs
}) .catch(function(error) { console.log(error.message); }); changing line 14 to the following causes mediarecorder to try to use avc constrained baseline profile level 4 for video and aac-lc (low complexity) for audio, which is good for mobile and other possible resource-constrained situations.
MediaRecorder - Web APIs
some lines have been omitted for brevity; refer to the source for the complete code.
Media Session action types - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
MediaSessionActionDetails - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
active - Web APIs
example in this example, a new stream whose source is the user's local camera and microphone is requested using getusermedia().
MediaStream.onaddtrack - Web APIs
this event is fired when the browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
MediaStream.onremovetrack - Web APIs
this event is fired when the browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
MediaStreamConstraints.audio - Web APIs
syntax var audioconstraints = true | false | mediatrackconstraints; value the value of the audio property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not an audio track should be included in the returned stream; if it's true, an audio track is included; if no audio source is available or if permission is not given to use the audio source, the call to getusermedia() will fail.
MediaStreamConstraints.video - Web APIs
syntax var videoconstraints = true | false | mediatrackconstraints; value the value of the video property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not a video track should be included in the returned stream; if it's true, a video track is included; if no video source is available or if permission is not given to use the video source, the call to getusermedia() will fail.
MediaStreamTrack.kind - Web APIs
it doesn't change if the track is deassociated from its source.
MediaStreamTrack.onended - Web APIs
this event occurs when the track will no longer provide data to the stream for any reason, including the end of the media input being reached, the user revoking needed permissions, the source device being removed, or the remote peer ending a connection.
MediaTrackConstraints.autoGainControl - Web APIs
automatic gain control is typically a feature provided by microphones, although it can be provided by other input sources as well.
MediaTrackConstraints.displaySurface - Web APIs
this value does not affect the list of display sources in the browser's user interface.
MediaTrackConstraints.noiseSuppression - Web APIs
noise suppression is typically provided by microphones, although it can be provided by other input sources as well.
MediaTrackSettings.noiseSuppression - Web APIs
this feature is typically used on microphones, although it is technically possible it could be provided by other input sources as well.
MediaTrackSupportedConstraints - Web APIs
properties specific to shared screen tracks for tracks containing video sources from the user's screen contents, the following additional properties are may be included in addition to those available for video tracks.
MessageEvent.MessageEvent() - Web APIs
source: an messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
Microsoft API extensions - Web APIs
tmlvideoelement.msinsertvideoeffect() htmlvideoelement.msislayoutoptimalforplayback htmlvideoelement.msisstereo3d htmlvideoelement.mszoom htmlaudioelement.msaudiocategory htmlaudioelement.msaudiodevicetype htmlmediaelement.mscleareffects() htmlmediaelement.msinsertaudioeffect() mediaerror.msextendedcode msgraphicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime mssetmediaprotectionmanager mssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-form...
MouseEvent - Web APIs
mouseevent.mozinputsource read only the type of device that generated the event (one of the moz_source_* constants listed below).
msPlayToPrimary - Web APIs
example // microsoft extensions interface htmlimageelement : htmlelement { attribute boolean msplaytodisabled; attribute boolean msplaytoprimary; attribute domstring msplaytopreferredsourceuri; }; see also htmlmediaelement ...
NDEFWriter.write() - Web APIs
WebAPINDEFWriterwrite
syntax var sessionpromise = ndefwriter.write(message, options); parameters message the message to be written, either domstring or buffersource or ndefmessageinit.
NavigationPreloadManager - Web APIs
the navigationpreloadmanager interface of the the service worker api provides methods for managing the preloading of resources with a service worker.
Using Navigation Timing - Web APIs
the navigation timing api lets you easily obtain detailed and highly accurate timing information to help isolate performance problems with your site's code or resources.
Navigator.getUserMedia() - Web APIs
the deprecated navigator.getusermedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a mediastream.
Web-based protocol handlers - Web APIs
background it's fairly common to find web pages link to resources using non-http protocols.
Navigator.requestMediaKeySystemAccess() - Web APIs
this method may have user-visible effects such as asking for permission to access one or more system resources.
Navigator.share() - Web APIs
WebAPINavigatorshare
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.
Network Information API - Web APIs
var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory.
Node.firstChild - Web APIs
WebAPINodefirstChild
if this whitespace is removed from the source, the #text nodes are not inserted and the span element becomes the paragraph's first child.
Node.getRootNode() - Web APIs
WebAPINodegetRootNode
(see the full source code): <!-- source: https://github.com/jserz/js_piece/blob/master/dom/node/getrootnode()/demo/getrootnode.html --> <div class="js-parent"> <div class="js-child"></div> </div> <div class="js-shadowhost"></div> <script> // works on chrome 54+,opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.querysel...
Node.previousSibling - Web APIs
syntax previousnode = node.previoussibling; example <img id="b0"> <img id="b1"> <img id="b2"> console.log(document.getelementbyid("b1").previoussibling); // <img id="b0"> console.log(document.getelementbyid("b2").previoussibling.id); // "b1" notes gecko-based browsers insert text nodes into a document to represent whitespace in the source markup.
Node.rootNode - Web APIs
WebAPINoderootNode
example running the following line in supporting browsers should return a reference to the html/document node: console.log(document.body.rootnode); notes gecko-based browsers insert text nodes into a document to represent whitespace in the source markup.
Node.setUserData() - Web APIs
WebAPINodesetUserData
the handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (null if being deleted), the destination node (the newly created node or null if none).if no handler is desired, one must specify null.
NodeIterator.detach() - Web APIs
originally, it detached the nodeiterator from the set over which it iterates, releasing any resources used by the set and setting the iterator's state to invalid.
Notification.Notification() - Web APIs
example in our emogotchi demo (see source code), we run a spawnnotification() function when we want to trigger a notification.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
Page Visibility API - Web APIs
notes: the page visibility api is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible.
PannerNode.coneInnerAngle - Web APIs
the coneinnerangle property's default value is 360, suitable for a non-directional source.
PannerNode.refDistance - Web APIs
the refdistance property of the pannernode interface is a double value representing the reference distance for reducing volume as the audio source moves further from the listener – i.e.
PannerNode.rolloffFactor - Web APIs
the rollofffactor property of the pannernode interface is a double value describing how quickly the volume is reduced as the source moves away from the listener.
ParentNode.append() - Web APIs
WebAPIParentNodeappend
let parent = document.createelement("div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('append')) { return; } object.defineproperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var argarr = array.prototype.slice.call(argument...
ParentNode.prepend() - Web APIs
var parent = document.createelement("div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arg...
Pbkdf2Params - Web APIs
salt a buffersource.
Performance.navigation - Web APIs
the legacy performance.navigation read-only property returns a performancenavigation object representing the type of navigation that occurs in the given browsing context, such as the number of redirections needed to fetch the resource.
PerformanceEntry.entryType - Web APIs
resource performanceresourcetiming url the resolved url of the requested resource.
PerformanceEntry.name - Web APIs
url performanceresourcetiming resource the resolved url of the requested resource.
PerformanceObserverEntryList.getEntriesByName() - Web APIs
, "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status commen...
PerformanceObserverEntryList.getEntriesByType() - Web APIs
, "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status commen...
PerformanceServerTiming - Web APIs
ing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming property: let entries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceservertiming {name: "app", duration: 47.2, description: ""} specifications specific...
PerformanceTiming.domainLookupEnd - Web APIs
if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart.
PerformanceTiming.domainLookupStart - Web APIs
if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart.
PerformanceTiming.responseEnd - Web APIs
the legacy performancetiming.responseend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server from a cache or from a local resource.
PerformanceTiming.responseStart - Web APIs
the legacy performancetiming.responsestart read-only property returns an unsigned long long representing the moment in time (in milliseconds since the unix epoch) when the browser received the first byte of the response from the server, cache, or local resource.
Using Performance Timeline - Web APIs
r i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); // create observer for just the "mark" event type var observe_mark = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'mark' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'mark' event observe_mark.observe({entrytypes: ['mark'...
Using the Permissions API - Web APIs
it uses geolocation to query the user's current location and plot it out on a google map: you can run the example live, or view the source code on github.
Permissions API - Web APIs
you can run the example live, or view the source code on github.
PhotoCapabilities.fillLightMode - Web APIs
the filllightmode read-only property of the photocapabilities interface returns all available fill light options of the source device.
PointerEvent.height - Web APIs
depending on the source of the pointer device (for example a finger), for a given pointer, each event may produce a different value.
PointerEvent.width - Web APIs
depending on the source of the pointer device (such as a finger), for a given pointer, each event may produce a different value.
Pointer Lock API - Web APIs
simple example walkthrough we've written a simple pointer lock demo to show you how to use it to set up a simple control system (see source code).
Multi-touch interaction - Web APIs
the source code is available on github; pull requests and bug reports are welcome.
Pinch zoom gestures - Web APIs
the source code is available on github; pull requests and bug reports are welcome.
Using Pointer Events - Web APIs
the source code is available on github and pull requests and bug reports are welcome.
PositionOptions.enableHighAccuracy - Web APIs
on the other hand, if false (the default value), the device can take the liberty to save resources by responding more quickly and/or using less power.
PositionOptions - Web APIs
on the other hand, if false, the device can take the liberty to save resources by responding more quickly and/or using less power.
ProgressEvent.lengthComputable - Web APIs
the progressevent.lengthcomputable read-only property is a boolean flag indicating if the resource concerned by the progressevent has a length that can be calculated.
ProgressEvent.loaded - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
ProgressEvent.total - Web APIs
when downloading a resource using http, this only represent the content itself, not headers and other overhead.
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
id a buffersource matching an existing public key credential identifier (publickeycredential.rawid).
PublicKeyCredentialCreationOptions.extensions - Web APIs
also chrome doesn't plan to support any other extension in future extension identifier type description authnsel array of buffersource authenticator selection.
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.
PublicKeyCredentialCreationOptions - Web APIs
publickeycredentialcreationoptions.challenge a buffersource, emitted by the relying party's server and used as a cryptographic challenge.
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
id a buffersource matching an existing public key credential identifier (publickeycredential.rawid).
PublicKeyCredentialRequestOptions.extensions - Web APIs
the contenttype gives the mime type of the resource to be displayed while content gives its actual content.
PublicKeyCredentialRequestOptions - Web APIs
properties publickeycredentialrequestoptions.challenge a buffersource, emitted by the relying party's server and used as a cryptographic challenge.
Web Push API Notifications best practices - Web APIs
i use a service that aggregates different social media news sources.
Push API - Web APIs
WebAPIPush API
activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery.
RTCIceCandidate.sdpMLineIndex - Web APIs
syntax var sdpmlineindex = rtcicecandidate.sdpmlineindex; value a number containing a 0-based index into the set of m-lines providing media descriptions, indicating which media source is associated with the candidate, or null if no such association is available.
RTCIceCandidate.sdpMid - Web APIs
syntax var sdpmid = rtcicecandidate.sdpmid; value a domstring which uniquely identifies the source media component from which the candidate draws data, or null if no such association exists for the candidate.
RTCIceCandidateInit.sdpMLineIndex - Web APIs
value a number containing a 0-based index into the set of m-lines providing media descriptions, indicating which media source is associated with the candidate, or null if no such association is available.
RTCIceCandidateInit.sdpMid - Web APIs
value a domstring which uniquely identifies the source media component from which the candidate draws data, or null if no such association exists for the candidate.
RTCIceCandidateStats.localCandidateId - Web APIs
this candidate is the source of one of the two rtcicecandidatestats objects that were used to compute the contents of this rtcicecandidatepairstats object.
RTCIceCandidatePairStats - Web APIs
circuitbreakertriggercount optional an integer value indicating the number of times the circuit-breaker has been triggered for this particular 5-tuple (the set of five values comprising a tcp connection: source ip address, source port number, destination ip address, destination port number, and protocol).
RTCIceCandidateStats.deleted - Web APIs
host candidate a value of true indicates that the candidate's network resources have been released.
RTCIceCandidateStats - Web APIs
for host candidates, true means that any network resources (usually a network socket) associated with the candidate have already been released.
RTCInboundRtpStreamStats.bytesReceived - Web APIs
the rtcinboundrtpstreamstats dictionary's bytesreceived property is an integer value which indicates the total number of bytes received so far from this synchronization source (ssrc).
RTCInboundRtpStreamStats.framesDecoded - Web APIs
the framesdecoded property of the rtcinboundrtpstreamstats dictionary indicates the total number of frames which have been decoded successfully for this media source.
RTCInboundRtpStreamStats.lastPacketReceivedTimestamp - Web APIs
the lastpacketreceivedtimestamp property of the rtcinboundrtpstreamstats dictionary indicates the time at which the most recently received packet arrived from this source.
RTCInboundRtpStreamStats.remoteId - Web APIs
syntax var remotestatsid = rtcinboundrtpstreamstats.remoteid; value a domstring containing the id of the rtcremoteoutboundrtpstreamstats object that represents the remote peer's rtcrtpsender for the synchronization source represented by this stats object.
RTCOutboundRtpStreamStats.framesEncoded - Web APIs
the framesencoded property of the rtcoutboundrtpstreamstats dictionary indicates the total number of frames that have been encoded by this rtcrtpsender for this media source.
RTCOutboundRtpStreamStats.remoteId - Web APIs
syntax var remotestatsid = rtcoutboundrtpstreamstats.remoteid; value a domstring containing the id of the rtcremoteinboundrtpstreamstats object that represents the remote peer's rtcrtpreceiver for the synchronization source represented by this stats object.
RTCOutboundRtpStreamStats.trackId - Web APIs
syntax var trackstatsid = rtcoutboundrtpstreamstats.trackid; value a domstring containing the id of the rtcsenderaudiotrackattachmentstats or rtcsendervideotrackattachmentstats object representing the track which is the source of the media being sent on this stream.
RTCPeerConnection.addStream() - Web APIs
the obsolete rtcpeerconnection method addstream() adds a mediastream as a local source of audio or video.
RTCPeerConnection.addTrack() - Web APIs
if that succeeds, the resulting stream is assigned as the source for a <video> element which is referenced by the variable previewelement.
RTCPeerConnection.close() - Web APIs
this also releases any resources in use by the ice agent, including turn permissions.
RTCPeerConnection.createAnswer() - Web APIs
the answer is delivered to the returned promise, and should then be sent to the source of the offer to continue the negotiation process.
RTCPeerConnection.createDataChannel() - Web APIs
resourceinuse an id was specified, but another rtcdatachannel is already using the same value.
RTCPeerConnection.createOffer() - Web APIs
operationerror examining the state of the system to determine resource availability in order to generate the offer failed for some reason.
RTCPeerConnection.onaddstream - Web APIs
example this code, based on an older version of our signaling and video calling sample, responds to addstream events by setting the video source for a <video> element to the stream specified in the event, and then enabling a "hang up" button in the app's user interface.
RTCPeerConnection.removeStream() - Web APIs
the rtcpeerconnection.removestream() method removes a mediastream as a local source of audio or video.
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
together, these two objects provide statistics about the inbound and outbound sides of the same synchronization source (ssrc).
RTCRemoteOutboundRtpStreamStats - Web APIs
localid a domstring which is used to find the local rtcinboundrtpstreamstats object which shares the same synchronization source (ssrc).
RTCRtpStreamStats.transportId - Web APIs
syntax var transportid = rtcrtpstreamstats.transportid; value a domstring uniquely identifying the source of the statistics contained the rtctransportstats properties in the rtcstatsreport.
RTCRtpStreamStats - Web APIs
ssrc the 32-bit integer which identifies the source of the rtp packets this rtcrtpstreamstats object covers.
RTCRtpTransceiver.mid - Web APIs
syntax var mediaid = rtcrtptransceiver.mid; value a domstring which uniquely identifies the pairing of source and destination of the transceiver's stream.
RTCStatsType - Web APIs
csrc an rtccontributingsourcestats object which contains statistics related to a contributing source (csrc) that contributed to an inbound rtp stream.
Range.detach() - Web APIs
WebAPIRangedetach
it used to disable the range object and enable the browser to release associated resources.
ReadableByteStreamController.close() - Web APIs
exceptions typeerror the source object is not a readablebytestreamcontroller, or the stream is not readable for some other reason.
ReadableByteStreamController.enqueue() - Web APIs
exceptions typeerror the source object is not a readablebytestreamcontroller, or the stream cannot be read for some other reason, or the chunk is not an object, or the chunk's internal array buffer is non-existant or detached.
ReadableByteStreamController.error() - Web APIs
exceptions typeerror the source object is not a readablebytestreamcontroller, or the stream is not readable for some other reason.
ReadableStream.cancel() - Web APIs
the supplied reason parameter will be given to the underlying source, which may or may not use it.
ReadableStream.tee() - Web APIs
exceptions typeerror the source stream is not a readablestream.
ReadableStreamBYOBReader.read() - Web APIs
exceptions typeerror the source object is not a readablestreambyobreader, the stream has no owner, the view is not an object or has become detached, or the view's length is 0.
ReadableStreamBYOBReader.releaseLock() - Web APIs
exceptions typeerror the source object is not a readablestreambyobreader, or a read request is pending.
ReadableStreamBYOBReader - Web APIs
the supplied reason argument will be given to the underlying source, which may or may not use it.
ReadableStreamBYOBRequest.respond() - Web APIs
exceptions typeerror the source object is not a readablestreambyobrequest, or there is no associated controller, or the associated internal array buffer is detached.
ReadableStreamBYOBRequest.respondWithNewView() - Web APIs
exceptions typeerror the source object is not a readablestreambyobrequest, or there is no associated controller, or the associated internal array buffer is non-existant or detached.
ReadableStreamDefaultController.close() - Web APIs
exceptions typeerror the source object is not a readablestreamdefaultcontroller.
ReadableStreamDefaultController.desiredSize - Web APIs
examples the a readable stream with an underlying push source and backpressure support example in the spec provides a good example of using desiredsize to manually detect when the stream is full and apply backpressure, and also of using readablestreamdefaultcontroller.error() to manually trigger a stream error if another part of the system it relies on fails.
ReadableStreamDefaultController.enqueue() - Web APIs
exceptions typeerror the source object is not a readablestreamdefaultcontroller.
ReadableStreamDefaultReader.read() - Web APIs
exceptions typeerror the source object is not a readablestreamdefaultreader, or the stream has no owner.
ReadableStreamDefaultReader.releaseLock() - Web APIs
exceptions typeerror the source object is not a readablestreamdefaultreader, or a read request is pending.
ReportingObserver - Web APIs
note: if you look at the complete source code, you'll notice that we actually call the deprecated getusermedia() method twice.
Reporting API - Web APIs
note: if you look at the complete source code, you'll notice that we actually call the deprecated getusermedia() method twice.
Request.context - Web APIs
WebAPIRequestcontext
this defines what sort of resource is being fetched.
Request.mode - Web APIs
WebAPIRequestmode
however, for requests created other than by the request.request constructor, no-cors is typically used as the mode; for example, for embedded resources where the request is initiated from markup, unless the crossorigin attribute is present, the request is in most cases made using the no-cors mode — that is, for the <link> or <script> elements (except when used with modules), or <img>, <audio>, <video>, <object>, <embed>, or <iframe> elements.
RequestDestination - Web APIs
navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more.
ResizeObserver() - Web APIs
the callback will generally follow a pattern along the lines of: function(entries, observer) { for (let entry of entries) { // do something to each entry // and possibly something to the observer itself } } examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem';...
ResizeObserver.observe() - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem';...
ResizeObserver.unobserve() - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.co...
ResizeObserver - Web APIs
examples in the resize-observer-text.html (see source) example, we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width.
ResizeObserverEntry.contentBoxSize - Web APIs
examples the following snippet is taken from the resize-observer-border-radius.html (see source) example.
ResizeObserverEntry.contentRect - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example.
ResizeObserverEntry.target - Web APIs
examples the following snippet is taken from the resize-observer-border-radius.html (see source) example.
ResizeObserverEntry - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example.
Response() - Web APIs
WebAPIResponseResponse
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).
Response.type - Web APIs
WebAPIResponsetype
opaque: response for “no-cors” request to cross-origin resource.
Response - Web APIs
WebAPIResponse
the fetch() call returns a promise, which resolves to the response object associated with the resource fetch operation.
RsaOaepParams - Web APIs
label optional a buffersource — an array of bytes that does not itself need to be encrypted but which should be bound to the ciphertext.
format - Web APIs
string font format examples of common extensions truedoc-pfr truedoc™ portable font resource .pfr embedded-opentype embedded opentype .eot type-1 postscript™ type 1 .pfb, .pfa truetype truetype .ttf opentype opentype, including truetype open .ttf truetype-gx truetype with gx extensions - speedo speedo - intellifont intellifont - example myglyph.format = "truedoc-pfr"; sp...
SVGCircleElement - Web APIs
candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircleelement' in that specification.
SVGClipPathElement - Web APIs
candidate recommendation removed the inheritance from svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svgtransformable, and svgunittypes scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgclippathelement' in that specification.
SVGDefsElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgdefselement' in that specification.
SVGFilterElement - Web APIs
working draft removed the inheritance from svglangspace, svgexternalresourcesrequired, svgstylable, and svgunittypes and removed the setfilterres() function scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfilterelement' in that specification.
SVGForeignObjectElement - Web APIs
candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement and svgurireference scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgforeignobjectelement' in that specification.
SVGGElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
SVGGradientElement - Web APIs
candidate recommendation removed inheritance of svgexternalresourcesrequired, svgstylable, and svgunittypes scalable vector graphics (svg) 1.1 (second edition)the definition of 'svggradientelement' in that specification.
SVGImageElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable and added the crossorigin property.
SVGLineElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggeometryelement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
SVGMPathElement - Web APIs
editor's draft removed the implemented interface svgexternalresourcesrequired.
SVGMarkerElement - Web APIs
properties this interface also inherits properties from its parent interface, svgelement, and implements properties from svgexternalresourcesrequired, svganimatedpreserveaspectratio, and svgstylable.
SVGMaskElement - Web APIs
candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
SVGPatternElement - Web APIs
candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
SVGPolygonElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolygonelement' in that specification.
SVGPolylineElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolylineelement' in that specification.
SVGRectElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgrectelement' in that specification.
SVGSVGElement - Web APIs
candidate recommendation replaced the inheritance from svgelement by svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svglocatable, documentevent, viewcss, and documentcss and added implemented interface windoweventhandlers.
SVGScriptElement - Web APIs
candidate recommendation removed the implemented interface svgexternalresourcesrequired and added the crossorigin property.
SVGSwitchElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
SVGSymbolElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svglangspace, svgexternalresourcesrequired, and svgstylable.
SVGTextContentElement - Web APIs
candidate recommendation changed inheritance from svgelement to svggraphicselement and getstartpositionofchar() and removed implementations of svgtests, svglangspace, svgexternalresourcesrequired, svgstylable interfaces and getendpositionofchar() to return a dompoint instead of an svgpoint.
SVGViewElement - Web APIs
candidate recommendation removed a mixin svgexternalresourcesrequired scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgviewelement' in that specification.
SecurityPolicyViolationEvent.SecurityPolicyViolationEvent() - Web APIs
sourcefile: the sourcefile of the securitypolicyviolationevent.
SecurityPolicyViolationEvent.disposition - Web APIs
syntax let disposition = violationeventinstance.disposition; value a value defined in the securitypolicyviolationeventdisposition enum representing the uri of the blocked resource.
ServiceWorkerGlobalScope: message event - Web APIs
ata}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status service workersthe definition of 'message' in that specification.
ServiceWorkerGlobalScope - Web APIs
therefore it also has the following property available to it: globalfetch.fetch() starts the process of fetching a resource.
ServiceWorkerMessageEvent.lastEventId - Web APIs
the lasteventid read-only property of the serviceworkermessageevent interface represents, in server-sent events, the last event id of the event source.
SpeechSynthesisUtterance - Web APIs
examples in our basic speech synthesiser demo (source), we first grab a reference to the speechsynthesis controller using window.speechsynthesis.
StaticRange - Web APIs
methods staticrange.torange() returns a new range object which describes the same range as the source staticrange, but is "live" with values that change to reflect changes in the contents of the dom tree.
SubtleCrypto.decrypt() - Web APIs
data is a buffersource containing the data to be decrypted (also known as ciphertext).
SubtleCrypto.encrypt() - Web APIs
data is a buffersource containing the data to be encrypted (also known as the plaintext).
TextEncoder.prototype.encode() - Web APIs
examples <p class="source">this is a sample paragraph.</p> <p class="result">encoded result: </p> const sourcepara = document.queryselector('.source'); const resultpara = document.queryselector('.result'); const string = sourcepara.textcontent; const textencoder = new textencoder(); let encoded = textencoder.encode(string); resultpara.textcontent += encoded; specifications specification status comment encodingthe definition of...
TextEncoder - Web APIs
t.defineproperty(textencoder.prototype,"encoding",{ get:function(){if(textencoder.prototype.isprototypeof(this)) return"utf-8"; else throw typeerror("illegal invocation");} }); } catch(e) { /*ie6-8 fallback*/ textencoder.prototype.encoding = "utf-8"; } if(typeof symbol!=="undefined")textencoder.prototype[symbol.tostringtag]="textencoder"; } source: https://github.com/anonyco/fastestsmallesttextencoderdecoder specifications specification status comment encodingthe definition of 'textencoder' in that specification.
TextTrack.mode - Web APIs
WebAPITextTrackmode
this way, the resource fetch and memory usage are avoided unless the cues are actually needed.
getTrackById() - Web APIs
the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the relative order in which the tracks are declared by the media resource.
TextTrackList.onaddtrack - Web APIs
this happens when tracks are added to the element when the media is first attached to the element; one addtrack event will occur for each video track in the media resource.
Supporting both TouchEvent and MouseEvent - Web APIs
down mouseup click if the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend community touch events community group mail list w3c #touchevents irc channel related topics and resources touch events overview using touch events touch and mouse (together again for the first time) ...
Using Touch Events - Web APIs
lauke) community touch events community group mail list w3c #touchevents irc channel related topics and resources pointer events standard ...
TrackDefault.kinds - Web APIs
the kinds read-only property of the trackdefault interface returns default kinds for an associated sourcebuffer to use when an initialization segment does not contain label information for a new track.
TrackDefault.label - Web APIs
the label read-only property of the trackdefault interface returns the default label for an associated sourcebuffer to use when an initialization segment does not contain label information for a new track.
TrackDefault.language - Web APIs
the language read-only property of the trackdefault interface returns a default language for an associated sourcebuffer to use when an initialization segment does not contain language information for a new track.
TrackDefault.type - Web APIs
WebAPITrackDefaulttype
the type read-only property of the trackdefault interface returns the type of track that this sourcebuffer's media segment data relates to (i.e.
TrackDefaultList - Web APIs
the trackdefaultlist associated with a particular sourcebuffer can be retrieved using the sourcebuffer.trackdefaults property.
URL API - Web APIs
WebAPIURL API
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.
UserDataHandler - Web APIs
src (node) is the source node (null if being deleted).
Using the User Timing API - Web APIs
a live version of the examples is available on github, as is the source code.
getTrackById - Web APIs
the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the relative order in which the tracks are declared by the media resource.
VideoTrackList.onaddtrack - Web APIs
this happens when tracks are added to the element when the media is first attached to the element; one addtrack event will occur for each video track in the media resource.
WEBGL_debug_shaders - Web APIs
methods webgl_debug_shaders.gettranslatedshadersource() returns the translated shader source.
WebGL2RenderingContext.blitFramebuffer() - Web APIs
syntax void gl.blitframebuffer(srcx0, srcy0, srcx1, srcy1, dstx0, dsty0, dstx1, dsty1, mask, filter); parameters srcx0, srcy0, srcx1, srcy1 a glint specifying the bounds of the source rectangle.
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGL2RenderingContext.readBuffer() - Web APIs
the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.
WebGL2RenderingContext.texSubImage3D() - Web APIs
gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
WebGLRenderbuffer - Web APIs
the webglrenderbuffer interface is part of the webgl api and represents a buffer that can contain an image, or can be source or target of an rendering operation.
WebGLRenderingContext.bindFramebuffer() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGLRenderingContext.blendColor() - Web APIs
the webglrenderingcontext.blendcolor() method of the webgl api is used to set the source and destination blending factors.
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGLRenderingContext.compileShader() - Web APIs
examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, shadersource); gl.compileshader(shader); specifications specification status comment webgl 1.0the definition of 'compileshader' in that specification.
WebGLRenderingContext.createRenderbuffer() - Web APIs
return value a webglrenderbuffer object that stores data such an image, or can be source or target of an rendering operation.
WebGLRenderingContext.createShader() - Web APIs
the webglrenderingcontext method createshader() of the webgl api creates a webglshader that can then be configured further using webglrenderingcontext.shadersource() and webglrenderingcontext.compileshader().
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGLRenderingContext.framebufferTexture2D() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
gl.read_framebuffer: used as a source for reading operations.
WebGLRenderingContext.pixelStorei() - Web APIs
glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_flip_y_webgl flips the source data along its vertical axis if true.
Basic scissoring - Web APIs
gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }, false); the source code of this example is also available on github.
Boilerplate 1 - Web APIs
anvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } the source code of this example is also available on github.
Canvas size and WebGL - Web APIs
" + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Clearing by clicking - Web APIs
function getrandomcolor() { return [math.random(), math.random(), math.random()]; } }, false); the source code of this example is also available on github.
Clearing with colors - Web APIs
gl.clear(gl.color_buffer_bit); }, false); the source code of this example is also available on github.
Color masking - Web APIs
rhtml="on"; else evt.target.innerhtml="off"; gl.colormask(mask[0], mask[1], mask[2], true); drawanimation(); }; function drawanimation () { var color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); gl.clear(gl.color_buffer_bit); } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } }, false); the source code of this example is also available on github.
Detect WebGL - Web APIs
" + "your browser or device may not support webgl."; } } }, false); the source code of this example is also available on github.
Raining rectangles - Web APIs
ntext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Scissor animation - Web APIs
ntext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Simple color animation - Web APIs
function getrandomcolor() { return [math.random(), math.random(), math.random()]; } }, false); the source code of this example is also available on github.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
rtp doesn't handle allocation or reservation of resources that may be needed.
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
then, finally, the media source for the self-view <video> element indicated by the selfvideo constant is set to the camera and microphone stream, allowing the local user to see what the other peer sees.
Introduction to WebRTC protocols - Web APIs
for example, lines providing media descriptions have the type "m", so those lines are referred to as "m-lines." for more information to learn more about sdp, see the following useful resources: specification: rfc 4566: sdp: session description protocol iana registry of sdp parameters ...
A simple RTCDataChannel sample - Web APIs
next steps you should try out this example and take a look at the webrtc-simple-datachannel source code, available on github.
The WebSocket API (WebSockets) - Web APIs
total.js: web application framework for node.js (example: websocket chat) faye: a websocket (two-ways connections) and eventsource (one-way connections) for node.js server and client.
Geometry and reference spaces in WebXR - Web APIs
the space is used to make determinations about the relative positions and motion of objects and other entities (such as light sources and cameras) within the user's environment.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
for example, if you wish to draw a hand controller's representation using the controller's gripspace, you can get the pose needed like this: let controlpose = frame.getpose(worldrefspace, inputsource.gripspace); this converts the position and orientation of the input's grip space to use the world's coordinate system, then generates the corresponding xrpose, storing it in controlpose.
Web Animations API - Web APIs
web animations interfaces animation provides playback controls and a timeline for an animation node or source.
Web Audio API best practices - Web APIs
if you're looking to work with audio from the user's camera or microphone you can access it via the media stream api and the mediastreamaudiosourcenode interface.
Using the Web Storage API - Web APIs
note: as well as viewing the example pages live using the above links, you can also check out the source code.
Using Web Workers - Web APIs
it accepts zero or more uris as parameters to resources to import; all of the following examples are valid: importscripts(); /* imports nothing */ importscripts('foo.js'); /* imports just "foo.js" */ importscripts('foo.js', 'bar.js'); /* imports two scripts */ importscripts('//example.com/hello.js'); /* you can import scripts from other origins */ the browser loads each listed script and executes it.
Window.applicationCache - Web APIs
syntax cache = window.applicationcache parameters cache is an object reference to an offlineresourcelist.
Window: beforeunload event - Web APIs
the beforeunload event is fired when the window, the document and its resources are about to be unloaded.
Window: error event - Web APIs
the error event is fired on a window object when a resource failed to load or couldn't be used — for example if a script has an execution error.
Window.ondragdrop - Web APIs
WebAPIWindowondragdrop
if, from an external source, a tab, a link, marked text or a file is dragged and dropped onto this window, the alert is fired.
Window.performance - Web APIs
it serves as the point of exposure for the performance timeline api, the high resolution time api, the navigation timing api, the user timing api, and the resource timing api.
Window.screenX - Web APIs
WebAPIWindowscreenX
examples in our screenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle.
Window.stop() - Web APIs
WebAPIWindowstop
the window.stop() stops further resource loading in the current browsing context, equivalent to the stop button in the browser.
WindowClient - Web APIs
the service worker client independently selects and uses a service worker for its own loading and sub-resources.
WindowEventHandlers.onbeforeunload - Web APIs
these events fire when a window is about to unload its resources.
WritableStream - Web APIs
the data source can either write more data (line 9) or call close() (line 24).
Using XMLHttpRequest - Web APIs
cross-site xmlhttprequest modern browsers support cross-site requests by implementing the cross-origin resource sharing (cors) standard.
XMLHttpRequest() - Web APIs
const request = new xmlhttprequest(paramsdictionary); parameters (non-standard) objparameters there are two flags you can set: mozanon boolean: setting this flag to true will cause the browser not to expose the origin and user credentials when fetching resources.
XMLHttpRequest - Web APIs
if your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the eventsource interface.
XRPose - Web APIs
WebAPIXRPose
ce space which has been adjusted to position and orient the node to provide the desired viewing position and angle: viewerpose = xrframe.getviewerpose(adjreferencespace); here, adjreferencespace is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
transform({x: 0, y: 0, z: 0}, {x: inverseorientation[0], y: inverseorientation[1], z: inverseorientation[2], w: inverseorientation[3]}); return refspace.getoffsetreferencespace(newtransform); } this function creates an inverse orientation matrix—used to orient the viewer—from the current pitch and yaw values, then uses that matrix as the source of the orientation when calling new xrrigidtransform().
XRReferenceSpaceEvent.referenceSpace - Web APIs
syntax let refspace = xrreferencespaceevent.referencespace; value an xrreferencespace indicating the source of the event.
XRReferenceSpaceEventInit.referenceSpace - Web APIs
syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrreferencespace indicating the source of the event.
XRSession.updateRenderState() - Web APIs
function onxrsessionstarted(xrsession) { let glcanvas = document.createelement("canvas"); let gl = glcanvas.getcontext("webgl", { xrcompatible: true }); loadwebglresources(); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); } specifications specification status comment webxr device apithe definition of 'xrsession.updaterenderstate()' in that specification.
XRSession.visibilityState - Web APIs
in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() callbacks at a throttled rate.
XRView - Web APIs
WebAPIXRView
y the inverse of the view transform matrix, like this: mat4.multiply(modelviewmatrix, view.transform.inverse.matrix, objectmatrix); normal matrix the model view's normal matrix is used when lighting the scene, in order to transform each surface's normal vectors to ensure that the light is reflected in the correct direction given the orientation and position of the surface relative to the light source or sources.
XRViewerPose - Web APIs
the viewer may be the virtual representation of the user, or it may represent another device or interface which may serve as the source of a position and orientation that make up a view upon the scene.
XRVisibilityState - Web APIs
in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() callbacks at a throttled rate.
XRWebGLLayer() - Web APIs
operationerror the resources (including memory buffers) needed for the layer to operate could not be allocated.
XRWebGLLayer - Web APIs
although xrwebgllayer is currently the only type of framebuffer layer supported by webgl, it's entirely possible that future updates to the webxr specification may allow for other layer types and corresponding image sources.
XRWebGLLayerInit.depth - Web APIs
this means that the only source for depth information is the vertex coordinates, and reduces the accuracy and quality of rendering, but may potentially affect the performance of rendering as well.
XRWebGLLayerInit - Web APIs
examples given an xrsession, xrsession, and a webgl rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoredepthvalues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance information of any given point is its position relative to the viewer.
XSLT Basic Example - Web APIs
figure 1 shows the source of the basic xslt example.
ARIA Technique Template - Accessibility
examples example 1: code working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the alertdialog role - Accessibility
</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </div> </div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describedby related aria techniques using the dialog role using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the aria-activedescendant attribute - Accessibility
examples example 1: code working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the aria-invalid attribute - Accessibility
used in aria roles all elements of the base markup related aria techniques using the aria-required attribute using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-invalid property wai authoring practices for forms ...
Using the aria-label attribute - Accessibility
used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-label ...
Using the aria-labelledby attribute - Accessibility
</div> notes the most common accessibility api mapping for a label is the accessible name property used by aria roles all elements of the base markup related aria techniques using the aria-label attribute using the aria-describedby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-labelledby ...
Using the aria-orientation attribute - Accessibility
ion="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist toolbar related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...
Using the aria-relevant attribute - Accessibility
additional resources wai-aria specification for aria-relevant ...
Using the aria-required attribute - Accessibility
<input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...
Using the aria-valuemax attribute - Accessibility
e="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemax attribute ...
Using the aria-valuemin attribute - Accessibility
e="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemin attribute ...
Using the aria-valuenow attribute - Accessibility
e="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuemin aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuenow attribute ...
Using the aria-valuetext attribute - Accessibility
<div role="slider" aria-valuenow="1" aria-valuemin="1" aria-valuemax="7" aria-valuetext="sunday"> working examples: notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuenow compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuetext attribute ...
Using the article role - Accessibility
n class="comments"> <div class="comment" role="article"> <p>meaningful comment</p> </div> <div class="comment" role="article"> <p>positive comment</p> </div> </section> </article> notes aria attributes used related aria techniques aria techniques - list of roles compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the article role ...
Using the presentation role - Accessibility
<li role="presentation"> <a role="tab" href="#">tab 1</a> </li> <li role="presentation"> <a role="tab" href="#">tab 2</a> </li> <li role="presentation"> <a role="tab" href="#">tab 3</a> </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources using aria - 2.9 use of role=presentation or role=none: https://www.w3.org/tr/using-aria/#presentation ...
Using the progressbar role - Accessibility
</div> working examples: notes aria attributes used progressbar aria-valuenow aria-valuemin aria-valuemax aria-valuetext related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the radio role - Accessibility
se"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the slider role - Accessibility
tattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-valuemax aria-valuenow aria-valuetext aria-orientation related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the slider role ...
Using the toolbar role - Accessibility
examples example 1: code working examples: w3c toolbar example notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
x-ms-aria-flowfrom - Accessibility
the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order.
ARIA: switch role - Accessibility
there are varying opinions on how assistive technologies should handle this role; the above is a suggested practice and may differ from other sources.
ARIA: button role - Accessibility
working draft notes aria attributes used button aria-pressed aria-expanded aria-haspopup additional resources strong native semantics in html5 notes on using aria in html official wai-aria example code aria menubutton role ...
ARIA: listbox role - Accessibility
examples example 1: a single select listbox that uses aria-activedescendant the snippet below shows how the listbox role is added directly into the html source code.
overview - Accessibility
general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide checkbox aria toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox widgets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and ari...
ARIA - Accessibility
an excellent resource.
Cognitive accessibility - Accessibility
webaim has a cognitive page of relevant information and resources.
Community - Accessibility
if you know of other useful resources, please link to them here.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
feel free to peruse the source code in the accessible module whenever you want to see how something can be implemented.
Accessibility documentation index - Accessibility
40 x-ms-aria-flowfrom aria, microsoft, non-standard the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order.
Web accessibility for seizures and physical reactions - Accessibility
a great resource is mdn's document on window.matchmedia() media update feature the more often the screen is refreshed, the more stable it appears to the human eye, and the less it "flickers".
Robust - Accessibility
success criteria how to conform to the criteria practical resource 4.1.1 parsing (a) content should be well-formed so it can be parsed successfully by browsers and other user agents such as screenreaders.
Text labels and names - Accessibility
use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to.
-webkit-mask-box-image - CSS: Cascading Style Sheets
s to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
:any-link - CSS: Cascading Style Sheets
WebCSS:any-link
the :any-link css pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
:read-only - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
:read-write - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
ackground-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one o...
Box alignment in grid layout - CSS: Cascading Style Sheets
reference css properties justify-content align-content place-content justify-items align-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in grid layout external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...
Box alignment in Flexbox - CSS: Cascading Style Sheets
reference css properties justify-content align-content place-content justify-items align-items place-items align-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in flexbox external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...
CSS Box Alignment - CSS: Cascading Style Sheets
ace-content justify-items align-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis alignment container alignment subject fallback alignment guides css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css grid guide: box alignment in css grid layouts external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...
CSS Containment - CSS: Cascading Style Sheets
to gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it: contain: strict; contain: strict style; reference css properties contain external resources an introduction to css containment ...
In Flow and Out of Flow - CSS: Cascading Style Sheets
appearing on the page in the order that they are in the source.
Variable fonts guide - CSS: Cascading Style Sheets
resources w3c css fonts module 4 specification (editor’s draft) w3c github issue queue microsoft open type variations introduction microsoft opentype design-variation axis tag registry wakamai fondue (a site that will tell you what your font can do via a simple drag-and-drop inspection interface) axis praxis (the original variable fonts playground site) v-fonts.com (a catalog of variable fonts ...
CSS Fonts - CSS: Cascading Style Sheets
WebCSSCSS Fonts
css fonts is a module of css that defines font-related properties and how font resources are loaded.
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
otherwise they will stay by default in the order that they are entered in the document source.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
id-column-start: 1; grid-row-start: 2; grid-row-end: 4; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .box { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the item box2 is now overlapping box1, it displays on top as it comes later in the source order.
CSS Grid Layout - CSS: Cascading Style Sheets
id layout relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css grid and ie11 (polyfill) examples from jen simmons grid by example - a collection of usage examples and video tutorials codrops grid reference firefox devtools css grid inspector css grid playground grid garden - a game for learning css grid specifications specification status comment css grid layout module level 2 working draft added subgrids.
CSS Masking - CSS: Cascading Style Sheets
reference properties clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status comment css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification.
CSS Overflow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
Using z-index - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b> <br />position: absolute; <br />z-index: 5; </div> <div id="rel1"> <b>div #2</b> <br />position: relative; <br />z-index: 3; </div> <div id="rel2"> <b>div #3</b> <br />position: relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <...
Stacking with floated blocks - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b><br />position: absolute;</div> <div id="flo1"> <b>div #2</b><br />float: left;</div> <div id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #4</b><br />no positioning</div> <div id="abs2"> <b>div #5</b><br />position: absolute;</div> css div { padding: 10px; text-align: center; } b { f...
Stacking context example 2 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color...
Stacking without the z-index property - CSS: Cascading Style Sheets
source code for the example html <div id="abs1" class="absolute"> <b>div #1</b><br />position: absolute;</div> <div id="rel1" class="relative"> <b>div #2</b><br />position: relative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br /...
CSS selectors - CSS: Cascading Style Sheets
specifications specification status comment selectors level 4 working draft added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and ui pseudo-classes, modifier for ascii case-sensitive and case-insensitive attribute value selection.
Basic Shapes - CSS: Cascading Style Sheets
another useful resource is clippy - a tool for creating shapes for clip-path, as the values for basic shapes are the same as those used for clip-path.
Shapes From Images - CSS: Cascading Style Sheets
this should alert you to the fact that your image cannot be used as the source of a shape due to cors.
CSS Shapes - CSS: Cascading Style Sheets
reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of css shapes shapes from box values basic shapes shapes from images edit shape paths in css — firefox developer tools external resources a list of css shapes resources css shapes 101 creating non-rectangular layouts with css shapes how to use css shapes in your web design how to get started with css shapes what i learned in one weekend with css shapes css vs.
Questions about CSS - CSS: Cascading Style Sheets
WebCSSFAQ
with css, the sources of style definition for a given document element are in this order of precedence: the style attribute on an individual element tag the style element that defines a specific style sheet containing style declarations or a link element that links to a separate document containing the style element.
Recipe: Media objects - CSS: Cascading Style Sheets
relevant resources on mdn css grid layout progressive enhancement and grid layout using grid template areas fit-content grid-template-areas ...
Sticky footers - CSS: Cascading Style Sheets
grid auto-placement will place our items in source order and so the header goes into the first auto sized track, the main content into the 1fr track and the footer into the final auto sized track.
Using media queries - CSS: Cascading Style Sheets
to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute.
Viewport concepts - CSS: Cascading Style Sheets
the width media query in the svg is based on the element in which the svg is contained — the <img> if the source is an svg file, the svg itself if the svg is included directly into the html, or the parent if the parent element has a width assigned and — not the viewport’s width.
Visual formatting model - CSS: Cascading Style Sheets
css takes your source document and renders it onto a canvas.
WebKit CSS extensions - CSS: Cascading Style Sheets
before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -w...
align-content - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
align-items - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
align-self - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
all - CSS: Cascading Style Sheets
WebCSSall
the source for this interactive example is stored in a github repository.
<angle> - CSS: Cascading Style Sheets
WebCSSangle
the source for this interactive example is stored in a github repository.
animation-delay - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation-direction - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation-duration - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation-fill-mode - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation-iteration-count - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation-name - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation-play-state - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation-timing-function - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
animation - CSS: Cascading Style Sheets
WebCSSanimation
the source for this interactive example is stored in a github repository.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
backface-visibility - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-attachment - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-blend-mode - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-clip - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-image - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-origin - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-position-x - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-position-y - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-repeat - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
background - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
<basic-shape> - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
block-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-end-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-end-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-end-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-start-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-start-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-start-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-bottom-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-bottom-left-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-bottom-right-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-bottom-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-bottom-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-collapse - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-image-outset - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-end-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-end-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-end-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-start-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-start-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-start-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-left-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-left-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-left-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-right-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-right-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-right-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-spacing - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-top-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-top-left-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-top-right-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-top-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-top-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-top - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
border - CSS: Cascading Style Sheets
WebCSSborder
the source for this interactive example is stored in a github repository.
bottom - CSS: Cascading Style Sheets
WebCSSbottom
the source for this interactive example is stored in a github repository.
box-decoration-break - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
box-ordinal-group - CSS: Cascading Style Sheets
elements with the same ordinal group are flowed in the order they appear in the source document tree.
box-shadow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
box-sizing - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
calc() - CSS: Cascading Style Sheets
WebCSScalc
the source for this interactive example is stored in a github repository.
caption-side - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
caret-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
clamp() - CSS: Cascading Style Sheets
WebCSSclamp
clamp(min, val, max) is resolved as max(min, min(val, max)) the source for this interactive example is stored in a github repository.
clear - CSS: Cascading Style Sheets
WebCSSclear
the source for this interactive example is stored in a github repository.
color - CSS: Cascading Style Sheets
WebCSScolor
the source for this interactive example is stored in a github repository.
column-count - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
column-fill - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
column-rule-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
column-rule-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
column-rule-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
column-rule - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
column-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
columns - CSS: Cascading Style Sheets
WebCSScolumns
the source for this interactive example is stored in a github repository.
conic-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
counter-increment - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
counter-reset - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
cursor - CSS: Cascading Style Sheets
WebCSScursor
the source for this interactive example is stored in a github repository.
direction - CSS: Cascading Style Sheets
WebCSSdirection
the source for this interactive example is stored in a github repository.
empty-cells - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
blur() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
brightness() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
contrast() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
drop-shadow() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grayscale() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
hue-rotate() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
invert() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
opacity() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
saturate() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
sepia() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
fit-content() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
flex-basis - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
flex-flow - CSS: Cascading Style Sheets
WebCSSflex-flow
the source for this interactive example is stored in a github repository.
flex-grow - CSS: Cascading Style Sheets
WebCSSflex-grow
the source for this interactive example is stored in a github repository.
flex-shrink - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
flex-wrap - CSS: Cascading Style Sheets
WebCSSflex-wrap
the source for this interactive example is stored in a github repository.
flex - CSS: Cascading Style Sheets
WebCSSflex
the source for this interactive example is stored in a github repository.
float - CSS: Cascading Style Sheets
WebCSSfloat
the source for this interactive example is stored in a github repository.
font-family - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-feature-settings - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-kerning - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-optical-sizing - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-size - CSS: Cascading Style Sheets
WebCSSfont-size
the source for this interactive example is stored in a github repository.
font-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-synthesis - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-variant-caps - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-variant-ligatures - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-variant - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-variation-settings - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font-weight - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
font - CSS: Cascading Style Sheets
WebCSSfont
the source for this interactive example is stored in a github repository.
gap (grid-gap) - CSS: Cascading Style Sheets
WebCSSgap
the source for this interactive example is stored in a github repository.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
the source for this interactive example is stored in a github repository.
grid-area - CSS: Cascading Style Sheets
WebCSSgrid-area
the source for this interactive example is stored in a github repository.
grid-auto-columns - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-auto-flow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-auto-rows - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-column-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-column-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-row-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-row-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-template-areas - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-template-columns - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-template-rows - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid-template - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
grid - CSS: Cascading Style Sheets
WebCSSgrid
the source for this interactive example is stored in a github repository.
height - CSS: Cascading Style Sheets
WebCSSheight
the source for this interactive example is stored in a github repository.
hyphens - CSS: Cascading Style Sheets
WebCSShyphens
the source for this interactive example is stored in a github repository.
image-rendering - CSS: Cascading Style Sheets
if system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.
inline-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
isolation - CSS: Cascading Style Sheets
WebCSSisolation
the source for this interactive example is stored in a github repository.
justify-content - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
justify-items - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
justify-self - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
left - CSS: Cascading Style Sheets
WebCSSleft
the source for this interactive example is stored in a github repository.
letter-spacing - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
line-height - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
linear-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
list-style-image - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
list-style-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
list-style-type - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
list-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin-top - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
margin - CSS: Cascading Style Sheets
WebCSSmargin
the source for this interactive example is stored in a github repository.
max-block-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
max-height - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
max-inline-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
max-width - CSS: Cascading Style Sheets
WebCSSmax-width
the source for this interactive example is stored in a github repository.
max() - CSS: Cascading Style Sheets
WebCSSmax
the source for this interactive example is stored in a github repository.
min-block-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
min-height - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
min-inline-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
min-width - CSS: Cascading Style Sheets
WebCSSmin-width
the source for this interactive example is stored in a github repository.
min() - CSS: Cascading Style Sheets
WebCSSmin
the source for this interactive example is stored in a github repository.
minmax() - CSS: Cascading Style Sheets
WebCSSminmax
the source for this interactive example is stored in a github repository.
mix-blend-mode - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
object-fit - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
object-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
opacity - CSS: Cascading Style Sheets
WebCSSopacity
the source for this interactive example is stored in a github repository.
outline-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
outline-offset - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
outline-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
outline-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
outline - CSS: Cascading Style Sheets
WebCSSoutline
the source for this interactive example is stored in a github repository.
overflow-wrap - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
overflow-x - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
overflow-y - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
the source for this interactive example is stored in a github repository.
overscroll-behavior-x - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other.
overscroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.
padding-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding-top - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
padding - CSS: Cascading Style Sheets
WebCSSpadding
the source for this interactive example is stored in a github repository.
perspective-origin - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
perspective - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
place-content - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
place-items - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
place-self - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
pointer-events - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
position - CSS: Cascading Style Sheets
WebCSSposition
the source for this interactive example is stored in a github repository.
quotes - CSS: Cascading Style Sheets
WebCSSquotes
the source for this interactive example is stored in a github repository.
radial-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
repeating-conic-gradient() - CSS: Cascading Style Sheets
{{embedinteractiveexample("pages/css/function-repeating-conic-gradient.html")}} the source for this interactive example is stored in a github repository.
repeating-linear-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
repeating-radial-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
resize - CSS: Cascading Style Sheets
WebCSSresize
the source for this interactive example is stored in a github repository.
right - CSS: Cascading Style Sheets
WebCSSright
the source for this interactive example is stored in a github repository.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
WebCSSrow-gap
the source for this interactive example is stored in a github repository.
scroll-behavior - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-block - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin-top - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-margin - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-block - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-inline - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding-top - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-padding - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scroll-snap-type - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
shape-image-threshold - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
shape-margin - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
table-layout - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-align-last - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-align - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-decoration-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-decoration-line - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-decoration-skip-ink - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-decoration-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-decoration - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-emphasis - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-indent - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-orientation - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-overflow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-shadow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-transform - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
text-underline-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
top - CSS: Cascading Style Sheets
WebCSStop
the source for this interactive example is stored in a github repository.
perspective() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
rotate3d() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
rotateX() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
rotateY() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
rotateZ() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scale3d() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
scaleZ() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
skew() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
skewX() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
skewY() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
translate3d() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
translateZ() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
transform-origin - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
transform-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
transform - CSS: Cascading Style Sheets
WebCSStransform
the source for this interactive example is stored in a github repository.
transition-delay - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
transition-duration - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
transition-property - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
transition-timing-function - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
transition - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
var() - CSS: Cascading Style Sheets
WebCSSvar
the source for this interactive example is stored in a github repository.
vertical-align - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
visibility - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
width - CSS: Cascading Style Sheets
WebCSSwidth
the source for this interactive example is stored in a github repository.
will-change - CSS: Cascading Style Sheets
some of the stronger optimizations that are likely to be tied to will-change end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or consume a lot of resources.
word-break - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
word-spacing - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
writing-mode - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
z-index - CSS: Cascading Style Sheets
WebCSSz-index
the source for this interactive example is stored in a github repository.
Community - Developer guides
WebGuideAJAXCommunity
ajax resources ajax workshops and courses skillsmatter.com: courses and events on javascript, ajax, and reverse ajax technologies telerik.com: an active community forum for ajax community.tableau.com: community support forum and courses available for ajax codementor.io: social platform with ajax forums and tutorials lynda.com: tutorials available for learning the fundamentals of ajax ajax interview questions and answer and answerinterwiki links ...
Guide to Web APIs - Developer guides
WebGuideAPI
i cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture 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 eventsuurl apivvibration apivisual viewport wweb anim...
DOM onevent handlers - Developer guides
event, source, lineno, colno, and error for the onerror event handler.
Event developer guide - Developer guides
WebGuideEvents
there are many other sources of events defined by web browsers for which pages are not yet available in this guide.
Content categories - Developer guides
ondition is fulfilled: <a>, if it contains only phrasing content <area>, if it is a descendant of a <map> element <del>, if it contains only phrasing content <ins>, if it contains only phrasing content <link>, if the itemprop attribute is present <map>, if it contains only phrasing content <meta>, if the itemprop attribute is present embedded content embedded content imports another resource or inserts content from another mark-up language or namespace into the document.
Using HTML sections and outlines - Developer guides
for example, <div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the html source can divine the meaning of a class like navigation.
Index - Developer guides
WebGuideIndex
12 setting up adaptive streaming media sources audio, hls, html5, http live streaming, mpeg-dash, video, adaptive streaming let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an html5 media element.
A hybrid approach - Developer guides
feel free to check out the source code on github.
Parsing and serializing XML - Developer guides
"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(); the value returned in...
Optimization and performance - Developer guides
google pagespeed insights lighthouse webpagetest browser developer tools the above resources also include web performance best practices.
User input and controls - Developer guides
</div> note: compatibility information, examples and other resources can be found in the content editable guide.
HTML attribute: accept - HTML: Hypertext Markup Language
*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
the source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values.
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
WebHTMLElementabbr
the source for this interactive example is stored in a github repository.
<address>: The Contact Address element - HTML: Hypertext Markup Language
WebHTMLElementaddress
the source for this interactive example is stored in a github repository.
<article>: The Article Contents element - HTML: Hypertext Markup Language
WebHTMLElementarticle
the source for this interactive example is stored in a github repository.
<aside>: The Aside element - HTML: Hypertext Markup Language
WebHTMLElementaside
the source for this interactive example is stored in a github repository.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
WebHTMLElementb
the source for this interactive example is stored in a github repository.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
WebHTMLElementbdi
the source for this interactive example is stored in a github repository.
<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
WebHTMLElementbdo
the source for this interactive example is stored in a github repository.
<br>: The Line Break element - HTML: Hypertext Markup Language
WebHTMLElementbr
the source for this interactive example is stored in a github repository.
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
the source for this interactive example is stored in a github repository.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
WebHTMLElementcanvas
the following is some data we've collected from various tests and other sources (e.g.
<caption>: The Table Caption element - HTML: Hypertext Markup Language
WebHTMLElementcaption
the source for this interactive example is stored in a github repository.
<code>: The Inline Code element - HTML: Hypertext Markup Language
WebHTMLElementcode
the source for this interactive example is stored in a github repository.
<col> - HTML: Hypertext Markup Language
WebHTMLElementcol
the source for this interactive example is stored in a github repository.
<colgroup> - HTML: Hypertext Markup Language
WebHTMLElementcolgroup
the source for this interactive example is stored in a github repository.
<data> - HTML: Hypertext Markup Language
WebHTMLElementdata
the source for this interactive example is stored in a github repository.
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
WebHTMLElementdatalist
the source for this interactive example is stored in a github repository.
<dd>: The Description Details element - HTML: Hypertext Markup Language
WebHTMLElementdd
the source for this interactive example is stored in a github repository.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
the source for this interactive example is stored in a github repository.
<dfn>: The Definition element - HTML: Hypertext Markup Language
WebHTMLElementdfn
the source for this interactive example is stored in a github repository.
<div>: The Content Division element - HTML: Hypertext Markup Language
WebHTMLElementdiv
the source for this interactive example is stored in a github repository.
<dt>: The Description Term element - HTML: Hypertext Markup Language
WebHTMLElementdt
the source for this interactive example is stored in a github repository.
<em>: The Emphasis element - HTML: Hypertext Markup Language
WebHTMLElementem
the source for this interactive example is stored in a github repository.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
WebHTMLElementfieldset
the source for this interactive example is stored in a github repository.
<figcaption>: The Figure Caption element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
WebHTMLElementfigure
the source for this interactive example is stored in a github repository.
<footer> - HTML: Hypertext Markup Language
WebHTMLElementfooter
the source for this interactive example is stored in a github repository.
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
the source for this interactive example is stored in a github repository.
<header> - HTML: Hypertext Markup Language
WebHTMLElementheader
the source for this interactive example is stored in a github repository.
<hgroup> - HTML: Hypertext Markup Language
WebHTMLElementhgroup
the source for this interactive example is stored in a github repository.
<hr>: The Thematic Break (Horizontal Rule) element - HTML: Hypertext Markup Language
WebHTMLElementhr
the source for this interactive example is stored in a github repository.
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
WebHTMLElementhtml
manifest specifies the uri of a resource manifest indicating resources that should be cached locally.
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
the source for this interactive example is stored in a github repository.
<input type="checkbox"> - HTML: Hypertext Markup Language
WebHTMLElementinputcheckbox
the source for this interactive example is stored in a github repository.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
the source for this interactive example is stored in a github repository.
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
the source for this interactive example is stored in a github repository.
<input type="datetime-local"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
the source for this interactive example is stored in a github repository.
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
the source for this interactive example is stored in a github repository.
<input type="month"> - HTML: Hypertext Markup Language
WebHTMLElementinputmonth
the source for this interactive example is stored in a github repository.
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
the source for this interactive example is stored in a github repository.
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
the source for this interactive example is stored in a github repository.
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
the source for this interactive example is stored in a github repository.
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
the source for this interactive example is stored in a github repository.
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
the source for this interactive example is stored in a github repository.
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
the source for this interactive example is stored in a github repository.
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
the source for this interactive example is stored in a github repository.
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
the source for this interactive example is stored in a github repository.
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
the source for this interactive example is stored in a github repository.
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
the source for this interactive example is stored in a github repository.
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
the source for this interactive example is stored in a github repository.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
WebHTMLElementkbd
the source for this interactive example is stored in a github repository.
<label> - HTML: Hypertext Markup Language
WebHTMLElementlabel
the source for this interactive example is stored in a github repository.
<legend> - HTML: Hypertext Markup Language
WebHTMLElementlegend
the source for this interactive example is stored in a github repository.
<li> - HTML: Hypertext Markup Language
WebHTMLElementli
the source for this interactive example is stored in a github repository.
<main> - HTML: Hypertext Markup Language
WebHTMLElementmain
the source for this interactive example is stored in a github repository.
<map> - HTML: Hypertext Markup Language
WebHTMLElementmap
the source for this interactive example is stored in a github repository.
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
WebHTMLElementmeter
the source for this interactive example is stored in a github repository.
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
WebHTMLElementnav
the source for this interactive example is stored in a github repository.
<ol>: The Ordered List element - HTML: Hypertext Markup Language
WebHTMLElementol
the source for this interactive example is stored in a github repository.
<optgroup> - HTML: Hypertext Markup Language
WebHTMLElementoptgroup
the source for this interactive example is stored in a github repository.
<option>: The HTML Option element - HTML: Hypertext Markup Language
WebHTMLElementoption
the source for this interactive example is stored in a github repository.
<p>: The Paragraph element - HTML: Hypertext Markup Language
WebHTMLElementp
the source for this interactive example is stored in a github repository.
<param>: The Object Parameter element - HTML: Hypertext Markup Language
WebHTMLElementparam
ref: the value is a uri to a resource where run-time values are stored.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
WebHTMLElementpre
the source for this interactive example is stored in a github repository.
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
WebHTMLElementprogress
the source for this interactive example is stored in a github repository.
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
WebHTMLElementrp
the source for this interactive example is stored in a github repository.
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
WebHTMLElementrt
the source for this interactive example is stored in a github repository.
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
WebHTMLElementrtc
the source for this interactive example is stored in a github repository.
<ruby> - HTML: Hypertext Markup Language
WebHTMLElementruby
the source for this interactive example is stored in a github repository.
<s> - HTML: Hypertext Markup Language
WebHTMLElements
the source for this interactive example is stored in a github repository.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
WebHTMLElementsamp
the source for this interactive example is stored in a github repository.
<section>: The Generic Section element - HTML: Hypertext Markup Language
WebHTMLElementsection
the source for this interactive example is stored in a github repository.
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
the html <select> element represents a control that provides a menu of options: the source for this interactive example is stored in a github repository.
<small>: the side comment element - HTML: Hypertext Markup Language
WebHTMLElementsmall
the source for this interactive example is stored in a github repository.
<span> - HTML: Hypertext Markup Language
WebHTMLElementspan
the source for this interactive example is stored in a github repository.
<sub>: The Subscript element - HTML: Hypertext Markup Language
WebHTMLElementsub
the source for this interactive example is stored in a github repository.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
WebHTMLElementsummary
the source for this interactive example is stored in a github repository.
<sup>: The Superscript element - HTML: Hypertext Markup Language
WebHTMLElementsup
the source for this interactive example is stored in a github repository.
<table>: The Table element - HTML: Hypertext Markup Language
WebHTMLElementtable
the source for this interactive example is stored in a github repository.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
WebHTMLElementtbody
the source for this interactive example is stored in a github repository.
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
WebHTMLElementtd
the source for this interactive example is stored in a github repository.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
the source for this interactive example is stored in a github repository.
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
WebHTMLElementtfoot
the source for this interactive example is stored in a github repository.
<th> - HTML: Hypertext Markup Language
WebHTMLElementth
the source for this interactive example is stored in a github repository.
<thead>: The Table Head element - HTML: Hypertext Markup Language
WebHTMLElementthead
the source for this interactive example is stored in a github repository.
<time> - HTML: Hypertext Markup Language
WebHTMLElementtime
the source for this interactive example is stored in a github repository.
<tr>: The Table Row element - HTML: Hypertext Markup Language
WebHTMLElementtr
the source for this interactive example is stored in a github repository.
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
WebHTMLElementu
the source for this interactive example is stored in a github repository.
<ul>: The Unordered List element - HTML: Hypertext Markup Language
WebHTMLElementul
the source for this interactive example is stored in a github repository.
<var>: The Variable element - HTML: Hypertext Markup Language
WebHTMLElementvar
the source for this interactive example is stored in a github repository.
<wbr> - HTML: Hypertext Markup Language
WebHTMLElementwbr
the source for this interactive example is stored in a github repository.
accesskey - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
class - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
contenteditable - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
data-* - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
dir - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
hidden - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
id - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
lang - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
spellcheck - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
style - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
title - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
Link types: dns-prefetch - HTML: Hypertext Markup Language
the dns-prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing dns resolution for that origin.
Link types: manifest - HTML: Hypertext Markup Language
the manifest keyword for the rel attribute of the <link> element indicates that the target resource is a web app manifest.
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null).
Link types: noreferrer - HTML: Hypertext Markup Language
the noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.
Link types: preconnect - HTML: Hypertext Markup Language
the preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.
Link types: prefetch - HTML: Hypertext Markup Language
the prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource.
Link types: preload - HTML: Hypertext Markup Language
the preload keyword for the rel attribute of the <link> element indicates the user is highly likely to require the target resource for the current navigation, and therefore the browser must preemptively fetch and cache the resource.
Link types: prerender - HTML: Hypertext Markup Language
the prerender keyword for the rel attribute of the <link> element is a hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.
HTML: Hypertext Markup Language
WebHTML
preloading content with rel="preload" the preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your html <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in.
Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ - HTTP
if using server-sent events, make sure eventsource.withcredentials is false (it's the default value).
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
if using server-sent events, make sure eventsource.withcredentials is false (it's the default value).
Accept-Charset - HTTP
browsers usually don't send this header, as the default value for each resource is usually correct and transmitting it would allow fingerprinting.
Accept-Patch - HTTP
accept-patch in response to any method means that patch is allowed on the resource identified by the request-uri.
Access-Control-Allow-Credentials - HTTP
note that simple get requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.
Access-Control-Allow-Headers - HTTP
the preflight request is an options request which includes some combination of the three preflight request headers: access-control-request-method, access-control-request-headers, and origin, such as: options /resource/foo access-control-request-method: delete access-control-request-headers: origin, x-requested-with origin: https://foo.bar.org response if the server allows cors requests to use the delete method, it responds with an access-control-allow-methods response header, which lists delete along with the other methods it supports: http/1.1 200 ok content-length: 0 connection: keep-alive access-control-...
Access-Control-Allow-Methods - HTTP
the access-control-allow-methods response header specifies the method or methods allowed when accessing the resource in response to a preflight request.
Access-Control-Expose-Headers - HTTP
access-control-expose-headers: * directives <header-name> a list of exposed headers consisting of zero or more header names other than the cors-safelisted request headers that the resource might use and can be exposed.
Alt-Svc - HTTP
WebHTTPHeadersAlt-Svc
the alt-svc http response header is used to advertise alternative services through which the same resource can be reached.
Content-Encoding - HTTP
the recommendation is to compress data as much as possible and therefore to use this field, but some types of resources, such as jpeg images, are already compressed.
Content-Language - HTTP
<html lang="de"> do not use this meta element like this for stating a document language: <!-- /!\ this is bad practice --> <meta http-equiv="content-language" content="de"> indicating a target audience for a resource the content-language header is used to specify the intended audience of the page, and can indicate that this is more than one language.
CSP: block-all-mixed-content - HTTP
all mixed content resource requests are blocked, including both active and passive mixed content.
CSP: referrer - HTTP
this policy will leak origins and paths from tls-protected resources to insecure origins.
CSP: require-sri-for - HTTP
the http content-security-policy require-sri-for directive instructs the client to require the use of subresource integrity for scripts or styles on the page.
Early-Data - HTTP
header type request header forbidden header name no syntax early-data: 1 examples get /resource http/1.0 host: example.com early-data: 1 specifications specification title rfc 8470, section 5.1: the early-data header field using early data in http ...
Expires - HTTP
WebHTTPHeadersExpires
invalid dates, like the value 0, represent a date in the past and mean that the resource is already expired.
If-Modified-Since - HTTP
the if-modified-since request http header makes the request conditional: the server will send back the requested resource, with a 200 status, only if it has been last modified after the given date.
Proxy-Authenticate - HTTP
the http proxy-authenticate response header defines the authentication method that should be used to gain access to a resource behind a proxy server.
Referer - HTTP
WebHTTPHeadersReferer
a referer header is not sent by browsers if: the referring resource is a local "file" or "data" uri.
Save-Data - HTTP
a value of on indicates explicit user opt-in into a reduced data usage mode on the client, and when communicated to origins allows them to deliver alternative content to reduce the data downloaded such as smaller image and video resources, different markup and styling, disabled polling and automatic updates, and so on.
Sec-Fetch-Site - HTTP
the sec-fetch-site fetch metadata header indicates the relationship between a request initiator's origin and the origin of the resource.
Tk - HTTP
WebHTTPHeadersTk
examples a tk header for a resource that claims not to be tracking would look like: tk: n specifications specification status comment tracking preference expression (dnt)the definition of 'tk header field' in that specification.
Transfer-Encoding - HTTP
transfer-encoding is a hop-by-hop header, that is applied to a message between two nodes, not to a resource itself.
Vary - HTTP
WebHTTPHeadersVary
it is used by the server to indicate which headers it used when selecting a representation of a resource in a content negotiation algorithm.
WWW-Authenticate - HTTP
the http www-authenticate response header defines the authentication method that should be used to gain access to a resource.
CONNECT - HTTP
WebHTTPMethodsCONNECT
the http connect method starts two-way communications with the requested resource.
DELETE - HTTP
WebHTTPMethodsDELETE
the http delete request method deletes the specified resource.
GET - HTTP
WebHTTPMethodsGET
the http get method requests a representation of the specified resource.
POST - HTTP
WebHTTPMethodsPOST
as described in the http 1.1 specification, post is designed to allow a uniform method to cover the following functions: annotation of existing resources posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; adding a new user through a signup modal; providing a block of data, such as the result of submitting a form, to a data-handling process; extending a database through an append operation.
TRACE - HTTP
WebHTTPMethodsTRACE
the http trace method performs a message loop-back test along the path to the target resource, providing a useful debugging mechanism.
Proxy Auto-Configuration (PAC) file - HTTP
these utilities are found in many other open-source systems including chromium.
Proxy servers and tunneling - HTTP
it starts two-way communications with the requested resource and can be used to open a tunnel.
103 Early Hints - HTTP
WebHTTPStatus103
the http 103 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.
303 See Other - HTTP
WebHTTPStatus303
the hypertext transfer protocol (http) 303 see other redirect status response code indicates that the redirects don't link to the newly uploaded resources, but to another page (such as a confirmation page or an upload progress page).
401 Unauthorized - HTTP
WebHTTPStatus401
the http 401 unauthorized client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for the target resource.
403 Forbidden - HTTP
WebHTTPStatus403
the access is permanently forbidden and tied to the application logic, such as insufficient rights to a resource.
406 Not Acceptable - HTTP
WebHTTPStatus406
if a server returns such an error status, the body of the message should contain the list of the available representations of the resources, allowing the user to choose among them.
407 Proxy Authentication Required - HTTP
WebHTTPStatus407
the http 407 proxy authentication required client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for a proxy server that is between the browser and the server that can access the requested resource.
410 Gone - HTTP
WebHTTPStatus410
the hypertext transfer protocol (http) 410 gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely to be permanent.
416 Range Not Satisfiable - HTTP
WebHTTPStatus416
the 416 response message contains a content-range indicating an unsatisfied range (that is a '*') followed by a '/' and the current length of the resource.
501 Not Implemented - HTTP
WebHTTPStatus501
501 is the appropriate response when the server does not recognize the request method and is incapable of supporting it for any resource.
506 Variant Also Negotiates - HTTP
WebHTTPStatus506
this protocol enables a client to retrieve the best variant of a given resource, where the server supports multiple variants.
Closures - JavaScript
the word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available.
Grammar and types - JavaScript
the source text of javascript script gets scanned from left to right, and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments, or whitespace.
JavaScript modules - JavaScript
aside — .mjs versus .js throughout this article, we've used .js extensions for our module files, but in other resources you may see the .mjs extension used instead.
Text formatting - JavaScript
multi-lines any new line characters inserted in the source are part of the template literal.
Using Promises - JavaScript
these handlers are global per context, so all errors will go to the same event handlers, regardless of source.
constructor - JavaScript
the source for this interactive example is stored in a github repository.
static - JavaScript
the source for this interactive example is stored in a github repository.
Deprecated and obsolete features - JavaScript
source the text of the pattern.
SyntaxError: Malformed formal parameter - JavaScript
the last argument is the source code for the new function you're creating.
Default parameters - JavaScript
the source for this interactive example is stored in a github repository.
Method definitions - JavaScript
the source for this interactive example is stored in a github repository.
The arguments object - JavaScript
the source for this interactive example is stored in a github repository.
getter - JavaScript
the source for this interactive example is stored in a github repository.
Rest parameters - JavaScript
the source for this interactive example is stored in a github repository.
setter - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.reduceRight() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.concat() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.copyWithin() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.every() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.fill() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.filter() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.find() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.findIndex() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.flat() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.flatMap() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.forEach() - JavaScript
the source for this interactive example is stored in a github repository.
Array.from() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.includes() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.indexOf() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.join() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.keys() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.lastIndexOf() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.length - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.pop() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.push() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.reverse() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.shift() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.slice() - JavaScript
the source for this interactive demo is stored in a github repository.
Array.prototype.some() - JavaScript
the source for this interactive example is stored in a github repository.
Array.prototype.splice() - JavaScript
the source for this interactive example is stored in a github repository.
ArrayBuffer() constructor - JavaScript
the source for this interactive example is stored in a github repository.
ArrayBuffer.prototype.byteLength - JavaScript
the source for this interactive example is stored in a github repository.
ArrayBuffer.isView() - JavaScript
the source for this interactive example is stored in a github repository.
ArrayBuffer.prototype.slice() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.add() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.and() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.compareExchange() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.exchange() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.isLockFree() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.load() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.or() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.store() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.sub() - JavaScript
the source for this interactive example is stored in a github repository.
Atomics.xor() - JavaScript
the source for this interactive example is stored in a github repository.
BigInt.asIntN() - JavaScript
the source for this interactive example is stored in a github repository.
BigInt.asUintN() - JavaScript
the source for this interactive example is stored in a github repository.
BigInt.prototype.toLocaleString() - JavaScript
the source for this interactive example is stored in a github repository.
BigInt.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
BigInt.prototype.valueOf() - JavaScript
the source for this interactive example is stored in a github repository.
Boolean() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Boolean.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
Boolean.prototype.valueOf() - JavaScript
the source for this interactive example is stored in a github repository.
DataView() constructor - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.buffer - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.byteLength - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.byteOffset - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getBigInt64() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getBigUint64() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getFloat32() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getFloat64() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getInt16() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getInt32() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getInt8() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getUint16() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getUint32() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.getUint8() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setBigInt64() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setBigUint64() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setFloat32() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setFloat64() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setInt16() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setInt32() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setInt8() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setUint16() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setUint32() - JavaScript
the source for this interactive example is stored in a github repository.
DataView.prototype.setUint8() - JavaScript
the source for this interactive example is stored in a github repository.
Date() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Date.UTC() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getDate() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getDay() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getFullYear() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getHours() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getMilliseconds() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getMonth() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getSeconds() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getTime() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getTimezoneOffset() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getUTCDay() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getUTCFullYear() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getUTCHours() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.getUTCMonth() - JavaScript
the source for this interactive example is stored in a github repository.
Date.parse() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setDate() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setFullYear() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setHours() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setMilliseconds() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setMinutes() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setSeconds() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setTime() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setUTCDate() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setUTCFullYear() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setUTCHours() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setUTCMilliseconds() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setUTCMinutes() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setUTCMonth() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.setUTCSeconds() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toDateString() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toISOString() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toJSON() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toLocaleDateString() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toLocaleString() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toLocaleTimeString() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toTimeString() - JavaScript
the source for this interactive example is stored in a github repository.
Date.prototype.toUTCString() - JavaScript
based on rfc7231 and modified according to ecma-262 toutcstring, it can have negative values in the 2021 version the source for this interactive example is stored in a github repository.
FinalizationRegistry - JavaScript
sources of variability include: one object might be garbage-collected much sooner than another object, even if they become unreachable at the same time, e.g., due to generational collection.
Function() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Function.prototype.apply() - JavaScript
the source for this interactive example is stored in a github repository.
Function.prototype.bind() - JavaScript
the source for this interactive example is stored in a github repository.
Function.prototype.call() - JavaScript
the source for this interactive example is stored in a github repository.
Function.length - JavaScript
the source for this interactive example is stored in a github repository.
Function - JavaScript
function.prototype.tostring() returns a string representing the source code of the function.
Infinity - JavaScript
property attributes of infinity writable no enumerable no configurable no the source for this interactive example is stored in a github repository.
Intl.Collator() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Intl.Collator.prototype.compare() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.Collator.prototype.resolvedOptions() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.Collator.supportedLocalesOf() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.Collator - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DateTimeFormat() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DateTimeFormat.prototype.format() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DateTimeFormat - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DisplayNames() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DisplayNames.prototype.of() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.DisplayNames - JavaScript
the source for this interactive example is stored in a github repository.
Intl.ListFormat() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Intl.ListFormat - JavaScript
the source for this interactive example is stored in a github repository.
Intl.Locale.prototype.maximize() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.Locale.prototype.minimize() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.Locale.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.NumberFormat() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Intl.NumberFormat.prototype.format() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.NumberFormat.supportedLocalesOf() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.NumberFormat - JavaScript
the source for this interactive example is stored in a github repository.
Intl.RelativeTimeFormat.prototype.format() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
the source for this interactive example is stored in a github repository.
Intl.RelativeTimeFormat - JavaScript
the source for this interactive example is stored in a github repository.
Intl.getCanonicalLocales() - JavaScript
the source for this interactive example is stored in a github repository.
JSON.parse() - JavaScript
the source for this interactive example is stored in a github repository.
JSON.stringify() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype[@@iterator]() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype[@@toStringTag] - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.clear() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.delete() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.forEach() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.get() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.has() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.keys() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.set() - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.size - JavaScript
the source for this interactive example is stored in a github repository.
Map.prototype.values() - JavaScript
the source for this interactive example is stored in a github repository.
Math.E - JavaScript
math.e=e≈2.718\mathtt{\mi{math.e}} = e \approx 2.718 the source for this interactive example is stored in a github repository.
Math.LN10 - JavaScript
the math.ln10 property represents the natural logarithm of 10, approximately 2.302: math.ln10=ln(10)≈2.302\mathtt{\mi{math.ln10}} = \ln(10) \approx 2.302 the source for this interactive example is stored in a github repository.
Math.LN2 - JavaScript
the math.ln2 property represents the natural logarithm of 2, approximately 0.693: math.ln2=ln(2)≈0.693\mathtt{\mi{math.ln2}} = \ln(2) \approx 0.693 the source for this interactive example is stored in a github repository.
Math.LOG10E - JavaScript
the math.log10e property represents the base 10 logarithm of e, approximately 0.434: math.log10e=log10(e)≈0.434\mathtt{\mi{math.log10e}} = \log_10(e) \approx 0.434 the source for this interactive example is stored in a github repository.
Math.LOG2E - JavaScript
the math.log2e property represents the base 2 logarithm of e, approximately 1.442: math.log2e=log2(e)≈1.442\mathtt{\mi{math.log2e}} = \log_2(e) \approx 1.442 the source for this interactive example is stored in a github repository.
Math.PI - JavaScript
the math.pi property represents the ratio of the circumference of a circle to its diameter, approximately 3.14159: math.pi=π≈3.14159\mathtt{\mi{math.pi}} = \pi \approx 3.14159 the source for this interactive example is stored in a github repository.
Math.SQRT1_2 - JavaScript
the math.sqrt1_2 property represents the square root of 1/2 which is approximately 0.707: math.sqrt1_2=12=12≈0.707\mathtt{\mi{math.sqrt1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707 the source for this interactive example is stored in a github repository.
Math.SQRT2 - JavaScript
the math.sqrt2 property represents the square root of 2, approximately 1.414: math.sqrt2=2≈1.414\mathtt{\mi{math.sqrt2}} = \sqrt{2} \approx 1.414 the source for this interactive example is stored in a github repository.
Math.abs() - JavaScript
the math.abs() function returns the absolute value of a number, that is math.abs(x)=|x|={xifx>00ifx=0-xifx<0{\mathtt{\operatorname{math.abs}(z)}} = {|z|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ x & \text{if} \quad x < 0 \end{cases} the source for this interactive example is stored in a github repository.
Math.acos() - JavaScript
the math.acos() function returns the arccosine (in radians) of a number, that is ∀x∊[-1;1],math.acos(x)=arccos(x)= the unique y∊[0;π]such thatcos(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x the source for this interactive example is stored in a github repository.
Math.acosh() - JavaScript
the math.acosh() function returns the hyperbolic arc-cosine of a number, that is ∀x≥1,math.acosh(x)=arcosh(x)= the unique y≥0such thatcosh(y)=x\forall x \geq 1, \mathtt{\operatorname{math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x the source for this interactive example is stored in a github repository.
Math.asin() - JavaScript
the math.asin() function returns the arcsine (in radians) of a number, that is ∀x∊[-1;1],math.asin(x)=arcsin(x)= the unique y∊[-π2;π2]such thatsin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x the source for this interactive example is stored in a github repository.
Math.asinh() - JavaScript
the math.asinh() function returns the hyperbolic arcsine of a number, that is math.asinh(x)=arsinh(x)= the unique ysuch thatsinh(y)=x\mathtt{\operatorname{math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x the source for this interactive example is stored in a github repository.
Math.atan() - JavaScript
the math.atan() function returns the arctangent (in radians) of a number, that is math.atan(x)=arctan(x)= the unique y∊[-π2;π2]such thattan(y)=x\mathtt{\operatorname{math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x the source for this interactive example is stored in a github repository.
Math.atan2() - JavaScript
the source for this interactive example is stored in a github repository.
Math.atanh() - JavaScript
the math.atanh() function returns the hyperbolic arctangent of a number, that is ∀x∊(-1,1),math.atanh(x)=arctanh(x)= the unique ysuch thattanh(y)=x\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x the source for this interactive example is stored in a github repository.
Math.cbrt() - JavaScript
the math.cbrt() function returns the cube root of a number, that is math.cbrt(x)=x3=the uniqueysuch thaty3=x\mathtt{math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x the source for this interactive example is stored in a github repository.
Math.ceil() - JavaScript
the source for this interactive example is stored in a github repository.
Math.clz32() - JavaScript
the source for this interactive example is stored in a github repository.
Math.cos() - JavaScript
the source for this interactive example is stored in a github repository.
Math.cosh() - JavaScript
the math.cosh() function returns the hyperbolic cosine of a number, that can be expressed using the constant e: math.cosh(x)=ex+e-x2\mathtt{\operatorname{math.cosh(x)}} = \frac{e^x + e^{-x}}{2} the source for this interactive example is stored in a github repository.
Math.exp() - JavaScript
the source for this interactive example is stored in a github repository.
Math.expm1() - JavaScript
the source for this interactive example is stored in a github repository.
Math.floor() - JavaScript
the source for this interactive example is stored in a github repository.
Math.fround() - JavaScript
the source for this interactive example is stored in a github repository.
Math.hypot() - JavaScript
the math.hypot() function returns the square root of the sum of squares of its arguments, that is: math.hypot(v1,v2,…,vn)=∑i=1nvi2=v12+v22+…+vn2\mathtt{\operatorname{math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2} the source for this interactive example is stored in a github repository.
Math.imul() - JavaScript
the source for this interactive example is stored in a github repository.
Math.log() - JavaScript
the source for this interactive example is stored in a github repository.
Math.log10() - JavaScript
the math.log10() function returns the base 10 logarithm of a number, that is ∀x>0,math.log10(x)=log10(x)=the uniqueysuch that10y=x\forall x > 0, \mathtt{\operatorname{math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x the source for this interactive example is stored in a github repository.
Math.log1p() - JavaScript
the math.log1p() function returns the natural logarithm (base e) of 1 + a number, that is ∀x>-1,math.log1p(x)=ln(1+x)\forall x > -1, \mathtt{\operatorname{math.log1p}(x)} = \ln(1 + x) the source for this interactive example is stored in a github repository.
Math.log2() - JavaScript
the math.log2() function returns the base 2 logarithm of a number, that is ∀x>0,math.log2(x)=log2(x)=the uniqueysuch that2y=x\forall x > 0, \mathtt{\operatorname{math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x the source for this interactive example is stored in a github repository.
Math.max() - JavaScript
the source for this interactive example is stored in a github repository.
Math.min() - JavaScript
the source for this interactive example is stored in a github repository.
Math.pow() - JavaScript
the source for this interactive example is stored in a github repository.
Math.round() - JavaScript
the source for this interactive example is stored in a github repository.
Math.sign() - JavaScript
the source for this interactive example is stored in a github repository.
Math.sin() - JavaScript
the source for this interactive example is stored in a github repository.
Math.sinh() - JavaScript
the math.sinh() function returns the hyperbolic sine of a number, that can be expressed using the constant e: math.sinh(x)=ex-e-x2\mathtt{\operatorname{math.sinh(x)}} = \frac{e^x - e^{-x}}{2} the source for this interactive example is stored in a github repository.
Math.sqrt() - JavaScript
the math.sqrt() function returns the square root of a number, that is ∀x≥0,math.sqrt(x)=x=the uniquey≥0such thaty2=x\forall x \geq 0, \mathtt{math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x the source for this interactive example is stored in a github repository.
Math.tan() - JavaScript
the source for this interactive example is stored in a github repository.
Math.trunc() - JavaScript
the source for this interactive example is stored in a github repository.
NaN - JavaScript
property attributes of nan writable no enumerable no configurable no the source for this interactive example is stored in a github repository.
Number.EPSILON - JavaScript
the source for this interactive example is stored in a github repository.
Number.MAX_SAFE_INTEGER - JavaScript
the source for this interactive example is stored in a github repository.
Number.MAX_VALUE - JavaScript
the source for this interactive example is stored in a github repository.
Number.MIN_SAFE_INTEGER - JavaScript
the source for this interactive example is stored in a github repository.
Number.MIN_VALUE - JavaScript
the source for this interactive example is stored in a github repository.
Number.NEGATIVE_INFINITY - JavaScript
the source for this interactive example is stored in a github repository.
Number.POSITIVE_INFINITY - JavaScript
the source for this interactive example is stored in a github repository.
Number.isFinite() - JavaScript
the source for this interactive example is stored in a github repository.
Number.isInteger() - JavaScript
the source for this interactive example is stored in a github repository.
Number.isNaN() - JavaScript
the source for this interactive example is stored in a github repository.
Number.isSafeInteger() - JavaScript
the source for this interactive example is stored in a github repository.
Number.parseFloat() - JavaScript
the source for this interactive example is stored in a github repository.
Number.parseInt() - JavaScript
the source for this interactive example is stored in a github repository.
Number.prototype.toExponential() - JavaScript
the source for this interactive example is stored in a github repository.
Number.prototype.toFixed() - JavaScript
the source for this interactive example is stored in a github repository.
Number.prototype.toLocaleString() - JavaScript
the source for this interactive example is stored in a github repository.
Number.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
Number.prototype.valueOf() - JavaScript
the source for this interactive example is stored in a github repository.
Object.create() - JavaScript
the source for this interactive example is stored in a github repository.
Object.defineProperties() - JavaScript
the source for this interactive example is stored in a github repository.
Object.defineProperty() - JavaScript
the source for this interactive example is stored in a github repository.
Object.entries() - JavaScript
the source for this interactive example is stored in a github repository.
Object.freeze() - JavaScript
the source for this interactive example is stored in a github repository.
Object.fromEntries() - JavaScript
the source for this interactive example is stored in a github repository.
Object.getOwnPropertyDescriptor() - JavaScript
the source for this interactive example is stored in a github repository.
Object.getOwnPropertyDescriptors() - JavaScript
examples creating a shallow clone whereas the object.assign() method will only copy enumerable and own properties from a source object to a target object, you are able to use this method and object.create() for a shallow copy between two unknown objects: object.create( object.getprototypeof(obj), object.getownpropertydescriptors(obj) ); creating a subclass a typical way of creating a subclass is to define the subclass, set its prototype to an instance of the superclass, and then define properties on that instance.
Object.getOwnPropertySymbols() - JavaScript
the source for this interactive example is stored in a github repository.
Object.getPrototypeOf() - JavaScript
the source for this interactive example is stored in a github repository.
Object.prototype.hasOwnProperty() - JavaScript
the source for this interactive example is stored in a github repository.
Object.isExtensible() - JavaScript
the source for this interactive example is stored in a github repository.
Object.isFrozen() - JavaScript
the source for this interactive example is stored in a github repository.
Object.prototype.isPrototypeOf() - JavaScript
the source for this interactive example is stored in a github repository.
Object.isSealed() - JavaScript
the source for this interactive example is stored in a github repository.
Object.keys() - JavaScript
the source for this interactive example is stored in a github repository.
Object.preventExtensions() - JavaScript
the source for this interactive example is stored in a github repository.
Object.prototype.propertyIsEnumerable() - JavaScript
the source for this interactive example is stored in a github repository.
Object.seal() - JavaScript
the source for this interactive example is stored in a github repository.
Object.prototype.toLocaleString() - JavaScript
the source for this interactive example is stored in a github repository.
Object.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
Object.prototype.valueOf() - JavaScript
the source for this interactive example is stored in a github repository.
Object.values() - JavaScript
(the only difference is that a for...in loop enumerates properties in the prototype chain as well.) the source for this interactive example is stored in a github repository.
Object - JavaScript
static methods object.assign() copies the values of all enumerable own properties from one or more source objects to a target object.
Promise() constructor - JavaScript
the source for this interactive demo is stored in a github repository.
Promise.all() - JavaScript
the source for this interactive demo is stored in a github repository.
Promise.prototype.catch() - JavaScript
the source for this interactive example is stored in a github repository.
Promise.race() - JavaScript
the source for this interactive demo is stored in a github repository.
Promise.reject() - JavaScript
the source for this interactive example is stored in a github repository.
Promise.prototype.then() - JavaScript
the source for this interactive demo is stored in a github repository.
handler.apply() - JavaScript
the source for this interactive example is stored in a github repository.
handler.construct() - JavaScript
the source for this interactive example is stored in a github repository.
handler.defineProperty() - JavaScript
the source for this interactive example is stored in a github repository.
handler.deleteProperty() - JavaScript
the source for this interactive example is stored in a github repository.
handler.get() - JavaScript
the source for this interactive example is stored in a github repository.
handler.getOwnPropertyDescriptor() - JavaScript
the source for this interactive example is stored in a github repository.
handler.getPrototypeOf() - JavaScript
the source for this interactive example is stored in a github repository.
handler.has() - JavaScript
the source for this interactive example is stored in a github repository.
handler.isExtensible() - JavaScript
the source for this interactive example is stored in a github repository.
handler.ownKeys() - JavaScript
the source for this interactive example is stored in a github repository.
handler.preventExtensions() - JavaScript
the source for this interactive example is stored in a github repository.
handler.set() - JavaScript
the source for this interactive example is stored in a github repository.
handler.setPrototypeOf() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.apply() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.construct() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.defineProperty() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.deleteProperty() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.get() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.getOwnPropertyDescriptor() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.getPrototypeOf() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.has() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.isExtensible() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.ownKeys() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.preventExtensions() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.set() - JavaScript
the source for this interactive example is stored in a github repository.
Reflect.setPrototypeOf() - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype[@@match]() - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype[@@matchAll]() - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype[@@replace]() - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype[@@search]() - JavaScript
the source for this interactive example is stored in a github repository.
get RegExp[@@species] - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype[@@split]() - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype.flags - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype.global - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype.ignoreCase - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype.multiline - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype.sticky - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
RegExp.prototype.unicode - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype[@@iterator]() - JavaScript
the source for this interactive example is stored in a github repository.
Set() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.add() - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.clear() - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.delete() - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.forEach() - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.has() - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.size - JavaScript
the source for this interactive example is stored in a github repository.
Set.prototype.values() - JavaScript
the source for this interactive example is stored in a github repository.
SharedArrayBuffer() constructor - JavaScript
the source for this interactive example is stored in a github repository.
SharedArrayBuffer.prototype.byteLength - JavaScript
the source for this interactive example is stored in a github repository.
SharedArrayBuffer.prototype.slice() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype[@@iterator]() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.charAt() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.charCodeAt() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.codePointAt() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.concat() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.endsWith() - JavaScript
the source for this interactive example is stored in a github repository.
String.fromCharCode() - JavaScript
the source for this interactive example is stored in a github repository.
String.fromCodePoint() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.includes() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.indexOf() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.lastIndexOf() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.localeCompare() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.match() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.matchAll() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.normalize() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.padEnd() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.padStart() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.repeat() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.replace() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.replaceAll() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.search() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.slice() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.split() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.startsWith() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.substr() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.substring() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.toLocaleLowerCase() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.toLocaleUpperCase() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.toLowerCase() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.toUpperCase() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.trim() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.trimEnd() - JavaScript
the source for this interactive example is stored in a github repository.
String.prototype.trimStart() - JavaScript
the source for this interactive example is stored in a github repository.
Symbol() constructor - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.asyncIterator - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.prototype.description - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.for() - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.hasInstance - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.isConcatSpreadable - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.iterator - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.keyFor() - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.match - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.matchAll - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.replace - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.search - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.species - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.split - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.toPrimitive - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.toStringTag - JavaScript
the source for this interactive example is stored in a github repository.
Symbol.unscopables - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.BYTES_PER_ELEMENT - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.buffer - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.byteLength - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.every() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.fill() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.filter() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.find() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.findIndex() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.includes() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.indexOf() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.join() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.keys() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.lastIndexOf() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.length - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.map() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.name - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.of() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.reduce() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.reverse() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.slice() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.some() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.sort() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.subarray() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.toString() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray.prototype.values() - JavaScript
the source for this interactive example is stored in a github repository.
TypedArray - JavaScript
the source for this interactive example is stored in a github repository.
WeakMap.prototype.delete() - JavaScript
the source for this interactive example is stored in a github repository.
WeakMap.prototype.get() - JavaScript
the source for this interactive example is stored in a github repository.
WeakMap.prototype.has() - JavaScript
the source for this interactive example is stored in a github repository.
WeakMap.prototype.set() - JavaScript
the source for this interactive example is stored in a github repository.
WeakRef - JavaScript
sources of variability include: one object might be garbage-collected much sooner than another object, even if they become unreachable at the same time, e.g., due to generational collection.
WeakSet.prototype.add() - JavaScript
the source for this interactive example is stored in a github repository.
WeakSet.prototype.delete() - JavaScript
the source for this interactive example is stored in a github repository.
WeakSet.prototype.has() - JavaScript
the source for this interactive example is stored in a github repository.
WebAssembly.CompileError - JavaScript
instance methods webassembly.compileerror.prototype.tosource() returns code that could eval to the same error.
WebAssembly.Global() constructor - JavaScript
al } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", instance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.Global - JavaScript
al } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", instance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.LinkError - JavaScript
instance methods webassembly.linkerror.prototype.tosource() returns code that could eval to the same error.
WebAssembly.Module() constructor - JavaScript
new webassembly.module(buffersource); parameters buffersource a typed array or arraybuffer containing the binary code of the .wasm module you want to compile.
WebAssembly.Module.customSections() - JavaScript
the wast2wasm command available as part of the wabt tool has a --debug-names option — specify this during conversion to get a .wasm with a names custom section, for example: wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names examples using customsections the following example (see the custom-section.html source and live example) compiles the loaded simple-name-section.wasm byte code.
WebAssembly.Module.imports() - JavaScript
examples using imports the following example (see imports.html source code; see it live also) compiles the loaded simple.wasm module.
WebAssembly.RuntimeError - JavaScript
instance methods webassembly.runtimeerror.prototype.tosource() returns code that could eval to the same error.
WebAssembly.Table() constructor - JavaScript
examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 elements.
WebAssembly.Table.prototype.set() - JavaScript
examples using table.set the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 references.
WebAssembly.Table - JavaScript
examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 elements.
WebAssembly.instantiate() - JavaScript
syntax primary overload — taking wasm binary code promise<resultobject> webassembly.instantiate(buffersource, importobject); parameters buffersource a typed array or arraybuffer containing the binary code of the .wasm module you want to compile.
encodeURI() - JavaScript
the source for this interactive example is stored in a github repository.
encodeURIComponent() - JavaScript
the source for this interactive example is stored in a github repository.
eval() - JavaScript
the source for this interactive example is stored in a github repository.
globalThis - JavaScript
the source for this interactive example is stored in a github repository.
isFinite() - JavaScript
the source for this interactive example is stored in a github repository.
null - JavaScript
the source for this interactive example is stored in a github repository.
parseFloat() - JavaScript
the source for this interactive example is stored in a github repository.
parseInt() - JavaScript
the source for this interactive example is stored in a github repository.
undefined - JavaScript
property attributes of undefined writable no enumerable no configurable no the source for this interactive example is stored in a github repository.
Addition (+) - JavaScript
the source for this interactive example is stored in a github repository.
Addition assignment (+=) - JavaScript
the source for this interactive example is stored in a github repository.
Assignment (=) - JavaScript
chaining the assignment operator is possible in order to assign a single value to multiple variables the source for this interactive example is stored in a github repository.
Bitwise AND (&) - JavaScript
the source for this interactive example is stored in a github repository.
Bitwise AND assignment (&=) - JavaScript
the source for this interactive example is stored in a github repository.
Bitwise NOT (~) - JavaScript
the source for this interactive example is stored in a github repository.
Bitwise OR (|) - JavaScript
the source for this interactive example is stored in a github repository.
Bitwise OR assignment (|=) - JavaScript
the source for this interactive example is stored in a github repository.
Bitwise XOR (^) - JavaScript
the source for this interactive example is stored in a github repository.
Bitwise XOR assignment (^=) - JavaScript
the source for this interactive example is stored in a github repository.
Comma operator (,) - JavaScript
the source for this interactive example is stored in a github repository.
Conditional (ternary) operator - JavaScript
the source for this interactive example is stored in a github repository.
Decrement (--) - JavaScript
the source for this interactive example is stored in a github repository.
Division (/) - JavaScript
the source for this interactive example is stored in a github repository.
Division assignment (/=) - JavaScript
the source for this interactive example is stored in a github repository.
Equality (==) - JavaScript
the source for this interactive example is stored in a github repository.
Exponentiation (**) - JavaScript
the source for this interactive example is stored in a github repository.
Exponentiation assignment (**=) - JavaScript
the source for this interactive example is stored in a github repository.
Greater than (>) - JavaScript
the source for this interactive example is stored in a github repository.
Greater than or equal (>=) - JavaScript
the source for this interactive example is stored in a github repository.
Grouping operator ( ) - JavaScript
the source for this interactive example is stored in a github repository.
Increment (++) - JavaScript
the source for this interactive example is stored in a github repository.
Inequality (!=) - JavaScript
the source for this interactive example is stored in a github repository.
Left shift (<<) - JavaScript
the source for this interactive example is stored in a github repository.
Left shift assignment (<<=) - JavaScript
the source for this interactive example is stored in a github repository.
Less than (<) - JavaScript
the source for this interactive example is stored in a github repository.
Less than or equal (<=) - JavaScript
the source for this interactive example is stored in a github repository.
Logical AND (&&) - JavaScript
the source for this interactive example is stored in a github repository.
Logical AND assignment (&&=) - JavaScript
the source for this interactive example is stored in a github repository.
Logical NOT (!) - JavaScript
the source for this interactive example is stored in a github repository.
Logical OR (||) - JavaScript
the source for this interactive example is stored in a github repository.
Logical OR assignment (||=) - JavaScript
the source for this interactive example is stored in a github repository.
Logical nullish assignment (??=) - JavaScript
the source for this interactive example is stored in a github repository.
Multiplication (*) - JavaScript
the source for this interactive example is stored in a github repository.
Multiplication assignment (*=) - JavaScript
the source for this interactive example is stored in a github repository.
Nullish coalescing operator (??) - JavaScript
the source for this interactive example is stored in a github repository.
Object initializer - JavaScript
the source for this interactive example is stored in a github repository.
Operator precedence - JavaScript
the source for this interactive example is stored in a github repository.
Optional chaining (?.) - JavaScript
the source for this interactive example is stored in a github repository.
Property accessors - JavaScript
the source for this interactive example is stored in a github repository.
Remainder (%) - JavaScript
the source for this interactive example is stored in a github repository.
Remainder assignment (%=) - JavaScript
the source for this interactive example is stored in a github repository.
Right shift (>>) - JavaScript
the source for this interactive example is stored in a github repository.
Right shift assignment (>>=) - JavaScript
the source for this interactive example is stored in a github repository.
Spread syntax (...) - JavaScript
the source for this interactive example is stored in a github repository.
Strict equality (===) - JavaScript
the source for this interactive example is stored in a github repository.
Strict inequality (!==) - JavaScript
the source for this interactive example is stored in a github repository.
Subtraction (-) - JavaScript
the source for this interactive example is stored in a github repository.
Subtraction assignment (-=) - JavaScript
the source for this interactive example is stored in a github repository.
Unary negation (-) - JavaScript
the source for this interactive example is stored in a github repository.
Unary plus (+) - JavaScript
the source for this interactive example is stored in a github repository.
Unsigned right shift (>>>) - JavaScript
the source for this interactive example is stored in a github repository.
Unsigned right shift assignment (>>>=) - JavaScript
the source for this interactive example is stored in a github repository.
class expression - JavaScript
the source for this interactive example is stored in a github repository.
delete operator - JavaScript
the source for this interactive example is stored in a github repository.
function* expression - JavaScript
the source for this interactive example is stored in a github repository.
Function expression - JavaScript
the source for this interactive example is stored in a github repository.
in operator - JavaScript
the source for this interactive example is stored in a github repository.
instanceof - JavaScript
the source for this interactive example is stored in a github repository.
new.target - JavaScript
the source for this interactive example is stored in a github repository.
this - JavaScript
the source for this interactive example is stored in a github repository.
typeof - JavaScript
the source for this interactive example is stored in a github repository.
void operator - JavaScript
the source for this interactive example is stored in a github repository.
yield* - JavaScript
the source for this interactive example is stored in a github repository.
yield - JavaScript
the source for this interactive example is stored in a github repository.
empty - JavaScript
the source for this interactive example is stored in a github repository.
async function - JavaScript
the source for this interactive demo is stored in a github repository.
block - JavaScript
the block is delimited by a pair of braces ("curly brackets") and may optionally be labelled: the source for this interactive example is stored in a github repository.
break - JavaScript
the source for this interactive example is stored in a github repository.
class - JavaScript
the source for this interactive example is stored in a github repository.
const - JavaScript
the source for this interactive example is stored in a github repository.
continue - JavaScript
the source for this interactive example is stored in a github repository.
debugger - JavaScript
it is like a breakpoint in the script source.
do...while - JavaScript
the source for this interactive example is stored in a github repository.
export - JavaScript
ssign something useful to myclass export myclass; // in parentmodule.js // only aggregating the exports from childmodule1 and childmodule2 // to re-export them export { myfunction, myvariable } from 'childmodule1.js'; export { myclass } from 'childmodule2.js'; // in top-level module // we can consume the exports from a single module since parentmodule // "collected"/"bundled" them in a single source import { myfunction, myvariable, myclass } from 'parentmodule.js' specifications specification ecmascript (ecma-262)the definition of 'exports' in that specification.
for await...of - JavaScript
this can be undesireable if you need to free some allocated resources with try/finally.
for...in - JavaScript
the source for this interactive example is stored in a github repository.
for...of - JavaScript
the source for this interactive example is stored in a github repository.
for - JavaScript
the source for this interactive example is stored in a github repository.
function* - JavaScript
the source for this interactive example is stored in a github repository.
function declaration - JavaScript
the source for this interactive example is stored in a github repository.
if...else - JavaScript
the source for this interactive example is stored in a github repository.
label - JavaScript
the source for this interactive example is stored in a github repository.
let - JavaScript
the source for this interactive example is stored in a github repository.
return - JavaScript
the source for this interactive example is stored in a github repository.
throw - JavaScript
the source for this interactive example is stored in a github repository.
var - JavaScript
the source for this interactive example is stored in a github repository.
while - JavaScript
the source for this interactive example is stored in a github repository.
with - JavaScript
use of the with statement is not recommended, as it may be the source of confusing bugs and compatibility issues.
Transitioning to strict mode - JavaScript
while making web browsers interpret code as strict is easy (just add 'use strict'; at the top of your source code), transitioning an existing code base to strict mode requires a bit more work.
Template literals (Template strings) - JavaScript
`\`` === '`' // --> true multi-line strings any newline characters inserted in the source are part of the template literal.
Web app manifests
pwa manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).
MathML attribute reference - MathML
unimplemented src <mglyph> the location of the image resource.
<semantics> - MathML
src the location of an external source for semantic information.
Handling media support issues in web content - Web media technologies
specifying multiple sources checking compatibility in javascript htmlmediaelement.canplaytype and mediasource.istypesupported...
Digital video concepts - Web media technologies
in other words, we're taking color information from every other row of pixels in the source image and applying them to the greyscale image represented by the luma.
Add to Home screen - Progressive web apps (PWAs)
we've written a very simple example web site (see our demo live, and also see the source code) that doesn't do much, but was developed with the necessary code to allow it to be added to a home screen, as well as a service worker to enable it to be used offline.
Installing and uninstalling web apps - Progressive web apps (PWAs)
the install user experience we've written a very simple example web site (see our demo live, and also see the source code) that doesn't do much, but was developed with the necessary code to allow it to be installed, as well as a service worker to enable it to be used offline.
PWA developer guide - Progressive web apps (PWAs)
using service workers to run offline description alerting the user using notifications description creating a web app from an existing site description advanced topics pushing data from the server to your web application some description resource management description integration with the host device description security and privacy description gaming topics for web app developers description polishing web apps web api equivalents for common native apis some description platform-specific tips and issues description web application performance guide description ensuring a good user experience description related top...
How to make PWAs installable - Progressive web apps (PWAs)
icons: a bunch of icon information — source urls, sizes, and types.
Graphic design for responsive sites - Progressive web apps (PWAs)
so when the page is loaded on a mobile device, the mobile will only download the mobile assets, and not the desktop resource assets.
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since svg 2 if set to true, it indicates that the browser must wait for all the external resources necessary to render that element to be loaded before processing the associated element.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: normal|<length>|inherit; animatable: yes lighting-color it defines the color of the light source for filter primitives elements <fediffuselighting> and <fespecularlighting>.
azimuth - SVG: Scalable Vector Graphics
WebSVGAttributeazimuth
the azimuth attribute specifies the direction angle for the light source on the xy plane (clockwise), in degrees from the x axis.
baseFrequency - SVG: Scalable Vector Graphics
example <svg width="200" height="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.
diffuseConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fediffuselighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting 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(#diffuse...
elevation - SVG: Scalable Vector Graphics
the elevation attribute specifies the direction angle for the light source from the xy plane towards the z-axis, in degrees.
format - SVG: Scalable Vector Graphics
WebSVGAttributeformat
here is a list of font formats and their strings that can be used as values for this attribute: format string format truedoc-pfr truedoc™ portable font resource embedded-opentype embedded opentype type-1 postscript™ type 1 truetype truetype opentype opentype, including truetype open truetype-gx truetype with gx extensions speedo speedo intellifont intellifont specifications specification status comment ...
k1 - SVG: Scalable Vector Graphics
WebSVGAttributek1
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <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 hr...
k2 - SVG: Scalable Vector Graphics
WebSVGAttributek2
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <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 hr...
k3 - SVG: Scalable Vector Graphics
WebSVGAttributek3
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <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 hr...
k4 - SVG: Scalable Vector Graphics
WebSVGAttributek4
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <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 ...
limitingConeAngle - SVG: Scalable Vector Graphics
the axis between the light source and the point to which it is pointing at) and the spot light cone.
local - SVG: Scalable Vector Graphics
WebSVGAttributelocal
if both the xlink:href and the local attribute are specified, then the local file system is searched for the color profile first, and, if not available locally, then the resource identified by the xlink:href attribute is used.
mode - SVG: Scalable Vector Graphics
WebSVGAttributemode
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" 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="multiply"/> </filter> <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.
numOctaves - SVG: Scalable Vector Graphics
example <svg 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.
result - SVG: Scalable Vector Graphics
WebSVGAttributeresult
aussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <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 fi...
seed - SVG: Scalable Vector Graphics
WebSVGAttributeseed
: 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 basefrequency="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.
specularConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="specularlighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" 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: ur...
surfaceScale - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting 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);" /> <rec...
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an html or xhtml document, or is viewed with a tabbed browser.
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <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="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(#d...
xlink:type - SVG: Scalable Vector Graphics
, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage notes value simple default value simple animatable no simple this value specifies that the referred resource is a simple link.
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <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="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(#d...
zoomAndPan - SVG: Scalable Vector Graphics
two elements are using this attribute: <svg> and <view> 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 scalab...
<animateColor> - SVG: Scalable Vector Graphics
e element, graphics element, shape elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimatecolorelement interface.
<animateTransform> - SVG: Scalable Vector Graphics
dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes » animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this element implements the svganimatetransformelement interface.
<cursor> - SVG: Scalable Vector Graphics
WebSVGElementcursor
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes xlink attributes externalresourcesrequired specific attributes x y xlink:href dom interface this element implements the svgcursorelement interface.
<discard> - SVG: Scalable Vector Graphics
WebSVGElementdiscard
the <discard> svg element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an svg user agent.
<feDisplacementMap> - SVG: Scalable Vector Graphics
example <svg width="200" height="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.
<feImage> - SVG: Scalable Vector Graphics
WebSVGElementfeImage
the <feimage> svg filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an svg image, it is rasterized.) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatetransform>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectratio xlink:href dom interface this element implements the svgfeimageelement interface.
<feMerge> - SVG: Scalable Vector Graphics
WebSVGElementfeMerge
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/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 at...
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" 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"...
<feOffset> - SVG: Scalable Vector Graphics
WebSVGElementfeOffset
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.
<feTile> - SVG: Scalable Vector Graphics
WebSVGElementfeTile
example svg <svg width="200" height="200" xmlns="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 s...
<feTurbulence> - SVG: Scalable Vector Graphics
example <svg width="200" height="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
WebSVGElementfilter
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elementsfilter primitive elements<animate>, <set> attributes global attributes core attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes x y width height filterres filterunits primitiveunits xlink:href dom interface this element implements the svgfilterelement interface.
<font> - SVG: Scalable Vector Graphics
WebSVGElementfont
usage context categoriesfont elementpermitted contentany number of the following elements, in any order:descriptive elements<font-face>, <glyph>, <hkern>, <missing-glyph>, <vkern> attributes global attributes core attributes presentation attributes class style externalresourcesrequired specific attributes horiz-origin-x horiz-origin-y horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgfontelement interface.
<mpath> - SVG: Scalable Vector Graphics
WebSVGElementmpath
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes core attributes » xlink attributes » externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgmpathelement interface.
<switch> - SVG: Scalable Vector Graphics
WebSVGElementswitch
usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired transform dom interface this element implements the svgswitchelement interface.
<tref> - SVG: Scalable Vector Graphics
WebSVGElementtref
usage context categoriestext content element, text content child elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatecolor>, <set> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgtrefelement interface.
<view> - SVG: Scalable Vector Graphics
WebSVGElementview
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio 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)"/> <vie...
SVG element reference - SVG: Scalable Vector Graphics
WebSVGElement
etile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>,...
Namespaces crash course - SVG: Scalable Vector Graphics
this parameter is commonly used by other xml dialects as a means to link to external resources.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
of the pseudo-inputs, sourcegraphic, sourcealpha, fillpaint and strokepaint are implemented.
SVG as an Image - SVG: Scalable Vector Graphics
external resources (e.g.
Getting started - SVG: Scalable Vector Graphics
svg files on the web can be displayed directly in the browser or embedded in html files via several methods: if the html is xhtml and is delivered as type application/xhtml+xml, the svg can be directly embedded in the xml source.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
source here is the source to the example: <html> <head> <title>xtech svg demo</title> <style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <l...
SVG fonts - SVG: Scalable Vector Graphics
you can point to external sources for font declarations by means of its children <font-face-name> and <font-face-uri>.
SVG Tutorial - SVG: Scalable Vector Graphics
WebSVGTutorial
if you just want to draw beautiful images, you might find more useful resources at inkscape's documentation page.
SVG: Scalable Vector Graphics
WebSVG
other resources: xml, css, dom, canvas examples google maps (route overlay) & docs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible fr...
Certificate Transparency - Web security
the advantage is that the server operator can customise the ct log sources providing the scts sent via the tls extension/stapled ocsp response.
Transport Layer Security - Web security
some web servers use renegotiation to either ensure that client certificates are encrypted, or to request client certificates only when certain resources are requested.
Types of attacks - Web security
cross-site scripting attacks usually occur when 1) data enters a web app through an untrusted source (most often a web request) or 2) dynamic content is sent to a web user without being validated for malicious content.
Using shadow DOM - Web Components
for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the style...
following-sibling - XPath
the following-sibling axis indicates all the nodes that have the same parent as the context node and appear after the context node in the source document.
preceding-sibling - XPath
the preceding-sibling axis indicates all the nodes that have the same parent as the context node and appear before the context node in the source document.
unparsed-entity-url - XPath
this is non-xml data referenced in the dtd of the source document.
Functions - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the following is an annotated list of core xpath functions and xslt-specific additions to xpath, including a description, syntax, a list of arguments, result-type, source in the appropriate w3c recommendation, and degree of present gecko support.
Introduction to using XPath in JavaScript - XPath
ken holman original document information based upon original document mozilla xpath tutorial original source author: james graham.
XPath snippets - XPath
tempitem2 = tempitem2.previoussibling; } xpath = "*[name()='"+el.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']["+pos+']'+'/'+xpath; el = el.parentnode; } xpath = '/*'+"[name()='"+xml.documentelement.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']"+'/'+xpath; xpath = xpath.replace(/\/$/, ''); return xpath; } resources xpath forum discussion on this topic see also introduction to using xpath in javascript ...
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
mime types your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml.
<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:preserve-space> element defines the elements in the source document for which whitespace should be preserved.
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
input-type-annotations specifies whether type annotations are stripped from the element so the same results are produced whether the source documents have been validated against a schema or not.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElement
ws: <xsl:variable name="image-dir">/images</xsl:variable> the expression to be evaluated is placed inside curly 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.
An Overview - XSLT: Extensible Stylesheet Language Transformations
despite the fact that very often namespaces appear to be uris, they do not, in fact, refer to a resource located at that address.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 0764543814 michael kay is a member of the w3c xsl working group and the developer of his own open-source xslt processor, saxon.
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
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.
The XSLT/JavaScript Interface in Gecko - XSLT: Extensible Stylesheet Language Transformations
introduction javascript/xslt bindings basic example setting parameters advanced example interface list resources ...
Caching compiled WebAssembly modules - WebAssembly
const wasmcacheversion = 1; instantiatecachedurl(wasmcacheversion, 'test.wasm').then(instance => console.log("instance says the answer is: " + instance.exports.answer()) ).catch(err => console.error("failure to instantiate: " + err) ); you can find the source code for this example on github as indexeddb-cache.html (see it live also).
Compiling from Rust to WebAssembly - WebAssembly
it's ready for use from javascript, and doesn't require the user to have rust installed; the code included was the webassembly code, not the rust source.
Understanding WebAssembly text format - WebAssembly
this results in "hi" being printed to the console: var memory = new webassembly.memory({initial:1}); var importobject = { console: { log: consolelogstring }, js: { mem: memory } }; webassembly.instantiatestreaming(fetch('logger2.wasm'), importobject) .then(obj => { obj.instance.exports.writehi(); }); note: you can find the full source on github as logger2.html (also see it live).